Mecha versi 2.6.4 sudah dirilis!

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

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.