Memberi Nomor Pada Komentar (Numbering Comments)

Tidak begitu jauh bedanya dengan postingan saya kemarin, tentu saja masih berhubungan dengan comment ^^, sebelumnya saya pernah membahas tentang cara membuat comments bubble dan cara membuat comments bubble versi 2 maka kali ini saya akan membahas tentang cara membuat number comments.

Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini di sini. Untuk membuatnya silakan ikuti langkah-langkah berikut.

Login ke blogger.com
Klik Rancangan
Klik Edit HTML, kemudian beri centang pada Expand Widget Template
STEP 1
Cari kode berikut

]]></b:skin>

Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

.comments-counter a:link,.comments-counter a:visited {
color: #000 !important;
text-decoration: none !important;
background: url(http://i47.tinypic.com/99m5on.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-counter a:hover,.comments-counter a:active {
color: #666 !important;
text-decoration: none !important;
}
STEP 2
Kemudian cari kode berikut

<b:loop values='data:post.comments' var='comment'>

Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

<script type='text/javascript'>var CommentsCounter=0;</script>
STEP 3
Terakhir cari kode berikut

<data:commentPostedByMsg/>

Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi

<span class='comments-counter'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
klik Simpan

Sekarang lihat blog anda, buka postingan anda yang memiliki komentar. Perhatikan kotak komentar pada bagian kanan. Anda dapat mengatur posisi angka pada icon bubble dengan menyesuaikan kode yang berwarna merah pada STEP 1. Anda juga bisa mengganti icon bubble sesuai dengan keinginan anda dengan cara mengganti url yang berwarna biru dan jangan lupa sesuaikan juga kode yang berwarna orange dengan ukuran icon bubble anda (STEP 1). Semoga bermanfaat...^^,

10 Comments:

saka said... on June 19, 2010 at 7:40 AM: Kunjungan malam hari sob,,
pertamaX nggak ya :)
muzzy musthofa said... on June 19, 2010 at 9:28 PM: mantab kang.... makasih ya kang atas doanya. semoga diblaz oleh Allah SWT dengan berlipat-lipat kebaikan. Amin Ya Rabb. salam dari blogger sidoarjo Kang... :)
mixedfresh said... on June 19, 2010 at 11:13 PM: nice tutorial, pengen nyoba juga..
met berakhir pekan
om rame said... on June 20, 2010 at 12:34 AM: terima kasih om atas tutornya. sebenarnya saya sudah punya haL seperti ini tapi Lagi pingin utak-atik lagi.
seLamat berakhir pekan aja yah om.
Allien 99 said... on June 20, 2010 at 2:11 AM: kreatif juga. nice article. salam kenal. I follow this blog, follow balik ya.. :)
Rizkyzone said... on June 22, 2010 at 4:32 AM: keren nih sob, tp blogq sementara g tapasang dylu, dah kebanyakan kode, blog q dah berat bgt sob
rawins said... on June 23, 2010 at 1:51 AM: wah ijin bookmark deh. kadang suka butuh tutorial ginian. bulan depan kalo jadi ke samarinda tak mampir dah...
oempak said... on June 23, 2010 at 4:23 AM: tenkyu kawan, saya lg cari nih, tp blm bs aplikasikan, lg dicoba ini jg :) thanks
Masda said... on June 24, 2010 at 4:32 AM: @all, sama-sama mas,
@muzzy mustafa, amien... Makasih udah menyempatkan diri berkunjung ke blog saya :)
Elong Bujang said... on June 26, 2010 at 7:36 PM: Salam kenal..informasinya sangat bermanfaat....terima kasih atas ilmunya

Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.

Komentar yang bernada SPAM atau SARA akan kami hapus.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))