Rabu, 4 Jun 2014

Membuat Widget Most Commented Untuk Blogger

Most Commented
Widget Most Commented adalah widget yang menampilkan daftar artikel yang paling banyak di komentari dari yang terbanyak hingga terkecil. Widget ini sama seperti sebelumnya yaitu memanfaatkan JSON Blogger, widget yang pernah Saya bagikan antara lain Widget Recent Posts dan Widget Random Posts.

Sama seperti sebelumnya yang ditampilkan pada widget ini hanya menampilkan judul dari artikel saja, tapi disertai dengan jumlah komentar pada artikel tersebut.

Cara Memasang Widget Most Commented Untuk Blogger

Silakan salin dan simpan kode dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript
<style type="text/css" scoped>
#most-commented ul,#most-commented li{margin:0;padding:0;list-style:none;color:black;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px}
#most-commented ul li{position:relative;overflow:hidden;background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #f5edf5 100%);border:1px solid #DFDFDF;margin:0 0 10px 0!important;padding:5px 5px 5px 45px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#most-commented ul li a{color:#666;text-shadow:0px 1px 0px #fff;font-weight:bold;text-decoration:none;}
#most-commented ul li:hover{background: #F9F9F9;}
.bubble-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:5px 0;background-color:#333;color:#fff!important;text-align:center;}
</style>
<div id="most-commented"></div>
<script type"text/javascript">
//<![CDATA[
// Most Commented Widget For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
var numPosts=10;//Jumlah artikel yang ingin ditampilkan
var homePage="kang-mousir.blogspot.com";//URL blog
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-commented"><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="bubble-most">'+postCommentar[f]+'</span><a 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>

Pengaturan

IconTeks
var homePageIsi dengan URL blog Anda
var numPostsIsi dengan jumlah artikel yang ingin ditampilkan
Dengan adanya widget ini akan memberitahukan kepada pengunjung artikel mana yang paling banyak dibahas dan paling banyak dikomentari ;)

Tiada ulasan:

Catat Ulasan