loading...

Kostumisasi Penomoran pada Komentar Blogger™

Credits

Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog Vagabundia berasal dari Buenos Aires, Argentina.

Menambah nomor urut komentar

Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.

Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.

.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}

  • Untuk merubah letak nomor ke kanan (right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru.
  • Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
  • Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
  • Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.

Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.

      <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
             <b:if cond='data:comment.favicon'>
               <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
             </b:if>
               <a expr:name='data:comment.anchorName'/>
             <b:if cond='data:blog.enabledCommentProfileImages'>
               <data:comment.authorAvatarImage/>
             </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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>

<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>

            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>

Sisipkan kode yang berwarna merah di antara kode-kode di atas.

HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.

                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>

Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.

<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kostumisasi nomor urut komentar

Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:

.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}

.numberingcomments:after {content:"."}

Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.

78 komentar untuk “Kostumisasi Penomoran pada Komentar Blogger™”

  1. ini bagus supaya kita tau komentar kita nomor berapa.
    kunjungan perdana nih, kunjungi blog saya ya, berisi tips ngeblog yang pasti bermanfaat untuk blogger

    salam kenal,

    Regi Adi

    BalasHapus
  2. @RegiAdi:
    Aduh, mas. Blognya lagi didandani, yah. Cuman bisa baca artikelnya saja.
    Betul, mas. Memang topik trik ini udah termasuk lama publish, tapi penggunaannya masih tetap hangat sampai sekarang.

    BalasHapus
  3. @OB

    wah mantep blog nya si om ini. ternyata masih banyak tutor" keren di banyaknya blog tutor abal-abal.

    salut om.

    BalasHapus
  4. Trend 2011, blog minimalis dengan konten berbobot, contohnya blog ini

    BalasHapus
  5. mantap...thanks your share Informationns and tutorial greetings Good luck always

    BalasHapus
  6. makasih banyak y Tutorial nya sangt bermanfaat...
    salam kenal good luck always kawan

    BalasHapus
  7. di bookmark dulu gan artikelnya, nanti dibaca lagi.

    BalasHapus
  8. thanks for the tips i will implement it :)

    BalasHapus
  9. makasih ats infox....
    biasanya org menggunakan gmbar tp lbih baik css sj ya mas, spy lbih ringan...

    BalasHapus
  10. This is an amazing post. I like this post very much and very informative post. All things are described in very beautiful way. I think you should continue to make this type of post.

    BalasHapus
  11. mantaff gan..
    langsung coba gan..

    BalasHapus
  12. Komentar blog saa belum banyak, jadi kayaknya belm buth bat paka nomor..

    BalasHapus
  13. Wah blog baru saya malah belum ada komentarnya,, jadi mungkin di pasang juga percuma..

    BalasHapus
  14. Keren juga Mas OB
    kemarin kita taunya membuat nomor komentar floatingnya ke kanan ujung..

    BalasHapus
  15. mau ngedit blog, tapi gak bisa masuk gara-gara pake verifikasi 2 langkah tapi hape malah gatau kenapa tu, huft.. bookmark dulu deh XD

    BalasHapus
  16. @lavhalitya:
    Makanya, gan disimpan kode cadangan yang 10 biji. Jadi bisa digunakan sewaktu-waktu. Saya juga pake verifikasi 2 langkah, tapi dulu, sekarang ngga lagi. Agak ribet sebabnya :D

    BalasHapus
  17. bgus tuh klw ada penomeran / urutan komentar,,setujuu2

    BalasHapus
  18. Terima kasih atas informasinya,
    Sukses selalu...

    BalasHapus
  19. saya juga menerapkan ini wkwkwk... (promo buat lebaran)

    BalasHapus
  20. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  21. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  22. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  23. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  24. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  25. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  26. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  27. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  28. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  29. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  30. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  31. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  32. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  33. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  34. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  35. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  36. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  37. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  38. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  39. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  40. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  41. Baru kali ini saya membaca Artikel yang sangat membangun. Boleh dicoba

    BalasHapus
  42. Tipsnya boleh dicoba, Artikelnya sangat bermanfaat.

    BalasHapus
  43. Terimaksih untuk info yang sangat efektif, boleh dicoba.

    BalasHapus
  44. Terimaksih untuk Info yang sangat Amazing, boleh dicoba.

    BalasHapus
  45. Sangat Amazing Artikel dan Info. Wajib di coba.

    BalasHapus
  46. Sebanyak saya membaca Artikel,baru kali ini saya menemukan Artikel yang Amazing. boleh di coba. Terimaksih

    BalasHapus
  47. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  48. Wibesite yang sangat Amazing, Artikel dan Tipsnya boleh dicoba. Semangat !!

    BalasHapus
  49. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  50. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  51. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  52. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  53. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  54. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  55. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  56. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  57. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  58. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  59. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  60. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  61. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  62. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  63. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  64. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  65. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  66. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  67. Really its a good news.This site has lots of advantage. I found many interesting things from this site. I like it very much. Its so interesting.I want to sharing this topic with some of my close friends. So thanks this post.

    BalasHapus
  68. I know the compensation is comparative ...

    BalasHapus
  69. izin copas gan untuk arsip ilmu css, terima kasih gan sudah banyak berbagi

    BalasHapus
  70. wajib di coba... tpi kenapa di blogku tidak bisa sobbb..???

    BalasHapus