Cara Membuat Popular Post Berdasarkan Label With Thumbnail - Motoha Media

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/AVvXsEgXnctG7CCnyRvvOlx40r2dXEl-V-jkewkKvSTPEiA9Ye0IlQe-XeOIvn8vD6Evvk-gWGM0hANBqQ7QqacBCmRQ29BR-TqRicsl1NdEQ4oLfgJNyJBBdvx0QJPV27tw-jC8pylFktK60h3X/';}
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