Cara Menciptakan Widget Popular Post Menurut Label Di Blogger

Sebelumnya saya telah membagikan artikel perihal cara menciptakan widget popular post dengan rating bintang, pada tutorial kali ini saya akan memperlihatkan cara perihal menciptakan popular post juga, tetapi yang berbeda yaitu widget popular post ini di sortir menurut label atau biasa kita sebut sebagai kategori dari artikel. Makara yang kita lihat yaitu label yang sama dalam 1 widget.


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 supaya pengunjung dapat melihat semua artikel yang ada di label atau kategori tersebut.

Langsung saja untuk cara memasang widget popular post menurut 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

1. Langkah pertama masuk ke akun Blogger agan.
2. Pilih hidangan Tema, klik Edit HTML.
3. Silahkan cari aba-aba </style> atau ]]></b:skin>, lalu masukan aba-aba 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); }

4. Setelah itu cari aba-aba </head>, lalu masukan aba-aba 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/AVvXsEhZlKTcSrKfX_CqSKqIYan_uG6w6sBCWSeDLOC-GwulpHI3j4dK3n4OPzvzpmxd4kFuHR0wCR3_seg3lRDwPaYRCkKC_oFQyBpOWOqLExazF9UByWns6AYsEjRHrE-GAFSBriYW9G54s52V/';} 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+'" sasaran ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" sasaran ="_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+'" sasaran ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_top">More »</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script>

5. Setelah selesai, klik Simpan tema untuk menyimpan.

Cara Memasang Script di Widget Blog

1. Silahkan pilih hidangan Tata letak, pilih lokasi penempatan widget yang agan inginkan, klik Tambahkan Gadget, lalu pilih HTML/JavaScript.
2. Masukan Judul widget, lalu 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://murid-kreatif.blogspot.com/feeds/posts/summary/-/LabelAgan?max-results=6&alt=json-in-script&callback=recentpostslist"></script> <div class="tutorialumum2"><span class="viewmore"><a href="http://murid-kreatif.blogspot.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 aksara pada artikel.
• true di gunakan untuk mengaktifkan fitur, false dipakai untuk menonaktifkan fitur yang ada.
• Ganti http://murid-kreatif.blogspot.com dengan Link URL blog agan.
• Ganti LabelAgan dengan dengan label blog yang agan akan tambahkan.
3. Setelah tamat mengatur fitur-fitur yang ada, klik Simpan.
4. Jika berhasil maka tampilannya akan menyerupai ini.
   

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

sumber:tutorialumum.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: