Cara Membuat Nomor Urut Komentar di Blogspot

Menambahkan aksesoris untuk mempercantik tampilan di dalam sebuah blog entah itu sebuah widget ataupun penambahan fungsi kode script lainnya, lumrah dan menjadi sebuah kewajiban bagi sebagian blogger, apalagi untuk sebuah blog baru yang masih ingin mencoba mengotak atik blognya.

Nah, di kesempatan kali ini saya ingin sharing kepada teman-teman semua bagaimana Cara Membuat Nomor Urut Komentar di Blogspot.

Fungsi dari menambahkan Nomor Urut Komentar ini adalah untuk mengetahui nomor secara urut komentar-komentar yang masuk secara numberic sehingga terlihat lebih rapi dan teratur dan tidak terlihat acak-acakan.

lihat pict

Tentunya juga apabila teman-teman mau menambahkan fungsi membuat warna komentar admin berbeda dan juga menambahkan fungsi reply di kotak komentar, maka tampilan blog pun akan semakin menarik.

Ok, untuk membuat Nomor Urut Komentar caranya sangat mudah, teman-teman hanya perlu menambahkan kode script di bagian Edit HTML Templates blog. Langkah-langkah untuk Membuat Nomor Urut Komentar di Blogspot adalah sebagai berikut:

1. Login ke akun blogspot teman-teman,
2. Masuk ke Design/Tata Letak/Rancangan >> Edit HTML (Jangan lupa untuk mencentang kotak Expand Templates Widget terlebih dulu),
3. Cari kode berikut: <dl id='comments-block'> atau bila tidak ketemu kode tersebut cari kode berikut: <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

4. Jika sudah ketemu kode di atas maka teman-teman perhatikan kode di bawah ini:

a. Cara Pertama (berdasarkan kode CSS templates blog saya)

<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'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

b. Cara Kedua (alternatif kode CSS pada templates blog)

<dl id='comments-block'>

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

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

<dt style='clear: both;' 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='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>

5. Teman-teman hanya perlu menambahkan kode yang berwarna MERAH diantara kode lainnya saja pada bagian kode CSS blog teman-teman.

NOTE: Saya buat menjadi 2 cara di atas, karena kemungkinan ada perbedaan kode CSS di masing-masing templates (yang PERTAMA sesuai dengan kode CSS blog saya dan yang KEDUA alternatif untuk kode CSS yang lainnya), jadi teman-teman semua tinggal menyesuaikan saja.

6. Untuk merubah besar kecilnya nomor yang ingin ditampilkan, teman-teman tinggal mengganti nomor pada kode font-size: 18px;
7. Jika sudah tinggal klik Save Templates dan lihat hasilnya.

Kira-kira seperti itulah Cara Membuat Nomor Urut Komentar di Blogspot, semoga bisa bermanfaat dan selamat mencoba, semoga berhasil.