Another numbering comments

Tentunya sobat blogger pernah mencoba hack numbering comments ala fernadoo , dan yang sudah di alih bahasakan oleh kang firdaus. Nah kali ini saya kan membahas bagaimana memberi nomor urut dengan metode lain atau istilahnya another numbering comments. Sebelum melangkah lebih jauh saya kasih lihat screen shootnya di bawah ini :


Nih Scren Shootnya!!!


Atau bisa di lihat live demonya silahkan klik di sini !!
Tapi trik ini mungkin agak sulit buat sobat blogger karena perlu pemahaman struktur dari template sobat terutama bagian komentarnya, saya sudah menguji cobakan dengan template minima yang menurut saya basic dari template-template yang lain dan berhasil!!!. Kalau memang tertarik silahkan lanjut membacanya.


Berbeda dengan teknik numbering comments ala fernadoo yang hasilnya nomor tersebut mempunyai permalink (atau url menuju ke arah komentar tersebut dan memakai internal javascript, tetapi dengan teknik yang baru ini tidak ada permalinknya, murni pengurutan penomoran komentar dengan teknik css dan kode HTML-an. Saya sarankan sobat blogger untuk mepertimbangkannya, karena ada keuntungan dan kekurangan memakai teknik ini.
Keuntungannya :
1. Tidak perlu kode javascript yang tentunya membebankan loading page blog sobat
2. Sangat simple pembuatannya karena sedikit memakai css - untuk membuat listnya( menurut saya - red)
Kekurangannya :
1. Monoton < karena penomoran ini memakai font body komentar)

Langkah-langkah pembuatan another numbering comments :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
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 :

.commentlist {
margin: 0px 10px;
padding-left: 20px;
line-height: 130%;
font-weight: bold;
font-style: italic;
font-size: 150%;
}
.commentlist li{
margin-bottom: 10px;
padding: 5px 10px;
background: #BDBDBD;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 85%;
color: #CC6600;
}

Simpan hasil pekerjaan sobat
3. Langkah ini sedikit memerlukan kejelian sobat saya akan memberikan penjelasannya
, cari kode ini <b:loop values='data:post.comments' var='comment'> kemudian ganti dengan kode di bawah ini :

<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<li>
<cite>

Kemudian perhatikan struktur kode HTML-an ini:

<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kode di atas merupakan pemenggalan dari bagian komentar template minima, kalau struktur template sobat sama dengan struktur di atas silahakan ganti dengan kode di bawah ini :

<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
</cite>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>
</li>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</ol>
</dl>

Perhatikan kode yang di cetak tebal merah!! Merupakan tag penutup kode <ol>, <cite> dan <li> yang kalau sobat blogger jeli bisa di aplikasikan ke template yang beda struktur dengan template minima!!! Perhatikan strukutur area komentar template lainnya dan silahkan sobat trial and error!!. Silahkan bereksperimen dan thinking out the box. Kalau masih bingung silahkan YM-an dengan saya atau kasih komentar mengenai another numbering comments ini.
post signature

34 comments:

  1. weiiiits,....ni nomor di kiri ya,bro!
    kok yang aku punya di kanan,.....
    ah,...ga masalah yang penting ada nomor nya juga...

    ReplyDelete
  2. weh asik juga nih, nomer berada disebelah kiri, teringat pas ujian nomer-momer disebelah kiri, heheheheheheehehhehehehehe

    ReplyDelete
  3. haha, kang uus nih, masa blog ingetnya ujian, pada stres ntar blogger2 lain

    ReplyDelete
  4. Tapi kok saya suka sebelah kanan aja yah??
    tahu gak kenapa???

    Jawabannya : Wanita Punya Selera....

    ReplyDelete
  5. he2.. sip dah .. btw ternyata di depannya pake cite.. coba kalau pake country kayaknya bakalan jalan tuh chal..

    hihihi

    kaburrrr

    ReplyDelete
  6. Menarik juga ada nomor di tiap2 komentar. Kapan2 boleh coba deh

    ReplyDelete
  7. ohhh... ntar bunda mau coba yang kayak punya mochal aja dehchh

    ReplyDelete
  8. saya klo liat nomer2 kaya gni jadi inget, pas waktu pembagian sembako.hahaha..........

    ReplyDelete
  9. hhuhuhuh cc semakin bingung.. dasar cc mah gaptek :(

    ReplyDelete
  10. wow-wow keren.. bleh nich dicoba..
    tp sy msh bingung. untuk nampilin foto author/ yg koment aj. pesanya error terus..
    gmn mas, tlng pencerahannya.

    ReplyDelete
  11. wah lagi mumet nih blm nyoba2in dulu :(

    ReplyDelete
  12. hehehe...jadi langsung mraktekin.....ga ngasih tahu pasukan lainnya. dah ngiler soalnya puanya numbering model gini

    ReplyDelete
  13. box komenku masih perawan think,think...lom pernah diutak atik...katanya ada langkah2 yg harus dilewatin khan sebelum ngasih nomor.

    ReplyDelete
  14. bisa di aplikasikan pada template dari finalsense gak ya.... pingin juga nih pasang nomor di koment

    ReplyDelete
  15. Saya Pernah Nyoba Ala Fernando Tapi ada Kesalahan Kayaknya :d Jadinya Penomorannya Kayak Mas Ini :d [Aoothor Numbering Comment]

    Saya Jadi Bingung dikit :d

    Makasih Mas Tips Nyah...
    kalo mas mau nih: Drop Down Pada Label Postingan

    ReplyDelete
  16. Lagi banayk kerjaan jadi cobanya nanti aja ya Kang

    ReplyDelete
  17. wah keren tuh nomornya kayak di tempel asik dong tapi cobanya ntar aja deh soalnya lagi mepet duit nih :D

    ReplyDelete
  18. mas bagaimana sich caranya menghilangkan ikon blogger pada komentar yang kecil itu loh

    ReplyDelete
  19. mas keren banget. mau blajar akh,.

    ReplyDelete
  20. Info keren /koprol
    tapi ntar aja dach
    soalnya box comment gw belom bisa ditaro di bawah posting/lari

    ReplyDelete
  21. erro susah terlalu pukul rata

    ReplyDelete
  22. punyaku kok selalu ada tulisan
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "dl" must be terminated by the matching end-tag "".


    masalahnya apa Mas?

    ReplyDelete
  23. @ ihsan, biasanya ada kode yang tidak tertutup sempurna misal tag div atau tag yang perlu penutup

    ReplyDelete
  24. wahh.. makasi sob..bisa dicoba nih..

    ReplyDelete
  25. Boleh dicuba nih tipsnya.. makasih om..

    ReplyDelete
  26. gila yg punya blog jago bener masalah HTML & Desain Template

    ReplyDelete
  27. semakin menarik saja ngeblog kalo ada tips-tips seperti ini. Btw, aq masih suka format komentar yang lama

    ReplyDelete
  28. aq barusan otak-atik blog, sebab blogger mengeluarkan fasilitas barunya

    ReplyDelete
  29. wah, pusing liat kode2 kayak gitu.. x_x

    ReplyDelete