Nomor komentar

Blogger Numbering Comment atau no. urut komentar ini merupakan salah satu blogger hack yang bisa menampilkan no. urut di setiap komentar. Walaupun artikel ini dah banyak yang tulis (kalo saya search di google) tapi barangkali ada diantara temen2 yang belum tau dan ingin pasang blogger numbering comment ini. Untuk lebih jelasnya mengenai bagaimana blogger numbering comment ini, berikut screenshootnya :


Bisa anda lihat hasil dari blogger numbering comment ini. Fungsinya yaitu menambahkan no. urut sesuai komentar yang ada pada blog anda. Blogger hack ini saya dapet dari fernando di salah satu postingannya tentang numbering comment

Jika anda tertarik untuk pasang blogger hack ini, berikut langkah2nya :

Masuk ke lauout > edit html > kasih anda centang pada kolom expand template widget.
Setelah itu cari kode html ini <dl id='comments-block'> kemudian tambahkan dibawahnya kode (hanya) yang berwarna merah sesuai dengan letaknya.

<dl id='comments-block'>

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

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

<div class='' expr:id='data:comment.id'>

<dt 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='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

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

</div>

</b:loop>
</dl>

Selanjutnya, copy paste kode css berikut di atas kode html ]]></b:skin>:


.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*posisi angka komentar*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

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

Save template..kemudian lihat hasilnya