Cara Menampilkan Most Commented Blog Posts

1. Klik "Template" > "Edit HTML"

2. Cari (CTRL+F) kode </Group> dan Copas kode berikut ini di bawahnya. Jika di template Anda tidak kode tersebut, maka cari kode <b:skin><![CDATA[ dan Copas kode berikut ini di bawahnya.

<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>

3. Cari kode ]]></b:skin> dan Copas kode berikut ini di atasnya:

 .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%;

}

4. Klik SAVE Template !!!

Sampai sini Anda sudah memasukkan kode CSS  Posting yang Paling Banyak Dikomentari di template blog Anda. Selanjutnya kembali ke Dashboard Blog lagi.

5. Klik menu "Layout" (Tata Letak) > "Add a Gadget" > pilih "Javasript/HTML"

6. Copy  + Paste kode berikut ini di kotak yang tersedia:

<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://contohblognih.blogspot.com

&NumberofPosts=5

&_id=2cb5eb603ed55a6264ee1484e5fdd45c

&_callback=mostcommented

&_render=json"

type="text/javascript"></script>

<span style="font-size: 80%; float:left;"><a href="http://contohblognih.blogspot.com">Most Commented Posts</a></span>

7. Ganti http://contohblognih.blogspot.com dengan alamat blog Anda.

8. Save!

NOTE!

Untuk MENGGANTI WARNA latar belakang:

1. Klik "Template" > "Customize"

2. Klik "Advanced" > "Most Commented"

3. Silakan pilih warna kesukaan Anda.

4. Save dengan klik menu "Apply to Blog"

Good Luck!