Menambahkan Nomor Urut pada Komentar Blog

Nomor urut komentar pada wordpress sudah tidak asing lagi bukan ? Tapi bagaimana dengan blogger ? Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan nomor urut komentar. Seperti kita ketahui bahwa blogger/blogspot memiliki kelebihan dibanding wordpress pada web gratisannya.
Selain bisa mengubah desain template sesuka hati kita kita juga bisa mengubah-ubah widget (plugins). Salah satunya dengan menambahkan nomor pada komentar blog kita di blogspot/blogger. Sebelumnya jangan lupa mengcopy script widgetnya untuk backup jika terjadi apa-apa

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Tekan ctrl + F cari kode <dl id='comments-block'> . Kemudian tambahkan kode warna merah diantara kode-kode <dl id='comments-block'>, seperti yang terlihat dibawah ini:

<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 expr:class='"comment-author " + data:comment.authorClass'
expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>



<span class='comment-number'>

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

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>



</div>



</b:loop>

</dl>

Untuk mempercantik nomor urut komentar, kita bisa menambahkan kode CSS sebelum kode

]]></b:skin>

.comment-number {

float: right;

background: url(http://img24.imageshack.us/img24/875/iconcomments3.png) no-repeat;

width:50px;

height:50px;

margin-right: 15px;

margin-top: -35px; /*posisi nomor urut*/

text-align: center;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 18px;

font-weight: bold;

}



/*warna nomor urut*/



.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;

}

Kode warna merah adalah background untuk nomor urut, jika sobat blogger tidak ingin memberi background tersebut kode warna merah bisa dihapus atau mungkin diganti dengan gambar background milik sobat blogger sendiri. Happy Blogging!!

Sumber: Fernandooo1