Membuat Label Dengan Thumbnail

Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? Ya, menurut saya akan lebih memperindah tampilan blog. Mudahkahkah memuatnya? Ya, sangat mudah.
Gak percaya...!!! ikuti aja cara-caranya.

• Masuk ke akun Blogger Anda.


• Klik tombol Entri Baru.


• Berikan Judul sesuai keinginan anda.


• Copy-paste kode kode HTML yang ingin anda muat pada postingan kedalam box dibawah ini.


• Tambahkan kode css berikut diatas / sebelum kode ]]></b:skin>

img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }
img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }

*Catatan : width dan height diubah sesuai dengan kebutuhan blog anda.

• Kemudian tambahkan kode script berikut dibawah / setelah kode ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

• Simpan Template.


• Masuk ke Elemen Laman > Tata Letak


• Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.


• Kemudian masukkan kode berikut kedalamnya :

<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Magazine?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Semoga bermanfaat...!!!!!