Cara Membuat Popular Post Berdasarkan Label With Thumbnail

Daftar Isi

Widget popular post berdasarkan label atau kategori with thumbnail biasanya banyak digunakan oleh blog konten berita. Salah satu fungsi widget ini untuk memudahkan para pengunjung mengeksplorasi tiap kategori yang ada di blog. Untuk membuat popular post berdasarkan label atau kategori with thumbnail, mari kita simak tutorial berikut ini:

1. Langkah pertama yang harus dilakukan adalah login ke blogger.
2. Masuk dashboard kemudian pilih Template lalu edit HTML.
3. Untuk berjaga-jaga terjadi kesalahan dalam pengeditan nantinya, backup dulu template sobat.
4. 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, 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/AVvXsEg_o3Q0iMmaMMeathwC0d18uFXnUp0bqbBxsPCVTB20u92P3bKW6NUuwA_YnY44fyteKCLaxvv7dOobMrAQieYNm54l2aLPaVpGa3TL8xWzd3Yo7jRvXqeGcWD62oSsgNcnRdVfKXYekb52/';}
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>

Kemudian klik 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.

<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, silahkan anda ganti dengan label yang diinginkan. Warna merah : Ganti URL dengan URL blog sobat.

Demikian tutorial cara membuat popular post berdasarkan label atau kategori with thumbnail, semoga bermanfaat. Thx