Cara membuat popular post berdasarkan label atau kategori with thumbnail Terbaru

Hallo sobat - sobat googeling, saya mau share Cara membuat popular post berdasarkan label atau kategori with thumbnail. Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pengunjung untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Untuk lebig jelasnya silahkan sobat lihat gambar dibawah :

Contoh tampilan Label dengan Thumbnail

Bila sobat - sobat googeling tertarik untuk mencobanya mari kita simak tutorial berikut ini.

Cara memasang widget label with thumbnail :

• Pertama yang harus dilakukan adalah login ke blogger dengan akun sobat pastinya
• Masuk dashboard kemudian pilih Tamplate lalu edit HTML
• Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template sobat.
• Kemudian copy kode CSS dibawah ini dan letakan tepat di atas kode ]]></b:skin>

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:100px;width:100px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Note :Perhatikan tulisan warna Biru diatas, itu adalah lebar dan tinggi thumbnail image.

• Selanjutnya masih pada bagian Edit HTML, masukkan kode script dibawah ini dan letakkan diatas kode </head> untuk memudahkan pencarian tekan Ctrl+f.

<script type='text/javascript'>
//<![CDATA[
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;}
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabBLmftmTkWRoy9Ca8ebpCEUiOYqYDpEpp3zkCD6J702eNuosv2dxUuo6EqbQ94Rva6HwGKlntwsFCDe80MkB1hXmYCzzWfFzPCjFe-cvdK0cwlOidXUs30B0YUisWvS8eFuwshKq6GSb/';}
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)
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;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
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('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
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;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Jika kode script diatas terlalu panjang, sobat bisa simpan di tempat penyimpanan Google Code sobat sendiri atau bila tidak mau ribet sobat bisa gunakan kode script di bawah ini yang sudah di ringkas di Google Code.

<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>

• Setelah sobat yakin sudah benar melakukannya kemudian simpan templates. Selanjutnya menuju ke layout atau Tata letak kemudian klik Tambahkan gadget lalu cari HTML/javascript dan letakkan kode dibawah ini kedalam gadget dan klik simpan.

Tampilan memasang widget

<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/LABELSOBAT?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script src="http://NAMABLOG.blogspot.com/feeds/posts/summary/-/LABELSOBAT?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://NAMABLOG.blogspot.com/search/label/LABELSOBAT" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Note : Warna biru : adalah label atau kategori yang ditampikan, Sobat bisa menggantinya dengan label sobat yang diinginkan.
Warna merah : Ganti URL dengan URL blog sobat.

Demikian postingan saya Cara membuat popular post berdasarkan label atau kategori with thumbnail, Semoga bermanfaat. Bila ada yang kurang jelas silahkan berkomentar dikotak komentar.