Membuat Label Dengan Thumbnail Otomatis Berdasarkan Kategori Yang Dipilih

Belajar dari internet itu gampang2 susah, perlu ketekunan dan ketelitian serta mesti tahu kata kunci yang dicari, seperti; cara memasang recent comment, pasang blocquote dan sebagainya. Jika tidak tahu kata kuncinya, maka kita akan kesulitan menemukan apa yang kita cari itu baik di google maupun pada mesin pencari lainnya. Pandai-pandailah mencari kata kunci yang pas atau setidaknya mendekati dan jangan bosan untuk terus mencobanya. Sesekali bertanyalah melalui kotak komentar blog lain yang telah memasang apa yang anda cari, walaupun memang kita mesti bersabar menunggu jawaban karena tidak semua blog dapat langsung merespon atas pertanyaan yang diajukan karena berbagai sebab.

Berawal dari keinginan memasang gambar kecil yang disertai judul posting dan penggalan artikel di bawah posting, akhirnya saya temukan cara ini di kucoba.com yaitu tentang cara membuat label dengan thumbnail yang dilengkapi penggalan artikelnya (bila mau).

Jika anda berminat untuk membuatnya, berikut ini adalah langkah-langkahnya:

• Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"

• Silakan copy kode ini dan taruh di atas </head>

<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAkGkifGdtXDWPz1OfSEIqIOBN4ZNjpPt0RKX7WuADO2MzgkVyqZflJRuf_WvecFZf_kECPDxlI9zpHzMHIxz0TtiSxHsEcJ11-VE8Ltfi0-lb8sNynqADTUWXiN0Q1wHyp4gLgrRgSA/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>

• Setelah selesai, silakan cari kode sidebar content dan setelah ketemu simpan kode berikut tepat di bawahnya:

/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdTyMhrW6EYlust-Z_B7-KegU6dXoBEbMZojaSp6vnMxCHUThnjEuvuLIpR3fy00zcxacSrL89E7cURZS3bj7QLrSqB0VAK4_9Yu__QpIbww397oShitxLzdFWGHessUoZPDiLRaKGroh/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdTyMhrW6EYlust-Z_B7-KegU6dXoBEbMZojaSp6vnMxCHUThnjEuvuLIpR3fy00zcxacSrL89E7cURZS3bj7QLrSqB0VAK4_9Yu__QpIbww397oShitxLzdFWGHessUoZPDiLRaKGroh/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}

• Simpan template
• Selanjutnya silakan buka Rancangan > Add Widget > Pilih HTML/Javascript 
• Copy paste kode di bawah ini dan simpan di HTML/Javascript tadi:

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script> <script type="text/javascript" src="/feeds/posts/default/-/BLACKBERRY?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan :

• Angka 4 yang di tebalkan di atas adalah jumlah dari sub label katagori yang di munculkan di label thumbnail ini.

• Tulisan BLACBERRY yang di tebalkan adalah nama label yang di ingin di munculkan di label thumb. Jika label tersebut memiliki lebih dari satu kata, tambahkan %20 contohnya Tutorial%20Blogger.

Label dengan thumbnail ini masih bisa anda modifikasi, karena itu sekarang saya ucapkan "Selamat berkreasi" dan semoga berhasil!