Mempercantik area numbering comments

Postingan ini di buat atas permintaan sobat blog saya yaitu kang Riasmaja yang bunyi seperti ini,

Mmmm... kang... tuh tempelen nomer urut komentator diposting juga dunk caranya... pengennn... bagus banget soalnya...

Nah kali ini postingannnya bagaimana kita mempercantik bagian area "numbering comments" yang tentunya juga sudah tidak asing bagi sobat blogger tentang hack numbering comments, kalau mau lihat screnshootnya di bawah ini :


Mau tahu caranya?

Blogger hack ini saya integrasikan dengan blogger hacknya kang Jaloee yaitu "Menambah Numbering-Comments dan Photo-Author pada layout komentar 2 kolom" kalau belum baca silahkan meluncur ke TKP. Kalau sudah baca silahkan aplikasikan ke blog sobat, nah baru kita mulai hack area "numbering comments" nya.
Langkah-langkahnya mempercantik area numbering comments :

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML ( saya asumsikan sobat sudah aplikasikan hack dari kang Jaloee-red)

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.bubble1{
background:url(http://subagya.googlepages.com/comment-sobat.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}
.bubble2{
background:url(http://subagya.googlepages.com/comment-guwe.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

3. Kemudian cari kode ini :

<div class='commentphoto' style='margin-top:.5em;'/>
<span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Hapus kode yang berwarna tebal, setelah itu simpan hasil pekerjaan sobat
4. Sekarang masuk ke inti hacknya, sobat blogger cari kode ini <dd class='comment-footer'> dan masukkan kode ini dibawah ini tepat di bawah kode tersebut :

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


Langkah 4 merupakan hack untuk mengubah tampilan "numbering comments" nya komentar pengunjung blog sobat

5. Sekarang bagian yang punya blog (owner) kita ubah, cari kode di ini <dd class='comment-footer-author'> , kemudian masukkan kode di bawah ini tepat setelah kode tersebut :

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


Langkah terakhir simpan hasil pekerjaan sobat dan lihat hasilnya, kalau sukses berarti sobat hwebat, kalau gagal kasihan deeh loooh... kekekekekkeke :p . Btw anyway buzway blogger hack ini sudah saya aplikasikan ke template minima dan hasilnya berhasil, and then satu lagi template dari free downloadan hasilnya juga bagus. Ok, kalau masih bingung silahkan hubungi saya lewat YM, email atau berkomentar di postingan ini. Happy blogging and selamat menunaikan ibadah puasa.