Tutorial Blog for Stylish Blogger: Mei 2010

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN_TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

Google rich snippets tips and tricks??? Hayo apa yang terbayang kalo membaca itu ;)) Mungkin salah satu kekuatan keyword bila disearch/dicari ya trik ini sob :-" Dengan menggunakan teknik yg disebut microformat, microdata, atau RDFa ini, bisa mengkuatkan keyword yg ada pada postingan kita. Kita tidak akan tahu secara pasti, soalnya kinerja dari trik ini tidak akan terlihat kasat mata dan akan terlihat apabila kita melakukan klik kanan pada mouse dan open source :P

Dengan menggunakan snippet (potongan) kecil yg kita anggap tak berguna ini, ternyata google menaruh perhatian yg khusus untuk satu hal ini. Microformats ini tidak sama keberadaannya dengan semantic web Cubicgarden. Apalagi dengan adanya microblogging atau web via phone, patut nih kita perhatikan untuk satu hal ini ;)) Yang mengejutkan ternyata trik ini saling berkaitan dg google custome search sob :) Mau menerangkan aku jg tidak paham, ya sudah pahami dan renungkan saja hasil ngebloglang kali ini ya sob :-"

Ada baiknya coba sobat perhatikan URL salah satu postingan yg belum disnippets dan masukan Webmaster Tools. Ini contoh yg Beben lakukan pada blognya master Doyok ;)) pada link postnya yg berjudul Cara Mendaftar Google Analytics Untuk Evaluasi Blog.

Ini postingan aku yg sebelumnya...:D walau masih ada warning sih :-s

Silahkan memasuki halaman berikut untuk mengetahui apa, bagaimana dan fungsi dari hNews itu Tech and Law. Perhatikan pada point...

How to add basic hNews to a Blogger blog - tutorial.

Bagaimana :-? Tertarik menggunakan Rich Snippets, sign up on . Coba sobat yg benar² mau berseo ria ada baiknya membaca dasar perintah google dalam melakukan search , dan lanjutkan membaca mengenai dasar dari trik snippets ini ini salah satu contoh dari hasil dan struktur snippets dan uji hasil trik ini dan ini hasil Beben si bloglang ganteng kalem dalam memasang trik ini cek gi dot. Untuk mengaplikasikan hAtom pada blogger . Cawww...:-h

▼ ▲

Make Your URL Shortener

3 Komentar

▼ ▲

Feature CSS3 Transitions, Transforms, Animation

7 Komentar

▼ ▲

LK Magazine V2 Premium

3 Komentar

▼ ▲

Brainy Bookmarklet Links

6 Komentar

Bookmarklet adalah suatu applet, aplikasi komputer kecil, disimpan sebagai URL dari bookmark di web browser atau sebagai hyperlink pada halaman web. Satu kalimat yang mengelink kemana-mana =)) Pasti sobat sudah pada kenal dengan istilah bookmark ini :) Secara manual dan tercepat ya pencet secara bersama pada keyboard Ctrl + D :D

Setelah BW ternyata bookmark ini banyak fungsinya sob dalam perjalanan perkembangannya. Tidak sekedar sebagai menyimpan link atau apapun tapi bisa berfungsi gaya :)) b-) Seperti biasa Beben si bloglang ganteng kalem tea :P kembali membawa informasi pilihan mengenai bookmark ini. Untuk membaca dari sebuah web biar lebih full stylish, mengeprint, memberikan info dll nih Beben dapet ;)

Better, Stronger, Safer jQuerify Bookmarklet

jQuerify « drag to your bookmarks bar

Readable

<a id="bookmarklet" href="javascript:(function(){if(document.getElementsByTagName('html').length>0);else{return;}if(document.getElementsByTagName('body').length>0);else{return;}if(window.$readable);else{window.$readable={};window.$readable.path='http://readable-app.appspot.com/';}window.$readable.options={};window.$readable.options.base='blueprint';window.$readable.options.font_family='wide_sans_serif';window.$readable.options.font_size='12';window.$readable.options.text_line_height='2';window.$readable.options.text_align='normal';window.$readable.options.text_image_align='center';window.$readable.options.text_box_width='80_percent';window.$readable.options.text_box_align='center';window.$readable.options.text_box_outer_margin='1';window.$readable.options.text_box_inner_margin='1';window.$readable.options.color_theme='light_grey_off_black';window.$readable.options.background_transparency='70';window.$readable.options.background_transparency_color='from_theme';window.$readable.options.video='strip';if(window.$readable.callScript){window.$readable.callScript();return;}if(document.getElementsByTagName('head').length>0);else{document.getElementsByTagName('html')[0].insertBefore(document.createElement('head'),document.getElementsByTagName('body')[0]);}document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).setAttribute('src',window.$readable.path+'target.js?rand='+encodeURIComponent(Math.random()));})()">Readable</a>

The Printliminator

<a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2',function(){loadScript('http://css-tricks.com/examples/ThePrintliminator/js/printliminator.js',function(){printlimator()})})})()" class="bookmarklet">Printliminator</a>

ClipR

<a href="javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.4.2",function($,L){$(document).ready(function(){$("iframe,object,embed,input[type=image],ins").hide();$("div,table").live("mouseover mouseout click",function(a){a.type=="mouseover"?$(this).css({border:"1px solid red"}):$("div,table").css({border:"none"});if(a.type=="click"){$("link[type='text/css'],link[rel='stylesheet'],script,style,noscript").remove();$("body").empty();$(this).appendTo("body");a=$("title").text();$("head").empty();$("head").append("<title>"+a+"</title>");$("head").append('<style type="text/css">@media print{div,table {width:100% !important;font-family:Garamond,"Times New Roman",serif !important;font-size:12pt !important;}}</style>'); $(this).append("<hr><b>From The Web Page</b>: <i>"+a+"</i>");$(this).css({font:"21px/1.618 Georgia, serif",color:"#111",width:"62%",margin:"5px auto"});$("a img").css({border:"0"});$("p").css({margin:"0.618em 0"});$("h1,h2,h3,br").css({"line-height":"1.3"});$("body").css({"background-color":"#f9f9f9"});$("div,table").die("mouseover mouseout click")}return false})});});">ClipR</a>

<a href="javascript:styles='a.stub,a.new{color:#ba0000;text-decoration:none;}#toc{border:1px solid #aaa;background-color:#f9f9f9;padding:5px;}.tocindent{margin-left:2em;}.tocline{margin-bottom:0;}div.floatright{float:right;clear:right;margin:0;position:relative;border:.5em solid White;border-width:.5em 0 .8em 1.4em;}div.floatright p{font-style:italic;}div.floatleft{float:left;margin:.3em .5em .5em 0;position:relative;border:.5em solid White;border-width:.5em 1.4em .8em 0;}div.floatleft p{font-style:italic;}div.thumb{margin-bottom:.5em;border-style:solid;border-color:White;width:auto;overflow:hidden;}div.thumb div{border:1px solid #ccc;padding:3px!important;background-color:#f9f9f9;font-size:94%25;text-align:center;}div.thumb div a img{border:1px solid #ccc;}div.thumb div div.thumbcaption{border:none;padding:.3em 0 .1em 0;}div.magnify{display:none;}div.tright{float:right;clear:right;border-width:.5em 0 .8em 1.4em;}div.tleft{float:left;margin-right:.5em;border-width:.5em 1.4em .8em 0;}img.thumbborder{border:1px solid #ddd;}table.rimage{float:right;width:1pt;position:relative;margin-left:1em;margin-bottom:1em;text-align:center;}body{background:#fff;font-size:19px;font-family:Georgia,"Times New Roman",Times,serif;color:Black;width:70%25;margin:0 auto;padding:0;line-height:1.6;}.noprint,div#jump-to-nav,div.top,div#column-one,#colophon,.editsection,.toctoggle,.tochidden,div#f-poweredbyico,div#f-copyrightico,li#viewcount,li#about,li#disclaimer,li#privacy,#mw-hidden-catlinks,.siteNoticeUser,.infobox{display:none;}ul{list-style-type:square;}#content{background:none;border:none!important;padding:0!important;margin:0!important;}#footer{background:white;color:black;border-top:1px solid black;}h1,h2,h3,h4,h5,h6{font-weight:bold;}p,.documentDescription{margin:1em 0!important;line-height:1.5em;}.tocindent p{margin:0 0 0 0!important;}pre{border:1pt dashed black;white-space:pre;font-size:8pt;overflow:auto;padding:1em 0;background:white;color:black;}table.listing,table.listing td{border:1pt solid black;border-collapse:collapse;}a{color:#666!important;background:none!important;padding:0!important;}a:link,a:visited{color:#999;background:transparent;text-decoration:underline;}#content a.external.text:after,#content a.external.autonumber:after{color:#666!important;}#globalWrapper{width:100%25!important;min-width:0!important;}#content{background:white;color:black;}#column-content{margin:0!important;}#column-content #content{padding:1em;margin:0!important;}a,a.external,a.new,a.stub{color:black!important;text-decoration:none!important;}a,a.external,a.new,a.stub{color:#666!important;text-decoration:inherit!important;}img{border:none;}img.tex{vertical-align:middle;}span.texhtml{font-family:serif;}#siteNotice{display:none;}div.gallerybox{border:1px solid #ccc;background-color:#f9f9f9;width:150px;}div.gallerytext{overflow:visible;}table.diff{background:white;}td.diff-otitle{background:#fff;}td.diff-ntitle{background:#fff;}td.diff-addedline{background:#cfc;font-size:smaller;border:solid 2px black;}td.diff-deletedline{background:#ffa;font-size:smaller;border:dotted 2px black;}td.diff-context{background:#eee;font-size:smaller;}.diffchange{color:silver;font-weight:bold;text-decoration:underline;}'; newSS = document.createElement('link'); newSS.rel = 'stylesheet'; newSS.href = 'data:text/css,' + escape(styles); document.documentElement.childNodes[0].appendChild(newSS); void 0">WikiReader</a>

Google Dictionary Drag the link to your browser bookmark toolbar.

Fast Tweet Drag the link to your browser bookmark toolbar.

Auto Translate Drag the link to your browser bookmark toolbar.

RedDIV Drag the link to your browser bookmark toolbar.

NoFollow Drag the link to your browser bookmark toolbar.

Latent Motion

<a href="javascript:(function(){var head=document.getElementsByTagName('head')[0],script=document.createElement('script');script.type='text/javascript';script.src='http://www.my.com/your-javascript.js?' + Math.floor(Math.random()*99999);head.appendChild(script);})(); void 0">Your Bookmarklet Name</a>

Squarefree
Drag this script on your browser bookmark toolbar.

javascript:(function(){function getSel() {var txt = '';if (window.getSelection) {txt = window.getSelection();} else if (document.getSelection) {txt = document.getSelection();} else if (document.selection) {txt = document.selection.createRange().text;} else return;var s = txt.toString();return s;}var u = 'http://www.similpedia.org/engine';var sel = getSel();if (sel.length == 0) { sel = location.href; }  nD = window.open().document;    nD.writeln('<HTML><HEAD></HEAD><BODY>');  nD.writeln('<FORM NAME=form ACTION=' + u + ' METHOD=POST>'); nD.writeln('<TEXTAREA name=q>' + sel + '</TEXTAREA>'); nD.writeln('<INPUT TYPE=SUBMIT NAME=Submit VALUE=Submit></INPUT>'); nD.writeln('</FORM>'); nD.writeln('<SCRIPT>document.form.submit();</SCRIPT>'); nD.writeln('</BODY></HTML>'); nD.close();})()"

Citebite

Cite Bite

SpriteMe

Try it on this page:

Subsimple
Ini bookmarklet tombol like yg ada pada facebook

javascript:(function(){try{var url=encodeURIComponent(location.href);var ifr=document.createElement('iframe');ifr.style.position='absolute';ifr.style.top=10+'px';ifr.style.left=10+'px';ifr.style.width=450+'px';ifr.style.height=100+'px';ifr.style.border='none';ifr.src='http://www.facebook.com/plugins/like.php?href='+url+'&show_faces=true&width=450&action=like&colorscheme=light';ifr.scrolling='no';ifr.frameborder=0;document.getElementsByTagName('body')[0].appendChild(ifr);var ifr=document.createElement('iframe');ifr.style.position='absolute';ifr.style.top=125+'px';ifr.style.left=10+'px';ifr.style.width=450+'px';ifr.style.height=100+'px';ifr.style.border='none';ifr.src='http://likeomatic.heroku.com/i';ifr.scrolling='no';ifr.frameborder=0;document.getElementsByTagName('body')[0].appendChild(ifr);}catch(e){}})();

CategoryTagBlogThis!
XRAY

XRAY

MRI
Heres bro MRI

Drag this Microformats script

javascript:(function(){function%20l(u,i,t,b){var%20d=document;if(!d.getElementById(i)){var s=d.createElement('script');s.src=u;s.id=i;d.body.appendChild(s)}s=setInterval(function(){u=0;try{u=t.call()}catch(i){}if(u){clearInterval(s);b.call()}},200)}l('http://leftlogic.com/js/microformats.js','MF_loader',function(){return!!(typeof MicroformatsBookmarklet=='function')}, function(){MicroformatsBookmarklet()})})();

Readability
Nah masuk kemari guna mendapatkan bookmarklets yg berguna

subsimple
javascript:(function(){var%20s=document.createElement('script');var%20t=new%20Date().getTime();s.setAttribute('type','text/javascript');s.setAttribute('class','ydebug');s.setAttribute('src','http://debug.yaml.de/debugger.js?d='+String(t));document.getElementsByTagName('head')[0].appendChild(s);})();
Slayeroffice
Favelets
Copy the link to your browser bookmark toolbar, use F5(refresh) to clear the grid.

javascript:(function(){body=document.getElementsByTagName('body').item(0);newElement=document.createElement('canvas');newElement.id='grid';body.appendChild(newElement);var a=document.getElementById('grid');a.style.cssText='left:0;top:'+document.documentElement.scrollTop+'px; z-index:100000; position:absolute;';a.width=window.innerWidth;a.height=window.innerHeight;var b=a.getContext('2d'),c=window.innerWidth,d=window.window.innerHeight;b.font='bold 15px sans-serif';b.strokeStyle='rgba(245, 197, 196, 0.8)';b.beginPath(); for(var e=0;e<c;e+=10){b.moveTo(e,0);b.lineTo(e,c)}for(e=0;e<c;e+=100){b.moveTo(e,0);b.lineTo(e,c);b.fillText(e,e+4,15)}for(var f=0;f<d;f+=100){b.moveTo(0,f);b.lineTo(c,f);b.fillText(f,10,f-4)}for(f=0;f<d;f+=10){b.moveTo(0,f);b.lineTo(c,f)}b.stroke();})()

Ini untuk membuat highlight jenis huruf yg kita cari.
javascript:var%20items=new%20Array();if(document.referrer.indexOf('google')!=-1%20&&document.referrer.indexOf('q=')!=-1){var%20queryTermsRegExp=new%20RegExp('q=([^&]+)');if(queryTermsRegExp.test(document.referrer)){items=RegExp.$1.split('+');}}if(items.length%20==%200){var%20searchWords=prompt('Enter%20one%20or%20more%20words%20to%20highlight:','');items=searchWords.split('%20');}var%20colors=new%20Array('#ffff66','#a0ffff','#99ff99','#ff9999','#ff66ff','#880000','#00aa00','#886800','#004699','#990099');b=document.body.innerHTML;for(var%20i=0;%20i<items.length;%20i++){var%20replacementRegEx=new%20RegExp('('+items[i]+')','gi');b=b.replace(replacementRegEx,'<span%20style=\'background-color:'+colors[i%20%%20colors.length]+';\'>$1</span>');}var%20scrollToRegEx=new%20RegExp('('+items[0]+')','i');b=b.replace(scrollToRegEx,'<span%20id=\'scrollToHilight\'>$1</span>');void(document.body.innerHTML=b);window.scrollTo(0,document.getElementById('scrollToHilight').offsetTop);
Decode Encode Bookmark

javascript:(function(src,w,h,i,s){if(this.WebReflectionEncode)return%20this.WebReflectionEncode();function%20p(){s.top=(document.documentElement.scrollTop||(document.body&&document.body.scrollTop)||0)+'px'};try{i=document.createElement('<iframe%20frameborder="0"%20src="'+src+'"></iframe>')}catch(e){i=document.createElement('iframe');i.src=src};s=i.style;s.border='1px%20solid%20black';s.width=w+'px';s.height=h+'px';s.position='absolute';s.right=0;s.zIndex=99999;p();w=setInterval(p,250);(document.body||document.documentElement).appendChild(i);this.WebReflectionEncode=function(){clearInterval(w);i.parentNode.removeChild(i);w=h=s=i=null;this.WebReflectionEncode=null;}})('http://www.3site.eu/encode/',280,320);

Looking for image and host via imageshack.us

javascript:t='';for(var%20n=0;n<document.images.length;n++){t+='<a%20href=/%20onclick=\'document.f.url.value=document.images['+n+'].src;document.f.submit();return%20false;\'><img%20border=0%20src='+document.images[n].src+'></a>%20'};if(t!=''){document.write('<html><head><title>ImageShack%C2%AE</title><link%20rel=stylesheet%20href=http://imageshack.us/img/style-def.css%20type=text/css></head><body%20bgcolor=#F7F7F7><table%20border=1%20cellpadding=5%20cellspacing=0%20class=table_decoration%20align=center%20width=760><tr><td><iframe%20src=http://imageshack.us/adsframe2.php%20scrolling=no%20allowtransparency=true%20frameborder=0%20width=700%20height=300><a%20href=http://www.getfirefox.com>Get%20FireFox!</a></iframe><p>ImageShack%20has%20found%20the%20following%20images%20on%20this%20page.</p><p>Click%20on%20any%20image%20to%20host%20it%20on%20ImageShack,%20or%20press%20the%20back%20button%20to%20return%20to%20the%20previous%20page.</p><form%20name=f%20action=http://imageshack.us/transload.php%20method=post><input%20type=hidden%20name=url></form>'+t+'</td></tr></table></body></html>');void(document.close())}else{alert('There%20are%20no%20images%20to%20host%20on%20this%20page.')}

Untuk melihat gambar pada satu halaman.

javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')}

Drag this bookmarklet to your bookmarks bar or a tab and start having some fun on other pages too!
Untuk melihat ada tidaknya link del.icio.us

javascript:var res = null; var ok_title = new RegExp('^del\.?icio\.?us links'); var ok_type  = 'text/html';varres_css = 'padding-bottom:15px;'; var content_txt = 'This person\'s del.icio.us links can be seen at ';var content_css = 'margin-bottom:10px;border:1px solid #ccc;padding:5px;background-color:beige;';var doc  = document;var list = doc.getElementsByTagName('link');var body = doc.getElementsByTagName('body')[0];for (var i = 0; i < list.length; i++) {var link = list[i]; if ((link.type == ok_type) &amp;&amp;(ok_title.test(link.title))) {var regexp_del = new RegExp('^(http:\/\/del\.icio\.us)\/(.*)$');var url_rss = link.href.replace(regexp_del,'$1/rss/$2');var html = doc.createElement('a');html.setAttribute('href',link.href);html.appendChild(doc.createTextNode(link.href)); rss = doc.createElement('a');rss.setAttribute('href',url_rss); res = doc.createElement('div'); res.setAttribute('style',res_css); var content = doc.createElement('div');content.setAttribute('style',content_css);rss.appendChild(doc.createTextNode('rss'));content.appendChild(doc.createTextNode(content_txt));content.appendChild(html);content.appendChild(doc.createTextNode(' ('));content.appendChild(rss);content.appendChild(doc.createTextNode(')')); res.appendChild(content); break;}} if (res) { void(doc.body.insertBefore(res,doc.body.firstChild)); } else {alert('no del.icio.us links'); }

Trunk.ly
CoffeeTable, v0.1.1

CoffeeTable

Flexible Nav

FlexibleNav bookmarklet

WhatFont
X-Ray Goggles.
FontFriend
See you :-h

LOOK IN MODE MOBILE OKAY!!!
Be a creatif, build your blog with your style GAYA \m/

▼ ▲

Google Blow Up

11 Komentar

▼ ▲

Creating Multicolumn Lists using CSS

7 Komentar

▼ ▲

Special FeedBurner for Blogger

9 Komentar

Hehehe ;) blogspot tambah feature baru lagi nih :-bd Better Post Preview. Tombol untuk melihat pratinjau pada hasil postingan kita sob. Walau masih dalam format bloggerindraft, ya tunggu saja sob. Kembali membahas trik yang dikeluarkan oleh salah satu master blog yaitu Hans pemilik http://beautifulbeta.blogspot.com mengenai artikelnya yg berjudul "All Feeds by Feedburner" Sebenarnya hack ini diambil dari kita melakukan klik kanan pada mouse bagi mozilla browse dan pilih "View Page Source"

Sekilas memang tidak ada yg berubah dari hack ini sob :D Soalnya ini berinterkasi langsung dengan engine yg dimiliki antara blogspot sendiri dengan engine feedburner @-) Lah!!! bagaimana kita ~~tahu~~ apa fungsi dari hack ini :-/ Tenang, mana ada master sekonyong-konyong ngeluarin hack kalo tidak ada fungsinya ;) Kalau mau lihat tutorial dalam versi kita silahkan kunjungi blognya kang Jaloe Memindahkan Blog Feed Ke FeedBurner, dan ini versi kerennya All Feeds by Feedburner.

Lah ini loh fungsi dari hack ini. Coba sobat perhatikan baik-baik dari kode-kode yg tidak ada tatkala kita melakukan view source sesuai dengan yg tertera pada artikel 2 master kita itu??? Apa sobat menemukan kode berikut...
<link href='http://feeds.feedburner.com/yourFEEDname' rel='alternate' title='RSS' type='application/atom+xml'/>
Itu kode yg tidak akan sobat temukan dikala sobat belum mengganti kode bawaan dari blog...

<b:include data='blog' name='all-head-content'/>

Tau dong fungsi dr feedburner? Secara kasarnya ini fasilitas yg memberikan jasa untuk web/blog kita dapat dibaca pada versi lain. Nah tidak diragukan keberadaan feedburner sendiri sebagai penyedia format application/rss+xml sudah tersebar kemana-mana. Facebook, digg, technorati, dll selalu menggunakan link feed untuk mengimport salah satu web/blog sebagai syaratnya. Intinya...

Jika kita merubah kode bawaan dari blog dan merubahnya dengan hack ke-2 master kita tuh, maka secara otomatis segala yg berurusan dg feedburner telah 100% dilakukan oleh engine feedburner itu sendiri

Jika mau melihat aksi langsung dari hack ini! Bilamana ada dari sobat yg menggunakan salah satu web jejaring dan otomatis terkirim ke email dalam verifikasinya, maka akan tampak aksi dari hack ini.
Adios amigos permios...semoga bermanfaat walau sedikit bingung, yg penting ngeblog jalan terus. SALAM BLOGGER \m/

▼ ▲

Browser Mini Gitu Loh

4 Komentar

▼ ▲

Master Abu Farhan is Back

4 Komentar

▼ ▲

Yao @ Blog from China

6 Komentar

▼ ▲

Like it? Tweet it! for Blogger, WordPress, Tumblr

7 Komentar

▼ ▲

Panoramio Widgets For Blog

4 Komentar

▼ ▲

Asterpix SearchLight Program Application

8 Komentar

▼ ▲

Post Includable Part II

5 Komentar

Dua postingan sebelumnya Page Layout Default Blogger dan Post Includable Part I yang tidak lain membedah kode-kode yg ada didalam template default blogspot. Lanjutan nih sob :D

The Post Title

The post title atau judul dari postingan. Judul postingan ini biasanya ditampilkan dalam bentuk hyperlink yg apabila diklik akan memasuki ke link yg dituju :D Kalau tidak ada yaa tidak akan masuk kemana-mana alias menjentul :"> Kode pada the title post...

<b:if cond='data:post.title'>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a> 
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> 
<b:else/>
<data:post.title/> 
</b:if>
</b:if>
</h1>
</b:if>

Itu struktur kode untuk sebuah judul post ;)

Post Body

Badan post kali yak :P Pada bagian ini dikemas dengan sebuah elemen "P"

Post Footer Line 1

Struktur dari baris post footer ini sbb :

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>Authorname</span>
<span class='post-timestamp'>Timestamp</span>
<span class='post-comment-link'>Commentlink</span>
<span class='post-icons'>Email Icon and QuickEdit Pencil</span>
</p>

Authorname

Widget blog yg dikonfigurasikan untuk menampilkan nama dari si penulis. Label default pada kode ini biasanya bertuliskan "Posted by"

Jadi bagi sobat yg mau ganti tulisan Posted by ya cari kode itu, yihaaa :-"

Timestamp

Widget blog yg dikonfigurasi untuk menampilkan waktu. Disertai permalink yg menuju hanya pada halaman tertentu.

Kode diatas menampilkan teks/label pada permalink. Default teksnya biasanya "at" atau "di" :D

Commentlink

Segala yg berbau komentar ya diatur oleh perintah ini sob :)

Default teks/label dari komentar ini "comments" Pusing neranginnya ah ;)) Pokoknya yg bersangkut paut dg komentar ada pada kode itu.

Email Icon and QuickEdit Pencil

Post icon ini ada dua, email dan pensil :P Biasanya link pada post yg berupa gambar email kecil serta quick edit yg digambarkan oleh icon pensil.

Post Footer Line 2

Garis post ini tak lain yg menampilkan label pada postingan. Secara default biasanya bertuliskan "labels"

Post Footer Line 3

Pada baris ini kosong, dan biasanya untuk mempermudah kita mengedit pada icludable.

Styling classes

Macam gaya classes yg sering digunakan dalam includable.

Class
post
post-title
post-header-line-1
post-body
post-footer
post-footer-line
post-footer-line-1
post-author
post-timestamp
timestamp-link
post-comment-link
comment-link
post-icons
item-action
email-post-icon
post-footer-line-2
post-labels
post-footer-line-3
Prodigy of Head

Blogger Data Tags

Daftar tag data yg sering dipakai dalam includable ini.

Data Tag	Description
data:top.showAuthor	'true' if the Blog Widget is configured to show the author name
data:top.authorLabel	the phrase preceding the author name (default value: 'Posted by')
data:top.showTimestamp	'true' if the Blog Widget is configured to show the timestamp
data:top.timestampLabel	the phrase preceding the timestamp (default value: 'at')
data:top.commentLabel	the phrase showing the number of comments, single (default value:'comment')
data:top.commentLabelPlural	the phrase showing the numer of comments, plural (default value:'comments')
data:blog.pageType	the type of the current page
data:post.id	the unique id-number of the post
data:post.title	the post title
data:post.link	the url of the (external) webpage the post is pointing to
data:post.url	the post permanent lnk
data:post.body	the post body
data:post.timestamp	the post timestamp
data:post.allowComments	'true' if making comments is allowed for this post
data:post.addCommentUrl	the url of the comments form
data:post.addCommentOnclick	-
data:post.numComments	the number of comments on this post
data:post.emailPostUrl	the url of the email form
data:post.emailPostMsg	the tooltip message of the email icon link
data:post.labels	the list of labels assigned to the post
data:postLabelsLabel	the phrase preceding the list of labels (default value: 'Labels:')
data:label.url	the url of the page listing all posts with this label
data:label.name	the name of this label
data:label.isLast	'true' if this label is the last one of the list

Thanks a lot for http://beautifulbeta.wikidot.com Download disini untuk mendapatkan blogger cheat sheet Blogger Cheat Sheet (PDF, english).

▼ ▲

Post Includable Part I

5 Komentar

Lanjutan tulisan kemarin mengenai dalaman template Page Layout Default Blogger. Tulisan yg itu kan membahas 4 bagian utama yg ada pada daleman template bawaan blogspot. Sekarang kita bedah sesi Includable pada template. Adapun syntax includable pada template blogspot ini biasanya berbentuk...
<b:includable id="name" var="data"> ... ... </b:includable>

id = unik/nama id
var = optional dari id, mungkin variabel ya ;))

Untuk contohnya :

<b:includable id='backlinks' var='post'>
<b:includable id='post' var='post'>
<b:includable id='comment-form' var='post'>
...

Itulah syntax includable beserta variabelnya. Untuk lebih mudahnya mari tengok daftar tabel berikut ini.

Widget Type	Includable id	Includable var
Blog	backlinkDeleteIcon	backlink
...	backlinks	post
...	commentDeleteIcon	comment
...	comments	post
...	feedLinks	---
...	feedLinksBody	links
...	main	top
...	nextprev	---
...	post	post
...	postQuickEdit	post
...	status-message	---
BlogArchive	flat	data
...	interval	intervalData
...	main	---
...	menu	data
...	posts	posts
...	toggle	interval
Header	main	---
Label	main	---
Profile	main	---

Hehehe...:D Kita memasuki pada fase yg lebih dalam (bagian yg lumayan puyeung sob) :p Kalau sudah terbayang dengan apa yg dipaparkan diatas tadi, maka pada fase ini akan lebih terlukiskan deh ;) (lukisan???) [-( Langsung yuk kita bedah :p

Struktur includable pada main post.

Pada umumnya struktur pada bagian utama postingan ini memiliki bentuk...

<div class='post'>
<a name='post-id'/>
<h1 class='post-title'>Post Title</h1>
<div class='post-header-line-1'/>
<div class='post-body'>
<p>Post Body</p>
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>Author Timestamp Comments Email Edit</p>
<p class='post-footer-line post-footer-line-2'>Labels</p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>

Jangan bingung sob, mungkin kode-kode diatas tidak akan sama dg yg ada di template kalian. Secara umumnya begitu sih ;)) Tips :

Kalau ada kode dg menggunakan "ID" maka ini berlaku untuk ID itu saja, kalau untuk kode dg menggunakan "CLASS" ini bisa dipanggil berkali-kali

Kembali pada kode struktur diatas tadi :) Pada struktur diatas disatukan (dikemas) menggunakan html DIV-element. Pada bagian judul post terkemas dalam tag <h1> Kode yg berwarna hijau, baris kosong pada bagian header, dimana pd default blogger tidak ditemukan dan akan ada pada template modifikasi :D Masuk ke bagian footer sobat melihat ada 3 baris pos (post-footer-line) Biar cepet penjelasannya ;) ketiga baris pos yg dimaksudkan diatas itu secara garis besar nama author, label postingan, dan kosong satu guna mempermudah dalam pengeditan template disaat sobat berada pada Editor Template. Kalau sudah mahir kita dapat bermain-main dg ke-3 kode baris pos tsb! Masih ingat dong dg keistimewaan "CLASS"
UPDATE Click to expand here

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head>	The usual html header stuff.
<title><data:blog.pageTitle/></title>	Here's something interesting. New code for the blog title within the standard <title> tags. <data:blog.pageTitle/> inserts the name of the Blog from your template settings.
<b:include data='blog' name='all-head-content'/>	And here's a line that appears to enter any blog template head information. I don't know that there is any right now. Maybe it's a placeholder.
<b:skin><![CDATA[ /* * Blogger Template Style * * Sand Dollar * by Jason Sutter * Updated by Blogger Team */	The <b:skin> tag encloses the template. There's a </b:skin> at the bottom of the template part of the header. ~~I'm not sure what the <![CDATA[ is doing. Perhaps enclosing the skin data?~~ According to an anonymous commenter: On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the < entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing. You can <![CDATA[]]> anywhere outside a tag in an XML document. Note that the template has been "Updated by Blogger Team".
/* Variable definitions ==================== <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000"> <Variable name="bgcolor" description="Page Background Color" type="color" default="#f6f6f6" value="#d2dbff"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#F5DEB3" value="#cccccc"> <Variable name="pagetitlebgcolor" description="Blog Title Background Color" type="color" default="#DE7008" value="#006699"> <Variable name="descriptionColor" description="Blog Description Color" type="color" default="#9E5205" / value="#e6e6e6"> <Variable name="descbgcolor" description="Description Background Color" type="color" default="#F5E39e" value="#9eb0f5"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#9E5205" value="#006699"> <Variable name="datecolor" description="Date Header Color" type="color" default="#777777" value="#993300"> <Variable name="footercolor" description="Post Footer Color" type="color" default="#444444" value="#444444"> <Variable name="linkcolor" description="Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="footerlinkcolor" description="Post Footer Link Color" type="color" default="#968a0a" value="#3a9900"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#B8A80D" value="#993300"> <Variable name="sidebarlinkcolor" description="Sidebar Link Color" type="color" default="#999999" value="#009949"> <Variable name="bordercolor" description="Border Color" type="color" default="#e0ad12" value="#006699"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif" value="normal normal 99% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 150% Verdana,Sans-serif" value="italic bold 121% Verdana,Sans-serif"> <Variable name="dateHeaderFont" description="Date Header Font" type="font" default="normal bold 105% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 86% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 300% Verdana,Sans-Serif" value="normal bold 270% Verdana,Sans-Serif"> <Variable name="titlefont" description="Post Title Font" type="font" default="normal bold 160% Verdana,Sans-Serif" value="normal bold 117% Verdana,Sans-Serif"> */	Some of the layout styles are defined here as "variables". Note that they are commented out (/* */), which I assume means that they are only used by Blogger Layouts, not in the actual html coding. Essentially, this is a place to store all of those font and color choices you can make in the Layouts. Some of the template choices don't seem to have all of these options. I picked one with a lot of flexibility, and I get to set a lot of color and font options. Color of post text Page background color Title text color Title background color Heading description btextcolor Heading description background color Post title text color Post date header text color Post footer text color Post links text color Post footer links text color Post visited links text color Sidebar title text color Sidebar links text color The color of any borders The font of all of the text in the body The font of all of the text in the sidebar The font of the date headers The font of the blog title The font of post titles That's a lot of flexibility.
body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; } a { color:$linkcolor; } ... Lots o' deletions ... /** Tweaks for layout editor preview */ body#layout #outer-wrapper { margin-top: 0; } body#layout #main, body#layout #sidebar { margin-top: 10px; padding-top: 0; }	I deleted a lot of the styles here, as there's nothing all that special about them. However, it is interesting to see the "variables" defined above showing up here in the styles. For example, the body wrapper is defined with a background of "$bgcolor" and a text color of "$textcolor", both of which are defined above. Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for.
]]></b:skin> </head>	Here's the closer for the <![CDATA[, <b:skin>, and <head>.
<body> <div id='outer-wrapper'><div id='wrap2'>	Now we start the body, the stuff that actually shows up in a browser. The wrappers are standard stuff that appears in the old templates (and many other styled web pages).
<!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> \| <a href='#sidebar'>skip to sidebar</a> </span>	~~It's nice that the folks at Blogger are worried about text browsers, but how many text browsers are still out there and do I really care if they read my blog?~~ Text browsers are valuable and necessary tools for the internet and Blogger are Mensa-level geniuses to include this code snippet in their template. (Please stop the harassment now.)
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='FTTX News (Header)' type='Header'> <b:includable id='main'> <div class='titlewrapper'>	Here's the first expanded widget - the header widget, encased in a standard set of<div> tags. The <b:> tags are new, and appear to be a way to indicate information to Blogger (see more below). This one includes the ID entered in the layout (Header1) and the title (FTTX News) plus some Blogger-specific information about it being locked and of the type "Header". Items listed as "includable" are called later with "include". That's a very nice idea, and one that took me a while to figure out. Includable items that I found defined were: Main = The title and description, then later the main blog content, then later the sidebar content. And this one never gets called with a "include" statement. Some confusion here will hopefully be sorted out later. Comments = The detailed comments postQuickEdit = The icon and code for quick editing from the main page backlinkDeleteIcon = exactly what it says feedLinksBody backlink feedlinks nextprev commentDeleteIcon post flat menu interval toggle posts Interestingly, I can't find a way to move the "Header" layout widget to anywhere else on the layout page. For example, I wanted to put the header over the main content, but not over the sidebar. No dice. Moving it in the template results in a "invalid template" error.
<h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div>	Very interesting. An embedded "if-then" statement in the template. Another advantage of the <b:> tags. The "data:" construct appears to be the new way to reference what used to be Blogger tags. There are no definitions available yet from Blogger, but I'm guessing the definition of these data objects blog.url = the currnet URL for the blog page blog.homepageUrl = the URL of the homepage of the blog In this case, if the current URL equals the homepageURL (i.e., you're on the main page), then the title doesn't have an embedded link. If you're on another page (e.g. an archive page), then the title becomes a link back to the main page. Pretty slick.
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>	And here's where the Blog description get printed out, safely within its own wrapper. Here's another data field description: The blog description (duh!) The wrapper, of course, uses the variable and styles above as defined in the Layout editor by calling the "descriptionwrapper" class defined in the header.
<div id='content-wrapper'>	This is a big division, with all of the content including the main and sidebar. Other than that, nothing special.
<div id='main-wrapper'>	And the wrapper for the main content (not sidebar). Again, nothing special or new.
<b:section class='main' id='main' showaddelement='no'>	This however, is Blogger specific. It defines the main section that shows up in the Layout editor. It also says that it's not possible to add any elements to this section, something that you can experience for yourself in the Layout editor. The main section is for posts only. Personally, I don't use the main part for anything other than posts, so maybe this limitation isn't too bad.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>	Another widget expanded - the posts. If you note in the Layout editor, this widget has some components that you can add (they show up below). This line appears to indicate the start of the individual page content, but it's not entirely clear what all is going on here. It looks like this one line puts in all of your post content, including the footer, labels, etc.. That's a lot of work in such a small number of characters. It remains to be seen if that will be a problem.
<b:includable id='comments' var='post'> <div id='comments'> <a name='comments'/> <h4> <b:if cond='data:post.numComments == 1'> 1 Comment: <b:else/> <data:post.numComments/> Comments: </b:if> </h4>	The first includable sub-widget is the comments. This widget only prints when you go to a specific entry and are looking at the comments - it's not on the main page of the blog. That's the magic of the include/includable constuct. Again, a nice if-then statement so that if there is only one comment, the blog prints "1 Comment". If there are more than one comments, it prints "# Comments" where # is the number of comments. Another data object here: post.numComments = the number of comments on a specific post
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'>	Here are the comments themselves. And another nice construct in the <b> tag - a loop. This one appears to loop through the post comments.
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/>	~~I'm not personally familiar with~~ ~~<dl>, <dt>, and <dd>, but I'm guessing that those are standard html tags.~~ dl and dt are used for making lists of terms and their definitions (as pointed out by a rather superior slashdot commenter). Here's another interesting Blogger code construct, "expr:". "Expr:" appears to be a way to generate content for other use, something that used to be done with Blogger tags. In this case, "expr:name='"comment-" + data:comment.id" generates the name field in the <dt> tag (and later in an <a> tag) that is equal to the text "comment-[really obscure number representing this specific comment]".
<b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> said... </dt>	Again with the nice "if-then" constuct. This one makes the comment author into a link if they have a profile URL. Otherwise, it just prints their name. Note that the "nofollow" is automatically included so that blog spammers get no love from the Googlebot.
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>	Here's the text of the comment(s), and another "if-then". If the comment has been deleted, then encase the comment in a span of class "deleted-comment". In my stylesheet, that's italics and gray. I imagine this is for temporary deletions or confirmations of deletions. Surely the deleted comments don't just hang around.
<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span>	And here's the comment footer. The "expr:" operator is used to generate a permanent link to this comment and assign it to the timestamp. Another <b:> tag is used to tell Blogger to put up the delete icon if the reader is the author (or so I imagine).
</dd> </b:loop> </dl>	Here endeth the comments coding. Some data objects in this section are: post.comments = some way to know if a comment exists (used in the loop statement) comment.id = the long and obscure integer assigned to a comment by Blogger comment.authorUrl = the URL of the commenter's profile comment.author = the name (or nickname) of the commerter comment.isDeleted = is the comment deleted (duh!) comment.body = the text of the comment comment.timestamp = what do you think?
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>	This prints a little "Post a comment" link at the bottom of the individual post pages. Notice how flexible the "expr" operator is here. It generates a link within a <a> tag poining to a URL and defining a click action. Nice. More data objects: post.addCommentURL = the URL where someone can enter a comment on a specific post post.addCommentOnclick = the "onclick" action for entering a comment on a specific post
<div id='backlinks-container'> <b:include data='post' name='backlinks'/> </div>	Here's where the backlinks counter gets generated. Pretty simple - nothing like the comments.
</div> </b:includable>	And that's the end of the includable sub-widget for comments.
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' title='Edit Post'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable>	This little includable sub-widget adds the "Quick Edit" icon to a post if the reader is the author. If there is a post editing URL, then generate a span containing the quick edit icon. New data objects here are: post.adminClass = not really sure what this tells Blogger, but it's used in a span definition post.editUrl = the URL to edit a specific post
<b:includable id='main' var='top'>	Another incluable "main". The includable "main" is going to need some more defining by folks smarter than I am.
<!-- posts --> <div id='blog-posts'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if> </b:loop> </div>	This is the post section, where the actual posts on the main page are printed out. Or so I believe. There's a loop that goes through the posts, and if-then that prints out the date header it exists, and an if-then that prints out the comments section if comments are allowed. New data objects are: post.dateHeader = the date header, apparently only attached to the last post on a specific day blog.pageType = not really sure, but it's probably a way to determine if you're on the main page or an item page post.allowComments = pretty obvious, isn't it? The line" <b:include data='post' name='post'/>" apparently instructs Blogger to print out the post text. So I suppose there is some flexibility here for hacking. I'm guessing that the "<b:if cond='data:blog.pageType == "item"'>" if-then statement is used to include the comment constucts from above if this in an individual item page.
<!-- navigation --> <b:include name='nextprev'/>	This calls the incluable code for next and previous links. Oddly, that incluable hasn't been defined above. So I suppose the order of the includable/include can be flexible.
<!-- feed links --> <b:include name='feedLinks'/> </b:includable>	This one call the incluable code for feed links. The includable close is for the "main" includable - or at least this particular "main" includable.
<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' title='Delete Backlink'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	Here the incluable for the back link delete icon is defined. And yet another data object backlink.deleteUrl The data object appears to be nicely object-oriented with the "backlink" object having sub-objects like "deleteURL".
<b:includable id='feedLinksBody' var='links'> <div class='feed-links'> Subscribe to: <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable>	Here is the code snippet for the feed links body includable. This one loops through all of the called links types (var='links') and prints out a hyperlinked pointer to the link URLs. The hyperlink (<a href ...>) includes a URL and type, both of which are constucted on the fly with expr: operators. The target is set to '_blank' so that the links open in a new window. Always a nice touch.
<b:includable id='backlinks' var='post'> <b:if cond='data:post.numBacklinks != 0'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <dl id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a> </p> </b:if> </b:includable>	This is the includable for the backlinks. The first if-then statement checks if there are any backlinks (post.numbacklinks != 0). The != must mean "not equal to", because this section only makes sense if there actually are backlinks. This section prints a label ('links'), followed by a label (defined in the layout options), followed by the backlinks themselves formatted as a definition list. Some data objects in this section are: post.numBacklinks = the number of backlinks on a post post.BacklinksLabel = the label for backlinks defined in the options menus in Blogger post.backlinks = the backlinks themselves backlink.url = the url for the backlink backlink.title = the title of the backlink backlink.snippet = the small snippet of text that shows below a backlink backlink.author = the person who wrote the backlink article backlink.timestamp = what it says post.createLinkUrl = the url used to create a link to this post post.createLinkLabel = the label for the create-a-link link
<b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div id='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div id='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable>	This is the includable for feed links. The main if-then-else statement checks to see if the current page is an item page or not. Again, "!=" must be "not equal to". If the current page is not an item page, then print the Blog feed links. If the current page is an item page, then print the post feed links. For non-item pages, another if-then checks that there actually are some feed links. If they exist, then the feeds are printed out inside a set of <div> tags by calling the feedLinksBody includable, which I assume is somewhere below. The passed data to the includable is feedLinks, as opposed to post.feedLinks, which is used below on the post-specific links. For the item pages, an if-then checks to see if comments are allowed. Apparently, feeds aren't displayed if comments aren't enabled. I'm not sure why that particular restriction exists. If comments are enabled, then a second if-then checks that feed links exist. If so, then the post-specific links are printed out inside a set of <div> tags by calling the feedLinksBody includable with post.feedLinks as passed data.
<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a> </b:if> </div> <div class='clear'/> </b:includable>	I'm running low on steam for today, so the rest of these are a bit terse. I'll try to fill them in later. The includable for next and previous post links.
<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' title='Delete Comment'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	The includable for the comment delete icon.
<b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'><span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a> </b:if> </b:if> </span> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </p> <p class='post-footer-line post-footer-line-2'/> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable>	The includable for the post itself. This one is the master and calls many of the little ones above.
</b:widget> </b:section> </div>	And we have finally reached the end of the main post widget. Phew!
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Feed1' locked='false' title='Latest Comments' type='Feed'> <b:includable id='main'> <input id='displayMode' type='hidden' value='true'/> <input expr:value='data:feedUrl' id='feedUrl' type='hidden'/> <input expr:value='data:numItemsShow' id='numItemsShow' type='hidden'/> <input expr:value='data:showItemDate' id='showItemDate' type='hidden'/> <input expr:value='data:showItemAuthor' id='showItemAuthor' type='hidden'/> <input expr:value='data:locale' id='locale' type='hidden'/> <input expr:value='data:timeZone' id='timeZone' type='hidden'/> <input expr:value='data:feedReaderJsonBaseUrl' id='feedReaderJsonBaseUrl' type='hidden'/> <input expr:value='data:feedWidgetRefreshIntervalSec' id='feedWidgetRefreshIntervalSec' type='hidden'/> <h2><data:title/></h2> <div class='widget-content'> <ul id='feedItemListDisplay'> <b:loop values='data:feedData.items' var='i'> <li> <span class='item-title'> <a expr:href='data:i.alternate.href'> <data:i.title/> </a> </span> <b:if cond='data:showItemDate'> <b:if cond='data:i.str_published != ""'> <span class='item-date'> - <data:i.str_published/> </span> </b:if> </b:if> <b:if cond='data:showItemAuthor'> <b:if cond='data:i.author != ""'> <span class='item-author'> - <data:i.author/> </span> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='Text1' locked='false' title='Administrative Notes' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='TextList1' locked='false' title='Sources' type='TextList'> <b:includable id='main'> <h2><data:title/></h2> <div class='widget-content'> <ul> <div id='link'> <b:loop values='data:items' var='item'> <li><data:item/></li> </b:loop> </div> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select id='ArchiveMenu'> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> (<span class='post-count'><data:i.post-count/></span>) <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>? </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'>? </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div>	All of this code is for the sidebar, and I don't have tome to look through it today. I'll try to get to it later.
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div></div> <!-- end outer-wrapper --> </body> </html>	And, thus endeth the template. Pretty heady stuff that will take some studying.

and Click to expand here

Cases	Want \ Do	Replace MY FIRST LINE CODE with
1	Bagaimana menampilkan gadget hanya pada home page blogger. (Cara menyembunyikan gadget dari halaman statis dan halaman posting di blogger)	<b:if cond='data:blog.pageType == "index"'>
2	Bagaimana menampilkan gadget hanya pada halaman posting blogger (Cara menyembunyikan gadget dari home page dan static page di blogger).	<b:if cond='data:blog.pageType == "item"'>
3	Bagaimana menampilkan gadget hanya pada halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman rumah dan halaman posting di blogger)	<b:if cond='data:blog.pageType == "static_page"'>
4	Bagaimana menampilkan gadget pada halaman posting dan halaman statis blogger (Cara menyembunyikan gadget dari halaman rumah di blogger)	<b:if cond='data:blog.pageType != "index"'>
5	Bagaimana menampilkan gadget di halaman rumah dan halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman posting di blogger)	<b:if cond='data:blog.pageType != "item"'>
6	Bagaimana menampilkan gadget pada halaman rumah dan halaman posting blogger. (Cara menyembunyikan gadget dari halaman statis di blogger)	<b:if cond='data:blog.pageType != "static_page"'>
7	How to display gadgets only on archive pages of blogger.	<b:if cond='data:blog.pageType == "archive"'>
8	Bagaimana menampilkan gadget hanya pada halaman arsip blogger.	<b:if cond='data:blog.url == "Your_URL_Here"'>
9	Bagaimana menampilkan gadget hanya pada halaman tertentu blogger.	<b:if cond='data:blog.url != "Your_URL_Here"'>

See you...:-h