26 April 2017

Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Kebanyakan blogger mengukur kesuksesan suatu artikel lewat komentar dari para pengunjungnya. Jika pengunjung menyukai artikel yang kita miliki, atau pengunjung ingin bertanya dan berinteraksi langsung dengan pemilik blog atau admin maka mereka akan menginputkan komentar mereka di kolom komentar.

Untuk itu di artikel saya kali ini, saya akan memberikan cara membuat widget komentar postingan terbanyak yaitu sebuah widget untuk menampilkan beberapa artikel dengan komentar terbanyak.
Widget komentar terbanyak ini akan menampilkan beberapa angka komentar tertinggi di blog kalian, dengan model yang responsive. Sehingga akan membuat para pengunjung blog kita tidak bosan dengan tampilan blog kita.

Berikut langkah-langkah cara membuat widget komentar postingan terbanyak responsive di blogger :

Cara Membuat Widget Komentar Postingan Terbanyak

1. Masuk ke akun blogger kalian
2. Pilih Tata Letak, kemudian pilih Tambahkan Gadget di tempat yang kalian inginkan.
3. Pilih gadget HTML/Javascript, masukan judul widget kalian di kolom Judul. Lalu masukan script berikut di kolom Konten.
<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="www.tutorialumum.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a rel="nofollow" rel="noreferrer"href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>
 
4. Pengaturan :
var numPosts=10; ( Untuk mengatur Jumlah Postingan yang akan di tampilkan )
var homePage="www.tutorialumum.com"; ( Ganti www.tutorialumum.com dengan url blog kalian )
5. Setelah selesai mengatur widgetnya pilih Simpan.

Demikian tutorial singkat dari saya tentang cara membuat widget komentar postingan terbanyak responsive di blogger. Untuk tutorial yang lainnya dari saya, tetap kunjungi tutorialumum.com.

Terima kasih sudah berkunjung di blog saya, bila ada pertanyaan serta kritik dan saran silahkan masukan di kolom komentar. Karena pertanyaan serta kritik dari kalian, akan membantu saya dalam membangun sebuah blog

2 comments

ane kira cuman bikin pake css doang, taunya ada javascriptnya -_-

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon