Nomor urut pada tempat komentar dengan baground balon gelembung

Untuk sobat blogger yang ingin membuat Nomor urut pada tempat komentar dengan baground balon gelembung yuk kita ikuti langkah langkah berikut ini
1.Login ke akun blogger dashboard
2.Klik layout (tata letak)
3.Edit HTML download full template
4.Centang Expand Widget Templates
5.Cari kode <dl id='comments-block'>
6.Copy paste kode dibawah ini dan letakan pas dibawah kode tadi

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

7.Cari kode yang seperti ini <b:loop values='data:post.comments' var='comment'>
8.Copy paste kode dibawah ini dan letakan tepat dibawah kode tadi

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

9.Cari kode yang seperti ini <data:commentPostedByMsg/>
10.Copy paste kode dibawah ini dan letakan pas tepat dibawah kode tadi

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

11.Santai dulu sob supaya tidak jenuh melihat kode kode kita ambil dulu sebatang rokok ama kopi mantap
12.Cari kode yang seperti dibawah ini
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

13.Copy paste kode dibawah ini dan letakan pas dibawah kode tadi

</div>

14.Cari kode yang seperti ini ]]></b:skin>
15.Copy paste kode dibawah ini dan letakan di atas kode tadi

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

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

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

Save template beres dech dan coba lihat hasilnya
Catatan kode yang berwarna merah yang ini http://i40.tinypic.com/14tmp9e.jpg bisa juga diganti dengan image atau foto kepunyaan sobat yang udah di upload ke image hosting

Posted in: minima press,Tip Blogging