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

    @system of blog Sama aku juga cuma bisa kasi 4 :-bd :-bd :-bd :-bd yang aku punya itu pun udah + jempol kaki..

  • arimjie blog

    @Suwardi Unggit kalo saya kasi 6 :-bd pinjem jempol teman.. hehehe

    makasih mas tovic, segera diterapkan

  • 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...!!! :\

  • Agriculture Product

    Sob,bagaimana cara bikin treaded comentar.? Maklum masih Newbie.

  • NUNO

    mantap gang

  • Febbiez

    di kasi jempol rame-rame.

  • Farhan Hamzah

    keren banget kang

  • 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

  • Laboratorium Sains

    ko di tempat ku ga bisa ya...

  • Unknown

    ini baru mantap. mas taufik emang jagoo 10 :bd

  • Unknown

    Alhamdulillah, berhasil mas. mksh yach \o/

  • Arief Yustana

    Ane kurang beruntung broo...

  • Unknown

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

Komentar telah ditutup.