Cara Memasang Nomor Urut Komentar

Apa kabar sahabat blogger semua, dihari minggu yang cerah saya akan mengetengahkan sebuah trik untuk sahabat semua. Ttrik kali ini yang akan saya share adalah Cara Memasang Nomor Urut pada Komentar. Dengan sedikit modifikasi pada template maka tampilan komentar blog sobat akan lebih menarik dengan adanya nomor urut komentar.
Kalau di blog sobat belum ada nomor urut komentarnya, sobat bisa memasangnya dengan mengikuti tutorial di bawah ini :
Masuk ke blogger dengnan ID teman

Pilih Design >> Edit HTML

Backup terlebih dahulu sebelum sobat memulai untuk memodifikasi template,

Setelah itu cari kode ini ]]></b:skin> (biar cepat Ctrl+F)

Lalu kode di bawah ini tepat di atas kode ]]></b:skin>

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

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

Untuk kode yang berwarna merah di atas, silahkan sobat ganti dan sesuaikan dengan warna template blog sobat.
Untuk kode warna silahkan sobat lihat DISINI

Kemudian cari kode seperti ini

<dl id='comments-block'>

Kode di atas berbeda-beda pada tiap template, jika belum ketemu coba kode seperti di bawah ini:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Setelah ketemu, perhatikan penempatan kode di bawah ini
(Intinya sobat hanya menyisipkan kode yang berwarna merah itu)

<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='TrikBloggerKomentar'>
<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>

Atau untuk sebagian template (jika kode di atas tidak ada)

Cari kode seperti di bawah ini

<dl expr:class='data:post.avatarIndentClass' 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 expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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='TrikBloggerKomentar'>
<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 expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>

CATATAN
Bagi sobat yang sudah memasang fitur replay dan komen admin berbeda dengan pengunjung dapat melihat kodenya seperti di bawah:

<dl expr:class='data:post.avatarIndentClass' 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 expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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='TrikBloggerKomentar'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

KODE REPLY DAN KODE KOMENTAR ADMIN BIASANYA DISINI

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</b:if>
</div>

Setelah selesai simpanlah template sobat

Selamat mencoba dan semoga bermanfaat

RESENSI
Trik Blogger | http://trik-blogger-andreas.blogspot.com/2011/01/trik-memasang-nomor-urut-komentar.html

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI