Memberi Nomer Urut Komentar

Belakangan ini, cukup banyak blogger yang memberikan penomeran terhadap komentar yang masuk dalam postingan mereka. Seberapa pentingkah penomeran ini?
Jawabnya adalah relatif. Bagi mereka yang mau berkomentar dan kebetulan memiliki nama yang sama dengan komentator sebelumnya, ini bisa dipakai sebagai pembeda oleh sang mpunya blog. Selebihnya adalah pemanis, itu setidaknya menurutku.

Karena udah banyak yang memakai penomeran ini, aku rasa aku gak perlu menjelaskan dari mana saja temen-temen bisa mendapat tutorial seperti ini, aku hanya mau mencoba ngasih tau cara kostumisasinya aja.

Untuk memulai proyek ini, masuk ke akun blogger kamu dan tuju Edit HTML langsung. Jika sudah dibawa pada halaman pengaturan template via edit html, jangan lupa untuk melakukan back up data.
Jika back up data udah dilakukan, sekarang cari bagian berikut dan tambahkan kode yang berwana merah.

<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/> <!-- Bagian ini mungkin tidak ada -->

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

sebenernya, hanya sampai tahap ini nomer udah muncul pada komentar kamu. tapi hasilnya akan kecil dan berada tepat di samping pemberi komentar, seperti yang temen-temen liat di blog aku ini. Terkesan tidak rapi.
Sedangkan, pada bagian ini,
<script type='text/javascript'>var CommentsCounter=0;</script>
bila nilai 0 kamu ganti, maka penomeran akan dimulai setelah nilai yang kamu masukkan.

Sedangkan untuk membuat penomeran menjadi rata, kamu perlu menambahkan kode berikut pada bagian CSS. Gak perlu bingung mencari bagian CSS itu dimana, letakkan saja kode tersebut di atas kode ]]></b:skin>

/*Mulai css Comments Numbering*/
.numberingcomments{
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;
}

/*since the numbers are actually links, we need to force the color properties*/
.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;}
float: right; adalah untuk pengaturan letak penomeran itu. Bila kamu mau menggantinya menjadi berada di kiri, kamu ganti aja menjadi float: left; dan setelah kode <data:commentPostedByMsg/> kamu tambahkan perintah ganti baris aka enter berikut <br/><br/><br/><br/> atau sejumlah secukupnya. Ini agar nomer yang dihasilkan tidak bertabrakan dengan bagian yang kain.
Sedangkan nilai width: 50px; disarankan 0

font-size: 30px; adalah untuk menentukan besar huruf yang dipakai untuk penomeran itu. Kamu bisa menggantinya sesuka kamu.

font-weight: normal; dipakai untuk menentukan stile,. kamu bisa menggantinya menjadi tebal, maupun model lain dari sini.

Sedangkan bagian ini, .numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;} menunjukkan reaksi nomer saat mouse melewatinya.

Say thanks to Fernandooo1
Menurut kamu berguna gak? Kalau ya, langganan aja via E-Mail. Klik disini

Mungkin Kamu Mau Baca Ini: