Tips Membuat Urutan Penomoran Suatu Komentar ( Numbering Comments )

Akhirnya bisa sampai sini juga nih. Yang ini aku dapet dari situs tetangga bang Fernandooo1 mengenai membuat pengurutan penomoran dari suatu komentar. Tujuan dan maksudnya sih, agar kita tau jumlah persis dan urutan nomer para komentator pada suatu artikel kita dan tujuan yang lainnya gak tau deh, HeHeHe.... Untuk contohnya mungkin dapat dilihat pada kolom komentar dan jikalau belum ada komentar ya saya harap mohon dikomentari ya, penulis juga manusia loh....

Langkahnya sebagai berikut :

1. Login Blogger anda

2. Layout --> Edit HTML

3. Jangan lupa selalu backup dahulu ok

4. Setelah itu --> Edit HTML, centang "Expand Widget Templates"

5. Kemudian cari kode kode berikut, jika ketemu sisipkan kode warna biru diantara kedua kode yang bewarna merah.

<dl id='comments-block'>



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



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

6. Langkah selanjutnya cari lagi kode berikut dan sisipi dengan kode yang bewarna biru.

<data:commentPostedByMsg/>



<span class='numberingcomments'>

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>



</dt>

7. Selanjutnya cari kode warna-merah dan sisipkan kode-warna-biru dibawah

<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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

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

</span>

</dd>



</div>



</b:loop>

</dl>

8. Langkah terakhir, cari kode ini --> ]]></b:skin> dan kemudian pastekan kode dibawah ini sebelum kode tadi

.numberingcomments{

float: right;

display: block;

width: 50px;

margin-right: 5px;

margin-top: -5px; /*comments-counter position*/

text-align: right;

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

font-size: 15px;

font-weight: bold;

}



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



.numberingcomments a:link, .numberingcomments a:visited {color: #002200!important; text-decoration: none !important;}

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

catatan : untuk langkah nomer 8 dapat diatur marginnya sesuai selera anda.