memberi nomor di komentar dengan icon di blogger

Nah, mari kita ngubek-ngubek Blogger lagi di tahun yang baru ini. Komentar adalah salah satu hal yang ditunggu-tunggu oleh para Blogger karena ada komentar berarti ada yang membaca postingan blogmu (walaupun beberapa blog miskin komentar tetapi bejibun visitor). Hm...kalau komentar merupakan hal yang penting bagi Blogger, so mari kita percantik komentar yang ada di blogmu, cekidot!!

Contohnya seperti yang ada di komentar pada blog ini: 

Gimana? keren? cara menyisipkannya ternyata gampang, ikuti saja petunjuk di bawah ini:

1. Masuk ke account Bloggermu lalu cari Tata Letak - Edit HTML

2. Centang "Expand Template Widget" dan cari kode <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

3. Sisipkan kode diantara 2 kode tadi, yang di warnai merah adalah kode baru yang disisipkan: 

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
<b:loop values='data:post.comments' var='comment'>


4. Setelah itu temukan kode <data:commentPostedByMsg/> , kalau tidak ada temukan kode <data:comment.author/>,&#160;
            </b:if>
5. Masukkan kode di bawah ini setelah kode tadi:

 <!--COMM-NUM-STARTS-->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--COMMNUM-STOPS-->

6. Cari kode </head>

7. Paste kode di bawah ini sebelum kode tadi:

<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS--->
8. Ubah kode biru untuk mengubah warna untuk penomeran, atau ubah kode berwarna merah untuk mengganti background gambarnya.

9. Klik simpan lalu cek komentarmu sekarang, bisa kan?

 Hm..tampaknya sahabat ingin memakai gambar-gambar lain? langsung aja deh ke sumbernya di http://bloggerstop.net/2010/01/numbering-comments-in-bloggerblogspot.html