Baca lewat email biar asik ->
author

Artikel ini ditulis oleh : Putu Hadi

Putu Hadi adalah Blogger dan Penulis penyuka Android. Follow saya di Twitter, artikel ini bermanfaat buat kamu? jangan lupa tinggalkan komentar ya...


Rabu, 06 Januari 2010

Memberi nomor pada komentar dengan ikon lucu.



Nah, mari kita ngubek-ngubek Blogger lagi di tahun yang baru ini. Komentar adalah salah satu hal yang ditunggu-tunggu oleh para Blogger karena ada komentar berarti ada yang membaca postingan blogmu (walaupun beberapa blog miskin komentar tetapi bejibun visitor). Hm...kalau komentar merupakan hal yang penting bagi Blogger, so mari kita percantik komentar yang ada di blogmu, cekidot!!

Contohnya seperti yang ada di komentar pada blog ini:

Image Hosted by ImageShack.us


Gimana? keren? cara menyisipkannya ternyata gampang, ikuti saja petunjuk di bawah ini:

1. Masuk ke account Bloggermu lalu cari Tata Letak - Edit HTML

2. Centang "Expand Template Widget" dan cari kode <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

3. Sisipkan kode diantara 2 kode tadi, yang lookj warnai merah adalah kode baru yang disisipkan:
<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
<b:loop values='data:post.comments' var='comment'>

4. Setelah itu temukan kode <data:commentPostedByMsg/>

5. Masukkan kode di bawah ini setelah kode tadi:
<!--COMM-NUM-STARTS-->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--COMMNUM-STOPS-->

6. Setelah itu klik simpan.

7. Cari kode </head>

8. Paste kode di bawah ini sebelum kode tadi:
<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS-http://bloggerstop.net-->

9. Ubah kode biru untuk mengubah warna untuk penomeran, atau ubah kode berwarna merah untuk mengganti background gambarnya.

10. Klik simpan lalu cek komentarmu sekarang, bisa kan?
Hm..tampaknya sahabat ingin memakai gambar-gambar lain? langsung aja deh ke sumbernya di http://bloggerstop.net/2010/01/numbering-comments-in-bloggerblogspot.html

6 komentar:

Artikel ini berguna? jangan menjadi silent reader, saya akan selalu menjawab komentar

Ada 2 aturan berkomentar yaitu jangan asal komentar, jangan mengiklan, hargai penulis yang membuat artikel ya..terima kasih.