Most Comment adalah salah satu widget yang paling dibutuhkan untuk blog. pengunjung akan dengan mudah mengetahui topik yang sedang hangat dibicarakan saat itu. manfaat lebih jauh lagi yaitu meningkatnya traffic blog.
Ada banyak widget untuk most comment di internet, namun disini saya ingin mengajarkan satu model bentuk widget yang berbeda. Widget ini mampu menghitung total komentar pada sebuah artikel. artikel akan ditampilkan pada widget beserta total perhitungan komentar yang ada. tampilan dari widget ini adalah seperti gambar dibawah ini.
Cara Membuat Widget:
1. Login ke blog > Edit HTML, kemudian cari kode </group> .
2. masukkan kode berikut. tepat 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>
3. Jika tidak menemukan kode diatas, carilah dengan kode ini: <
b:skin><![CDATA[. kode </group> biasanya berada di atasnya.
4. lanjutkan dengan mencari kode :
]]></b:skin> , setelah ketemu masukkan kode berikut ini tepat diatasnya:
.
.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%;
}
5. Simpan template.
Cara memasang Wiidget Diblog seperti berikut ini:
1. Masuk menu Tata Letak > add gadget > JAVA SCRIPT / HTML
2. Masukkan Kode berikut 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://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
3. Buat judul dan Save.
Bila terjadi error pada widget. itu dikarenakan blog menggunkan Komentar Google Plus. Widget ini cocok untuk sistem komentar blog menggunakan asli bawaan blogger.
klik disini untuk mengubah sistem komentar blog:
Kembalikan Komentar blog
