Another numbering comments

Tentunya sobat blogger pernah mencoba hack numbering comments ala fernadoo , dan yang sudah di alih bahasakan oleh kang firdaus. Nah kali ini saya kan membahas bagaimana memberi nomor urut dengan metode lain atau istilahnya another numbering comments. Sebelum melangkah lebih jauh saya kasih lihat screen shootnya di bawah ini :

Nih Scren Shootnya!!!

Atau bisa di lihat live demonya silahkan klik di sini !!
Tapi trik ini mungkin agak sulit buat sobat blogger karena perlu pemahaman struktur dari template sobat terutama bagian komentarnya, saya sudah menguji cobakan dengan template minima yang menurut saya basic dari template-template yang lain dan berhasil!!!. Kalau memang tertarik silahkan lanjut membacanya.

Berbeda dengan teknik numbering comments ala fernadoo yang hasilnya nomor tersebut mempunyai permalink (atau url menuju ke arah komentar tersebut dan memakai internal javascript, tetapi dengan teknik yang baru ini tidak ada permalinknya, murni pengurutan penomoran komentar dengan teknik css dan kode HTML-an. Saya sarankan sobat blogger untuk mepertimbangkannya, karena ada keuntungan dan kekurangan memakai teknik ini.

Keuntungannya :
1. Tidak perlu kode javascript yang tentunya membebankan loading page blog sobat
2. Sangat simple pembuatannya karena sedikit memakai css - untuk membuat listnya( menurut saya - red)
Kekurangannya :
1. Monoton < karena penomoran ini memakai font body komentar)

Langkah-langkah pembuatan another numbering comments :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.commentlist {
margin: 0px 10px;
padding-left: 20px;
line-height: 130%;
font-weight: bold;
font-style: italic;
font-size: 150%;
}
.commentlist li{
margin-bottom: 10px;
padding: 5px 10px;
background: #BDBDBD;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 85%;
color: #CC6600;
}

Simpan hasil pekerjaan sobat

3. Langkah ini sedikit memerlukan kejelian sobat saya akan memberikan penjelasannya
, cari kode ini <b:loop values='data:post.comments' var='comment'> kemudian ganti dengan kode di bawah ini :


<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<li>
<cite>

Kemudian perhatikan struktur kode HTML-an ini:

<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + 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' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</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>
</b:loop>
</dl>


Kode di atas merupakan pemenggalan dari bagian komentar template minima, kalau struktur template sobat sama dengan struktur di atas silahakan ganti dengan kode di bawah ini :


<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + 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' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
</cite>
<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>
</li>
<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>
</b:loop>
</ol>
</dl>


Perhatikan kode yang di cetak tebal merah!! Merupakan tag penutup kode <ol>, <cite> dan <li> yang kalau sobat blogger jeli bisa di aplikasikan ke template yang beda struktur dengan template minima!!! Perhatikan strukutur area komentar template lainnya dan silahkan sobat trial and error!!. Silahkan bereksperimen dan thinking out the box. Kalau masih bingung silahkan YM-an dengan saya atau kasih komentar mengenai another numbering comments ini.