Memasang Nomor Urut Pada Komentar ...!

Masih terus melakukan modifikasi tampilan komentar blogger, kali ini saya akan menjelaskan cara menampilkan nomor urut pada setiap komentar yang ada. Untuk yang belum faham apa itu nomor urut pada komentar bisa dilihat dari gambar berikut:

Langsung ke pembahasan aja ya ... berikut tahap-tahapnya :

1. Login Ke blogger kalian
2. Masuk Ke Rancangan --> EDIT HTML (centang expand template widget)
3. Simpan kode berikut diatas kode ]]></b:skin>

.Nomorz33sPesan{
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;
}

.Nomorz33sPesan a:link, .Nomorz33sPesan a:visited {color: #445566 !important; text-decoration: none !important;}
.Nomorz33sPesan a:hover, .Nomorz33sPesan a:active {color: #FF9933 !important; text-decoration: none !important;}

Keterangan :
== Kalian bisa mengganti warna dan ukuran angka pada kode yang saya beri warna diatas. Untuk melihat kode HTML warna bisa KLIK DISINI.

4. Sekarang kalian cari kode berikut :

<dl id='comments-block'>

untuk sebagian template kodenya seperti ini :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

5. Setelah ketemu, kalian perhatikan penempatan kode berwarna merah pada kodenya :
(intinya kalian hanya menyisipkan kode berwarna 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/>

<span class='Nomorz33sPesan'>
<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>

atau untuk sebagian template ( jika kode diatas ga ada )

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

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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='Nomorz33sPesan'>
<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 expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>

TAMBAHAN : Buat kalian yang sudah memasang fitur reply dan memasang fitur komentar admin berbeda dengan pengunjung kalian bisa lihat kodenya dibawah ini :

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

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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='Nomorz33sPesan'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

KODE REPLY DAN KODE KOMENTAR ADMIN BIASANYA DISINI

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</b:if>
</div>

INGAT... KALIAN HANYA MENAMBAHKAN KODE BERWARNA MERAH

Semoga artikel diatas bisa bermanfaat dan dapat dipraktekkan.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis : Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.