ALhamdulillah pada kali ini laskar maya masih bisa berbagi artikel dengan kalian semua, untuk kali ini yaitu Cara membuat artikel berdasarkan Kategori dengan Thumbnail Untuk meyakinkan kalian semua tentang gambaran widget ini, silakan lihat gambar disamping :

Nah, bagi Sahabat blogger yang ingin memasang widget ini pada blognya, tinggal ngikutin langkah - langkah dibawah ini aja kok, mudah sebenernya jika para sahabat blogger mau berusaha !!
Berikut Langkah-langkahnya :

1. Seperti biasa, login ke akun blogger sobat
2. Pergi ke tab rancangan >> edit html
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)
5. Copy paste kode di bawah ini sebelum kode No.4


img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}<br /> img.label_thumb:hover{background:#f7f6f6}<br /> .label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}<br /> ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}<br /> .label_with_thumbs a{}<br /> .label_with_thumbs strong{}


6. Scroll ke bawah dan temukan kode </headgt;
7. Copy paste kode di bawah ini sebelum kode No.5


<script type='text/javascript'><br /> //<![CDATA[<br /> function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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;}<br /> if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)<br /> {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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnWXRGVaQSZxxvMsqymli7Iti0rVwEAvTUYdzyK9RUS_neuejYHkwPWzUpKPmvIMpNry3d2Oqz78tFOek9YkDVYFnBzemp0WOKH07l1dr2L_zEJg-XJIkGG9gED3Yt4b-zFoZcMFQlyO6/';}<br /> var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)<br /> document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}<br /> else<br /> if("summary"in entry){var postcontent=entry.summary.$t;}<br /> else var postcontent="";var re=/<S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}<br /> else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}<br /> var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br /> if(showcommentnum==true)<br /> {if(flag==1){towrite=towrite+' | ';}<br /> if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}<br /> if(displaymore==true)<br /> {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}<br /> document.write(towrite);document.write('</li>');if(displayseparator==true)<br /> if(i!=(numposts-1))<br /> document.write('');}document.write('</ul>');}<br /> //]]><br /> </script>


8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents


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


11. Untuk kategori/label yang berspasi seperti Tips Blogger, Article, ganti lah spasi dengan kode %20. Contoh penulisan lengkap:
http://pecintamaya.blogspot.com/2012/01/apa20%itu20%meta20%tag.html
12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.
13. Klik Save / Simpan.
14. Selesai! Semoga bermanfaat…
SELAMAT MENCOBA