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 :

Area Numbering Hack


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.

post signature

39 comments:

  1. moga saja pertamaxxx pluss komentarnya nanti aja setelah baca, hehehe

    ReplyDelete
  2. kapan-kapan ae nyobanya lagi males ngedit template kang. ijin bookmark aja ya....!!!

    ReplyDelete
  3. Oh, saya PERTAMAXXX aja deh, kan mas Oeoes Pertamax Plus. Hehehe, komentar jg belakangan...

    ReplyDelete
  4. Keren nih triknya, sayang saya gak bisa nyoba, hiks hiks hiks...

    ReplyDelete
  5. Keduuuuaaaxxxx.... *sebel* kenapa kang Oeoes duluan...? Koq bisa....??? Mmmmm.... tunggu pembalasan dari saya...

    Wah.. kang mochal baek bener ya orangnya.. pinter, ganteng, jujur, dan suka menabung... wakakakakakak...

    Terimakasih banyak kang sudah diwujudkan impian saya *halah*... tinggal saya nya ne... yang ini harus bisa... keren banget soalnya...

    ReplyDelete
  6. Waaaaah.... ternyata keduaaaxnya angus juga.... Kelimax ajah deh kalo gitu gak papa... hiks... *sedih*..

    ReplyDelete
  7. pertamaxxxx...


    kereeennn..sep tenan neh.. "kalau yg ngga bisa..kacihan deh loooo" .. kejaam amaaatt seh kekekkekek

    ReplyDelete
  8. bunda langganan feednya aja dech biar kesimpen terus...ntar kalo bunda enggak repot masak bunda coba-coba hi.hi.hi

    ReplyDelete
  9. udah lama pengen coba, tp kamar masih dalam taraf renovasi.. nanti deyh, klo udah direnovasi semua baru di coba..sementara kamar ga bisa diganggu2 dulu :D nanti ajarin yg jelas ya?? cc lemot siyh :P

    ReplyDelete
  10. Gak nyangka nih gw koment ke Satu+Nol...
    Gut-gut postingnya....

    ☆┌─┐ ─┐☆
     │▒│ /▒/
     │▒│/▒/
     │▒ /▒/─┬─┐
     │▒│▒|▒│▒│
    ┌┴─┴─┐-┘─┘
    │▒┌──┘▒▒▒│
    └┐▒▒▒▒▒▒┌┘
     └┐▒▒▒▒┌┘

    Peace aja deh...Hikz..

    ReplyDelete
  11. sayang,template saya berbasis html,jd gak ngerti sama sekkali deh saya ini.

    ReplyDelete
  12. waw...makin tokcer neh tutorialnya. ayoo para pemulung ilmu blog pada ngumpul. ada pembagian ilmu gratis neh...kumpuuulll grak... (halah, salah aba2 saking semngatanya, Kang)

    ReplyDelete
  13. lama2 bisa jadi pinter semua nih klo blog indonesia gini semua...

    ReplyDelete
  14. keren nih bro tipsnya.. ntar kalo jadi buat blogspot, ajarin dari awal ya.. :P

    ReplyDelete
  15. wah...mau coba, tapi enaknya baca dulu yah...ntar komentarnya mas

    ReplyDelete
  16. mau coba tapi agak pusing nih...kayakjnya enakan entar malam....kan batman... he he he

    ReplyDelete
  17. @ Oeoes > siiip jadi yang PERTAMAAAX, silahkan kang kalau mau di bookmark mumpung gratisan :p
    @ Ridho > siip juga dah jadi yang pertmaaax plus :p, makanya punya account di blogspot dong bro :p
    @ riasmaja > kekekekekek jadi yang ke limax tuh om :p seeep nanti tak lihatin blognya
    @ jaloee > wakakakaak ya habis gimana yak kang kalau ga di gituin ntar ga semangat bikinnya :D
    @ bunda rie > terimakasih bun telah menjadi pelanggan blog ini :D
    @ Unieq > siip cc.... cuman b2 aja yak kita belajarnya :p
    @ Jovie > weeeks , mejeeng nih

    ReplyDelete
  18. @ Qori > makanya pindah ke newblogger dong brot...:p
    @ kapanpun > mmm ga juga ah
    @ gus > weekekekke gmana nih komandan kasih aba2 aja salah :p
    @ daniel > wekekekekeke bisa aja bro
    @ bayu > seeep nanti di bantu
    @ rafi > di baca aja dulu bro
    @ harry > seeeep

    ReplyDelete
  19. puyeng dah kalo soal numbering comments,tapi kalo soal numbering gaji bulanan ya gak puyeng,he..he...

    ReplyDelete
  20. wihhh mantap kang,
    kalo di wordpress gmn yah?

    ReplyDelete
  21. khusus blogspot ya?

    ReplyDelete
  22. nah ini dia posting yg aku tunggu2, mas

    ReplyDelete
  23. enaknya blogspot tuh bisa ngoprek sesuka hati... klo yg make wordpress tinggal nyari plugin ajah... he..he.. apapun DBdsnya minumnya tetep xxx... he..he..

    ReplyDelete
  24. makasih bro tutorialnya,,
    ane udah pake..
    thanks yup..

    ReplyDelete
  25. ya ini yg saya cari-cari. top markotop.

    ReplyDelete
  26. keren pek..... sumpah elit banget bentuk list komen nya... hihihi ngiri aku

    ReplyDelete
  27. duhhh nyang ini lagi..walah..kagak habis2 idenya..hehehe..salut dehhh bro..saya musti subscribe ini taruh di google reader saya..

    wah..wah..keren..sippp bro :)

    ReplyDelete
  28. sudah lama aya juga pengen kaya gini,biar pas ngejawab comen tampil beda gitu

    ReplyDelete
  29. wuihhh.. keren banget...
    sayang lagi gak ada waktu..
    di-bookmark dulu ahhh

    ReplyDelete
  30. mantap banget nih, thanks kang chal.

    ReplyDelete
  31. Asiiik blogspot semakin oke saja jika banyak orang-orang seperti anda

    ReplyDelete
  32. kow malah jadi binung... apa saya yang bodoh ya, coba deh baca lagi...

    ReplyDelete
  33. waaau keren... tapi nunggu ada yang komen diblogku dululah baru pasang... hehehe matur suwun bang

    ReplyDelete
  34. keliatannya jd jelek deh gan kayak ada tempekannya ky gitu wkwkwkwk.. just pendapat

    ReplyDelete
  35. Mantabz, bisa di implementasikan nih,
    Thanks berat!

    ReplyDelete