Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang, pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget.

(Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang)

Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut.

Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger)

Cara Memasang Widget Popular Post Berdasarkan Label di Blogger

Cara Memasang Script di Tema Blog

Langkah pertama masuk ke akun Blogger agan.
Pilih menu Tema, klik Edit HTML.
Silahkan cari kode </style> atau ]]></b:skin>, kemudian masukan kode CSS di bawah ini tepat diatasnya.(Untuk mencari, silahkan tekan Ctrl + F pada keyboard)

img.label_thumb{float:left;margin-right:10px;height:60px;width:60px;}
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}
.tutorialumum1 .viewmore,.tutorialumum2 .viewmore{font-size: 11px;    border-radius: 13px;float: right;font-weight:400;    margin-top: -40px;}
.tutorialumum1 .viewmore a,.tutorialumum2 .viewmore a{    border-radius: 13px;display:flex;color:#1194f2;padding:1px 8px;font-weight:400;border:1px solid #1194f2;transition:none;}
.tutorialumum1 .viewmore a:hover,.tutorialumum2 .viewmore a:hover{background:#1194f2;color:#fff;border-color:transparent:    }
.tutorialumum1 .viewmore a:before,.tutorialumum2 .viewmore a:before{
    content: "\f067";
    font-family: FontAwesome;
    font-style: normal;
    margin-right: 5px;
    text-decoration: inherit;
    transition: all .3s;
}
.tutorialumum1 .viewmore a:hover:before,.tutorialumum2 .viewmore a:hover:before{
transform: rotate(360deg);
}

Setelah itu cari kode </head>, kemudian masukan kode di bawah ini tepat di atasnya.

<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/AVvXsEhHYcFnzlajG8Wr_jVIfl1cgVnSinyTrV0nGI_ZUtObB8BBvqnAVaISx05SjVTZNWj29ugGJkf_2fqbfn6PeKjkrKgGuAa6MHjtx0LK0Wpx4MxcmBKh6JvvfxgNd2iWIlxQUV3crao04iPw/';}
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>

Setelah selesai, klik Simpan tema untuk menyimpan.

Cara Memasang Script di Widget Blog

Silahkan pilih menu Tata letak, pilih lokasi penempatan widget yang agan inginkan, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Masukan Judul widget, kemudian masukan script di bawah ini pada kolom Konten.

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


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


<script src="http://www.tutorialumum.com/feeds/posts/summary/-/LabelAgan?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<div class="tutorialumum2"><span class="viewmore"><a href="http://www.tutorialumum.com/search/label/LabelAgan">Lihat lebih banyak</a></span></div>

Pengaturan Widget :

var numposts = 6; di gunakan untuk mengatur jumlah artikel yang akan di tampilkan, silahkan ganti dengan jumlah artikel yang agan ingin tampilkan.
var showpostthumbnails = true; di gunakan untuk mengaktifkan dan menonaktifkan gambar thumbails widget.
var displaymore = false; di gunakan untuk mengaktifkan dan menonaktifkan link readmore.
var showcommentnum = false; di gunakan untuk mengaktifkan dan menonaktifkan jumlah komentar pada artikel tersebut.
var showpostdate = false; di gunakan untuk mengaktifkan dan menonaktifkan waktu pembuatan artikel.
var numchars = 0; di gunakan untuk menampilkan jumlah karakter pada artikel.
true di gunakan untuk mengaktifkan fitur, false digunakan untuk menonaktifkan fitur yang ada.
Ganti http://www.tutorialumum.com dengan Link URL blog agan.
Ganti LabelAgan dengan dengan label blog yang agan akan tambahkan.

Setelah selesai mengatur fitur-fitur yang ada, klik Simpan.
Jika berhasil maka tampilannya akan seperti ini.

(Baca juga : Cara Membuat Widget Breaking News 2 Style di Blogger)

Demikian tutorial dari saya mengenai cara membuat widget popular post berdasarkan label di blogger. Jika ada pertanyaan mengenai cara memasang atau mengenai widget di atas, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk agan atau sista semua. Untuk widget blogger yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Cari Blog Ini