Nomor Urut Komentar Blogger

Menampilkan nomor urut komentar di blogger, mungkin tutorial ini dah banyak muncul di blog lain yang lebih master hehehe bukan seperti ku. Buat yang masih pemula, silahkan di pelajari dan buat yang sudah master silahkan dinilai kalo emank pantas dinilai. Nomor urut komentar ini akan muncul di sebelah kanan nama komentator, untuk contohnya ku belum bisa tampilkan karena template blog ini baru diganti. Tapi cara ini sudah di praktekan dan lumayan berhasil ha????.

Langkah pemasangannya bisa dilihat dibawah.

Langkah pertama login menggunakan akun blogger kamu, pilih Layout kemudian pilih Edit Html. Cari kode seperti ini ]]></b:skin>.
Kalau sudah ketemu, taruh kode dibawah ini persis diatas kode ]]></b:skin>

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

/*since the numbers are actually links, we need to force the color properties*/

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

Jangan lupa simpan template terlebih dahulu, kemudian lakukan langkah kedua dengan mencari kode seperti di bawah ini (jangan lupa beri tanda centang pada Expand widget templates):

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + 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/>
</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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kalo sudah ketemu, ganti dengan kode di bawah ini:

<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='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + 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'>
<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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

Simpan template kamu kembali, dan lihat hasilnya. Untuk mendapatkan hasil lebih baik, edit Kode Css pada langkah pertama sesuai keinginan kamu.

Nice Blogging...

Related Post