Memberi Urutan Nomor Pada Komentar

Hari yang indah dengan Artikel yang Indah.
Heloo sobat blogger.
Pada kesempatan kali ini Koisine Blog meluangkan waktunya untuk membuat tutorial baru yang diberikan secara cuma-cuma kepada kalian blogger pemula.

Tutorial yang akan kita bahas adalah cara memberi urutan pada komentar.
Tujuan mmeberi urutan komentar yaitu untuk mempermudah melihat berapa jumlah komentar yang mengomentari suatu artikel.

Koisine Blog menyediakan beberapa beberapa icon urutan nomor yang menarik.
Cara pemasangannya cukup mudah tetapi kalian harus cermat dan teliti langkah langkahnya agar semakin mudah.

Langsung saja tutorialnya,

* Step 1

Pertama login draft.blogger kalian,
Masuk ke "Rancangan",
Pilih "Edit Html",
Jangan lupa ceklist "Expand Template Widget",

* Step 2

Gunakan Ctrl F untuk mencari kode berikut

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

Sekarang, letakan kode di bawah ini sebelum kode di atas,

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

* Step 3

Selanjutnya, cari kode yang sama persis seperti kode di bawah ini,

<data:commentPostedByMsg/>

Sekarang, letakan kode di bawah ini setelah kode di atas,

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

* Step 4

Pada step 4 kita akan memberi urutan nomornya pada komentar dan juga icon menariknya,

Silahkan sobat cari kode berikut,

</head>

Selanjutnya, letakan kode di bawah ini sebelum kode di atas,

<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>