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 Comments:
langsung di coba :D
lohh kok (1) semua ya mas nomornya ??
jadikanpinter.blogspot.com/2012/07/closed-kata-blogwalking.html :(
Ternyata elemen komentarmu agak berbeda. Coba ganti bagian .comments dengan #comment-holder seperti ini:
#comment-holder {
counter-reset:number;
}
ternyata masih ga work mas Taufik
Saya coba di blog demo jadi kok ⇒ DEMO
nahh justru itu mas saya bingungnya dstu..
mas , cara bikin menu "balas" dikomen blog gmn mas?
template yg ane download g ada menu "balas" mas..
kalau mmbuat dftar member aktif kayak blog ini gimana???
Cari di Google, cara mengaktifkan fitur thread-comment blogspot yang baru. Tutorialnya ada banyak.
http://under-88.blogspot.com/2012/07/Javascript-Member-Aktif-di-Blog-DTE.html
mas taufik sya update lagi cara pemasangannya
http://under-88.blogspot.com/2012/07/membuat-daftar-member-teraktif-di-blog.html
hehehe... :D
kalau di beri nomor urut sepertinya jadi lebih menarik ya :)
makasih mas trik2nya boleh dicoba nihhh....?
Mas Taufik,
blog saya jadi ke dirrect
jadikanpinter.blogspot.com/p/genius-user.html
makasi mas tutor ny ..
sangat bermanfaat :-bd
mas mas kok jadi kayak gini yahh??
http://bangbungg.blogspot.com/2012/08/template-blogger-keren-chrome-gt.html
?? :\ :\ :\
ckckc, mksudnya nomornya cman 1 dan 2 saja ga berurut.
saya pake thred commentnya mas topik :D
Bingung! 7:( Harusnya bisa...
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.
maaf mas klau pertanyaan saya meyimpang dari artikel ini.
cara mengatur posisi pesan komentar ketika di reply.
contoh saat di reply:
http://2.bp.blogspot.com/-PVZuIohQQzM/URraejo-M8I/AAAAAAAAAPY/hqtAvPkD8zM/s320/z.jpg
Ukuran yg di inginkan:
http://4.bp.blogspot.com/-qIBXf9qzNrY/URrc0INeyGI/AAAAAAAAAP0/5KIjUpo13Tw/s320/z.jpg
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..
Pakai margin negatif:
.comments .comment-replybox-single {margin-left:-5px}
.comments .comment-replybox-thread {margin-left:-60px}
sudah berfungsi saat di reply,
tpi komentar utama malah kluar jalur mas :'(
http://4.bp.blogspot.com/-iid5z6SlrjQ/URr9JCtJNrI/AAAAAAAAAQY/jBq6h3i7CfQ/s320/z.jpg
.comments ol .comment-replybox-single {margin-left:-5px}
.comments ol .comment-replybox-thread {margin-left:-60px}
sukses makasih kang..!! :D
buka les aja pdahal hehehhe
:( ternyata sesudah memberikan komentar bentuknya jadi gini mas:
contoh:
http://1.bp.blogspot.com/-0K9NQLX3kts/URteZVaLDDI/AAAAAAAAARQ/K5xKARwmdFU/s320/z.jpg
tapi saat klik Add comment ukuran formulirnya kesemula lagi.
coba mas taufik bikin komentar di blon demo saya, biar lebih detail..!!
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.
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
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 ?
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'>
ternyata cukup code di atas
masalah nya selesai ... :)
makasih gan , \o/
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.
Post a Comment
<< Home