Menampilkan Nomor Urut Komentar Blogger

Sesuai dengan judul postingan kali ini, kita akan membahas bagaimana cara "Menampilkan Nomor Urut Komentar blogger", trik ini hanyalah sebuah penambahan pada tampilan komentar blognya teman-teman2 dengan tujuan untuk mempercantik tampilan komentar juga yang fungsinya sebagai penanda atau pengingat no.urut komen, itung2 buat mudahin ngelacak suatu komen.

Untuk memulai menampilkan nomor komen tersebut, silahkan login dulu ke akun bloggernya teman-teman. Langsung ke halaman Tata Letak/Layout/Rancangan >> Edit HTML, dan jangan lupa untuk mencentang kotak "expand widget template"

Lalu perhatikan kode berikut, yang perlu teman-teman lakukan yaitu menambah kode yang telah ditandai dengan warna merah sesuai dengan contoh berikut (terlebih dahulu temui kode: <dl id='comments-block'>)

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

Selanjutnya letakkan kode berikut tepat di atas kode tag ]]></b:skin>

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

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

Dah itu simpan hasil kerjaan anda.

Bagian yang telah saya tandai dengan warna biru bisa teman-teman atur, itu adalah posisi angka komentar, teman2 bisa mengaturnya dengan mengubah kata "top" dan "right" serta nilai yang tertera. Kalau teman-teman ada yang merasa kesulitan karena struktur kodenya ada yang gak sesuai (seperti) contoh di atas, berarti kita sama. Kode template blog ini juga gitu, oleh karena itu teman-teman bisa mencari kode semisal atau yang mirip, beranilah untuk mencoba dan bereksperimen kalau gak berhasil sekali ya coba lagi, yg jelas pasti bisa kalau berani mencoba, dah itu teman2 bisa meninggalkan pesan di kotak komen tatkala memang sulit sekali (dlm pengeditan kode), kali aja saya bisa bantu dikit2. GoOd LuCk~

Mudah-mudahan bermanfaat.
Keywords:cara menampilkan angka komentar

Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal

Share |