Widget Most Commented for Blogger

Widget Most Commented for Blogger - Merupakan sebuah widget yang berfungsi untuk menampilkan postingan atau artikel yang paling banyak memiliki komentar. Widget Most Commented for Blogger sama dengan Popular Post, Random Post, Recent Post, dan Related Post. Widget ini dapat digunakan sebagai Navigasi atau sekedar untuk mempercantik tampilan sebuah blog. Widget yang akan saya coba bagikan adalah widget warna warni, yang dapat mempercantik tampilan sebuah blog. Widget ini juga dapat berguna untuk meningkatkan Pageviews blog anda, lumayan bukan?? Postingan ini sebenarnya melanjutkan tentang postingan widget yang berjudul Simple Subscription Widget for Blogger

Bagaimana Cara Membuat Widget Most Commented for Blogger?

Saya akan coba memberikan Tutorialnya, Kode berikut saya ambil dari Help Blogger

1. Login ke Blogger

2. Masuk ke Edit HTML

3. Tekan CTRL + F dan cari kode </Group>

4. Jika tidak ada, silahkan cari kode ini <b:skin><![CDATA[
    Letakkan kode berikut dibawahnya

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group> 

5. Lalu cari  ]]></b:skin> Copy Paste kode berikut tepat diatas kode tersebut

 .comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

6. Simpan Template Anda.

7. Selanjutnya silahkan anda ke Tata Letak (Layout), Pilih Tambahkan Gadget (Add a Gadget), Javasript/HTML.

8. Silahkan Copy Paste kode dibawah ini ke dalam kotak Javasript/HTML

<script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://ksplestari.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://ksplestari.blogspot.com/2014/12/widget-most-commented-for-blogger.html">Most Commented Posts</a></span> 

 9. Silahkan anda ganti Nama blog yang saya warnai biru dengan url blog anda.

10. Jika anda ingin tampilannya lebih sederhana, tanpa Thumnails dan Post Snippets. Gunakan kode dibawah ini :

 <script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://ksplestari.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://ksplestari.blogspot.com/2014/12/widget-most-commented-for-blogger.html">Most Commented Posts</a></span>

Hasilnya akan seperti di bawah ini :

11. Untuk menambahkan "Komentar" setelah jumlah komentar, silahkan ganti kode

 <div class="comment-count">' + postComments + "</div>"

Dengan kode

<div class="comment-count">' + postComments + " comments" + "</div>"

12. Simpan Template anda. Selesai.

Bagaimana, Cukup mudah bukan?? Demikian sahabat, postingan tentang Widget Most Commented for Blogger ini, kiranya dapat bermanfaat. Kiranya dengan widget ini dapat meningkatkan Pageviews blog anda. Terima kasih..