Menambahkan Nomor Urut pada Daftar Komentar

Menambahkan Nomor Urut pada Daftar Komentar

Di antara beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi sekarang sebenarnya masih ada satu kekurangan besar, yaitu hilangnya keleluasaan kita dalam mengedit kode, berbeda dengan fitur komentar versi lama yang bisa diedit sesuka hati. Berikut ini adalah kode XML dalam fitur komentar Blogger versi sekarang:

<div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='threaded_comment_js'/>
  </b:if>
  <div id='comment-holder'><data:post.commentHtml/>  </div>
</div>

Kode yang Saya beri tanda adalah paket kerangka daftar komentar versi sekarang. Itu adalah tag khusus untuk mewakili semua konten komentar di dalamnya, yang merupakan baris-baris elemen <ol> dan <li>. Sangat ringkas dan tidak bisa diedit. Tidak bisa memodifikasi avatar, tidak bisa memodifikasi komentar admin dan lain-lain. Termasuk menambahkan nomor urut komentator dengan JavaScript yang dulu bisa kita lakukan dengan mudah, sekarang sudah tidak lagi bisa kita lakukan.

Saat ini kita tidak bisa menggunakan JavaScript untuk memodifikasi ini. Jadi kita akan menggunakan CSS Counter.

Salin kode ini dan letakkan di atas ]]></b:skin> atau </style>:

/*!
 * Menambahkan nomor urut pada thread comment blogspot versi baru
 * https://plus.google.com/108949996304093815163/about
 */

.comments {counter-reset:number}

.comments .comment {
  position:relative;
  counter-increment:number;
}

.comments .comment-content {margin-right:50px !important}

.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px "Times New Roman",Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:4px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}

.comments .comment .comment-thread.inline-thread {counter-reset:number}

.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}

.comments .comment:hover:after {
  background-color:#600;
  border-color:#900;
  color:white;
}

Klik Simpan Template.

Lihat Demo

32 Komentar

  • Surga Kenari

    langsung di coba :D

  • Surga Kenari

    lohh kok (1) semua ya mas nomornya ??

    jadikanpinter.blogspot.com/2012/07/closed-kata-blogwalking.html :(

    • Taufik Nurrohman

      Ternyata elemen komentarmu agak berbeda. Coba ganti bagian .comments dengan #comment-holder seperti ini:

      #comment-holder {
      counter-reset:number;
      }
  • adha reyan

    mas , cara bikin menu "balas" dikomen blog gmn mas?
    template yg ane download g ada menu "balas" mas..

    • Taufik Nurrohman

      Cari di Google, cara mengaktifkan fitur thread-comment blogspot yang baru. Tutorialnya ada banyak.

  • Waff

    kalau mmbuat dftar member aktif kayak blog ini gimana???

    • Taufik Nurrohman

      http://under-88.blogspot.com/2012/07/Javascript-Member-Aktif-di-Blog-DTE.html

      • Unknown

        mas taufik sya update lagi cara pemasangannya
        http://under-88.blogspot.com/2012/07/membuat-daftar-member-teraktif-di-blog.html
        hehehe... :D

      • Surga Kenari

        Mas Taufik,

        blog saya jadi ke dirrect

        jadikanpinter.blogspot.com/p/genius-user.html

  • Hariyanto Wijoyo

    kalau di beri nomor urut sepertinya jadi lebih menarik ya :)

  • Unknown

    makasih mas trik2nya boleh dicoba nihhh....?

  • Unknown

    makasi mas tutor ny ..
    sangat bermanfaat :-bd

  • Anonim

    mas mas kok jadi kayak gini yahh??
    http://bangbungg.blogspot.com/2012/08/template-blogger-keren-chrome-gt.html

    • Taufik Nurrohman

      ?? :\ :\ :\

      • Anonim

        ckckc, mksudnya nomornya cman 1 dan 2 saja ga berurut.
        saya pake thred commentnya mas topik :D

  • Anonim

    Di cari-cari jauh-jauh malah ada di sini..
    saya muka lama pendatang baru bang, Blog yang lama udah di pensiun duluan, akun-nya di tutup.

  • azewBz

    maaf mas klau pertanyaan saya meyimpang dari artikel ini.
    cara mengatur posisi pesan komentar ketika di reply.
    contoh saat di reply:

    Ukuran yg di inginkan:

    jadi intinya saat menekan tombol reply pesan komentar rapih sejajar dengan posisi Ava yang besar.

    terus text Add comment tidak mengikuti kolom komentar.
    biar lebih jelas mas kunjungi azewcreator.blogspot.com
    maaf kalau sudah merepotkan..

    • Taufik Nurrohman

      Pakai margin negatif:

      .comments .comment-replybox-single {margin-left:-5px}
      .comments .comment-replybox-thread {margin-left:-60px}
  • azewBz

    sudah berfungsi saat di reply,
    tpi komentar utama malah kluar jalur mas :'(

    • Taufik Nurrohman

      .comments ol .comment-replybox-single {margin-left:-5px}
      .comments ol .comment-replybox-thread {margin-left:-60px}
      • azewBz

        sukses makasih kang..!! :D
        buka les aja pdahal hehehhe

        • azewBz

          :( ternyata sesudah memberikan komentar bentuknya jadi gini mas:
          contoh:

          tapi saat klik Add comment ukuran formulirnya kesemula lagi.
          coba mas taufik bikin komentar di blon demo saya, biar lebih detail..!!

          • Taufik Nurrohman

            Biasanya karena max-width. Pakai inspect element untuk mengedit CSS secara langsung. Kalau itu juga sebenarnya masalahnya karena letak formulir komentar pindah ke posisi yang sebenarnya. Saat kita klik Add comment, formulir komentar akan berpindah posisi ke elemen #threaded-comment-form, walaupun secara kasat mata tampaknya posisinya tidak berubah.

            • Febri Tri Harmoko

              Kalau misal sebalik nya gimana gan ?
              ini kotak komentar nya kalau sebelum di klik balas atau pun kita tambahkan komentar dia malah jadi kecil gitu ukuran nya tidak seperti biasa , tapi kalau sudah klik balas ukuran ny kembali normal mohon bantuan nya gan

            • Febri Tri Harmoko

              trus untuk mengatasi masalah kalau misal ketika di beri komentar atau pun tidak biar kotak komentar nya kembali seperti semula yang kita ingin kan (tidak berubah kecil) itu bagaimana yah gan cara nya ?

              • Taufik Nurrohman

                Satu-satunya cara untuk menyamakan tampilan formulir komentar dalam keadaan apapun adalah dengan menyamakan ID formulir tersebut. Ganti semua kode ini:

                <div id='comment-form'>

                atau ini:

                <div class='comment-form'>

                atau ini:

                <div class='comment-form' id='comment-form'>

                dengan ini:

                <div id='threaded-comment-form'>
  • Unknown

    seperti pny sy 31 RESPONSES SO FAR dan seperti pny mas Taufik 32Komentar:,
    bisa gk klo hny komentar visitor aja yg terhitung?, admin gk termasuk.

Komentar telah ditutup.