Memasang Nomor pada Kotak Komentar

Banyak sekali tips dan trik yang terdapat pada blogger ini salah satunya yang terbaru adalah memberikan nomor pada kolom kotak komentar seperti contoh diatas :
Kali ini saya akan memberikan cara bagaimana memberikan nomor pada kolom kotak komentar :

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

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

}

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

Silahkan ganti tulisan yang berwarna hijau dengan warna yang kalian sukai.

7. Tambahkan kode merah di bawah ini diantara kode-kode di bawah :

<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 expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>


<a expr:name='data:comment.anchorName'/>

<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='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>


<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</div>

</b:loop>

</dl>

8. Save dan lihat hasilnya.

Keep Blogging...

Artikel Yang Berhubungan :