Trick Penggunaan Nomor Komentar Blogger

Wah sudah lama tidak mengupdate artikel yang ada di blog ini, rasanya masih ada yang mangganjal di pikiran. Nah sekarang saya datang membawa sedikit trick baru untuk blog tercinta kita. Trick baru? kenapa saya sebut trick baru, karena trick ini masih jarang digunakan. Trick Penggunaan Nomor Komentar Blogger. Trus kayak gimana sih hasilnya?

Nah to the point aja, bagi yang mau install trick ini di blognya..... cara yang harus dilakukan relatif sederhana. Hanya memasukan beberapa kode kedalam templatenya.

• Masuk kedalam account blogger sobat
• Klik Layout Tab
• Kemudian klik Edit HTML, dan check list option "Expand Widget Templates"
• Lalu langkah berikutnya cari kode berikut "<dl id='comments-block'>"
• Setelah itu rubah kode template anda menjadi sepeti berikut





<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</b:loop>
</dl>





• Kode dengan tulisan berwarna merah dapat diganti sesuai dengan kebutuhan.
• Sekarang kita menambahkan CSS untuk style dari penomoran komentar tersebut. Caranya dengan memasukkan kode CSS dibawah kedalam template sebelum kode ]]</b:skin>




.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:53px;
height:53px;
padding:5px 0 0 0;
margin-right: 5px;
margin-top: -20px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}





• Simpan template dengan menekan tombal "save"
• Lihat hasilnya

Apabila sobat mengalami masalah dengan hasil yang didapat (contohnya posisi nomor), hal tersebut dapat diperbaiki dengan menyesuaikan point kode berikut.

margin-right: 5px; 

margin-top: -20px;

Salam
tipsandcara

Bookmark this post: