Mecha versi 2.6.4 sudah dirilis!

Efek Thread Comment Bertingkat Hanya dengan CSS

Blogger thread commenting system
Cara sederhana untuk menciptakan efek komentar bertingkat dengan CSS pseudo-class :nth-child(N)

Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik dengan efek bertingkatnya saja, sebenarnya efek itu bisa diciptakan hanya dengan CSS3. Blogger memiliki tingkatan komentar balasan satu tingkat, namun setidaknya mereka memiliki induk komentar yang bisa kita jadikan sebagai batas akhir perhentian efek.

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

/*!
 * Efek thread-comment bertingkat hanya dengan CSS
 * Level tingkatan dibuat dengan cara menentukan `margin-left` dengan nilai yang berbeda
 */

.comments .thread-toggle {margin-bottom:10px}
.comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px}

.comments .comment-thread.inline-thread .comment {
  margin:0 0 5px 30%; /* Level 6+ */
  background-color:#222;
  border:1px solid #333;
  padding:10px 15px;
  color:#ccc;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {margin-left:25%} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin-left:20%} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin-left:15%} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin-left:10%} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin-left:5%}  /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin-left:0%}  /* Level 1 */

Klik Simpan Template. Warna latar, huruf dan border bisa dimodifikasi sesuka hati.

Lihat Demo

19 Komentar

Unknown

keren2 aku gak bisa ngomong apa selain keren :)

Unknown

mantep... dah gan ane coba...

┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼████████┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░███░░░░░██░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░░██┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░░██┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░██░┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░██░┼┼┼┼
┼┼┼┼┼┼┼┼┼░█████░░░┼┼┼┼┼░█░░░░░░░░█░┼┼┼┼┼
┼┼┼┼┼┼┼░█████████████░┼██░░░░░░░█░┼┼┼┼┼┼
┼┼┼┼┼┼░██░░░░░░██░░█████░░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼┼┼██░░░░░░░░░█░░░░░██░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼░███░░░░░░░░░░█░░░░░░░░░░░░██┼┼┼┼┼┼┼
┼┼┼░██░░█░░░░░░░░░░█░░░█░░░░░░░░█░┼┼┼┼┼┼
┼┼░██░░░██░░░░░░░░░██░██░░░░░░░░░█░┼┼┼┼┼
┼┼░██░░░███░░░░░░░░░█░░░██░░░░░░░██┼┼┼┼┼
┼┼┼░█░░░░░░██░░░░░░░░░░░░█░░░░░░░░█┼┼┼┼┼
┼┼░███░░░░░░██░░░░░░░░░░░██░░░░░░░██░┼┼┼
┼░██░██░░░░░░███░██░░░░░██░░░░░░░░████░┼
┼██░░░██░░░░░░░░█████████░░░░░░░░░█░░██┼
┼██░░░░██░░░░░░░░░░░░░░██░░░░░░░░██░░░█┼
┼┼█░░░░░███░░░░░░░░░░░░█░█░░░░░░██░░░░█┼
┼░██░░░░░░███████░░░░███░░██░░░██░░░░██┼
┼████░░░░░░░░█████████░░░░░░█░░░░░░░░█░┼
┼██░██░░░░░░░░░░░░░░░█░░░░░░░░░░░░░░██┼┼
┼┼██░░███░░░░█░░░░░░██░░░░░░░░░░░░░██░┼┼
┼┼░██░░███████░█████░░░░░░██░░░░░░██░┼┼┼
┼┼┼┼███░░░░█░░█░██░░░░░████░░░░░███░┼┼┼┼
┼┼┼┼┼░███████████████████████████░┼┼┼┼┼┼
┼┼┼┼┼┼┼┼░░░░░░░░░░░░░░░░░░░░░░░░┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼██┼██████████████████████┼┼┼┼█████┼┼
┼┼┼┼██┼█┼┼┼┼┼█┼┼┼┼┼┼┼┼█████████████┼██┼┼
┼┼┼┼██┼█┼┼█┼┼█┼┼█┼┼██┼█┼┼┼┼┼█┼┼█┼┼█┼██┼┼
┼█████┼█┼┼████┼┼█┼┼██┼█┼┼█┼┼█┼███┼█┼███┼
┼█┼┼██┼█┼┼┼┼┼█┼██┼┼█┼┼█┼┼█┼┼█┼┼█┼┼█┼┼┼██
┼█┼┼┼┼┼███████┼██┼┼█┼┼█┼┼┼┼┼████████████
┼██████████████████████┼┼███████████████

Unknown

om kalau ganti reply comment biar gak window popup gimana..?? yang ada di template saya seperti ini ..

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=5385811348401427020&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

gantinya pake apa om.. thnx...!!! :\

NUNO

mantap gang

Febbiez

di kasi jempol rame-rame.

Anonim

mas mas saya kan pakek templatenya bang andre, terus komentarnya saya ganti pakek komentnya mas topik yg ini. nah terus pada saat reply komen bisa, tapi pas pengen reply lagi ga bisa.
jadi reply komennya cman bisa ngereply komen 1 kali, level komen ke dua dan seterusnya ngga berjalan. :(
coba cek di sini http://bangbungg.blogspot.com/2012/08/converter-html.html

Taufik Nurrohman

Kalau bentuk URL-nya seperti ini, tombolnya bisa bekerja:

../2012/08/converter-html.html

Tapi kalau seperti ini, tombolnya jadi macet:

../2012/08/converter-html.html?showComment=1345878748301#c4355477803293935843

Unknown

bang... hebat blognya.

Buatin dong comment thread kayak punyaan abang yang tombol reply-nya tanpa pop-up.. :'( :'( :'( :'(

Ari

Keren

Unknown

ini baru mantap. mas taufik emang jagoo 10 :bd

Unknown

Alhamdulillah, berhasil mas. mksh yach \o/

Unknown

lebih simple, apa mungkin mas taufik ahnya menambahkan beberapa kode terhadap kode komentar bawaan blogger ?

Komentar telah ditutup.