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.
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:Surga Kenari
ternyata masih ga work mas Taufik
Taufik Nurrohman
Saya coba di blog demo jadi kok ⇒ DEMO
Surga Kenari
nahh justru itu mas saya bingungnya dstu..
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
Taufik Nurrohman
Bingung! 7:( Harusnya bisa...
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:
azewBz
sudah berfungsi saat di reply,
tpi komentar utama malah kluar jalur mas :'(
Taufik Nurrohman
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:
atau ini:
atau ini:
dengan ini:
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.