Home » » Cara Sederhana membuat Thread Comment Bertingkat

Cara Sederhana membuat Thread Comment Bertingkat

Cara Sederhana membuat  Thread Comment Bertingkat.
Cara sederhana untuk menciptakan efek komentar bertingkat dengan CSS pseudo-class :nth-child(N)
Sobat pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Dari beberapa blog yang saya temukan rata-rata semuanya menggunakan pergantian kode, 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. Ini adalah kesempatan baik untuk kita.

Coba sobat lihat dan cari di google cara membuat thread comment bertingkat,pasti hasilnya sama,namun pada kali ini saya akan membagikan cara membuat efek thread comment hanya dengan menggunakan CSS3 dan hanya cukup meletakannya di atas ]]></b:skin> atau </style>:
Sari pada banyak cerita yuk langsung saja kita praktekan bagaimana cara membuatnya,sok lah tinggal di kopt saja kode di bawah.

Demo gambar:
Atau bisa Sobat lihat disini

kotak komentar

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


/* Cara Sederhana membuat  Thread Comment Bertingkat
 * Level tingkatan dibuat dengan cara menuliskan 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:0px 0px 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:0px 0px 5px  
25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 
20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 
15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 
10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 
5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 
0%; } /* Level 1 */


Atau ambil kodenya  disini

Klik Simpan Template. Warna latar, huruf dan border bisa dimodifikasi sesuka hati
Cara ini hanya berlaku pada komentar yang sudah memakai system thread koment,selamat mencoba dan semoga berhasil.
Sumber


47 komentar:

  1. top nih.. yang lagi tren nih kayaknya model komen begini. asik ada resepnya. cuma kayaknya saya belum peke dulu. nanti kuatir bikin bingung Mang Cilembu, hehe

    BalasHapus
    Balasan
    1. lho memangnya kenapa?entar juga kalau ada yang koment kelihatan di bawahnya berjejer.he...he...nggak apa-apa kang sippp lah.

      Hapus
    2. mungkin takut di kiran semut antri kali mas heheh

      Hapus
    3. ah si mas bisa saja,he...he...iya juga yah,mungkin kali.

      Hapus
    4. ngetes balas komen disini...:)
      ya kang memang keren,top pokoke sukses selalu kang.

      eh itu model photo artisnya paling atas sendiri kan yang punya wilayah cilembu ya :D

      Hapus
    5. terima kasih kang,mani bebeakan muji teh.iya itu artisnya kang palig ganteung sendidri. \o/

      Hapus
    6. Kepingin buat sih, tetapi aku sudah terlalu mantab pada komentar asli bawaan blogger nih... dan sedikit kostum dengan hasil yang maksimal, gak percaya ? cobain aja. :D :D :D

      Hapus
    7. percaya deh,saya mau bikin cara komentar sobat namun yang di kasih bukan yg di pki sobat.bagi dong...

      Hapus
  2. wah jadi enak'y mas bisa berderetan jadi bisa naik turun heheheh,. trmksih mas ilmu yang telah di bagi2 kan

    BalasHapus
    Balasan
    1. ya mas,kaya tangga ya,sama-sama masbrooo..

      Hapus
  3. Nyimak aja sobat. Masih belum niat ngubah template :)

    BalasHapus
    Balasan
    1. Oh ga apa-apa sob silahkan bebas ko.

      Hapus
  4. wah mantap ni sob, boleh dicoba juga!

    BalasHapus
  5. ea nih...mas kya nya gi byk di pke sama kalabgan blogger thread model ini... :)
    kapan2 boleh juga ta coba :)

    BalasHapus
    Balasan
    1. betul kang,kalau yang inimah efeknya saja.jadi hanya mengurangi tingkatan komentar saja.

      Hapus
  6. saya pengin yang default blogger kaya gini sob, tapi kayanya belum ada yah...

    BalasHapus
    Balasan
    1. kayaknya belum ada,ntar juga para modifikasi blogger pasti memakainya.mudah-mudahan saja.

      Hapus
  7. mau balesin komentar yang pertamax, geuningan teu tiasa nya; kang, tapi ketang sugan koneksi modem sayah nu lemot, teuing atuh, nupenting saya teu tiasa balesin komentar nu eta...titik
    ngkin mun tos tiasa bakal balik deui kadieu...
    #ngoloyor bari baeud....hehehe

    BalasHapus
    Balasan
    1. oh mau bales kang zaflak,tidak bisa atuh kang,inimah kan cuman efeknya saja jadi untuk membalas secara perorangan tidak bisa,jadi harus yang asli thread comment wordpress nya,begitu kang hatur nuhun.

      Hapus
  8. met malem sob ....hehehe nyimak aja deh :)

    BalasHapus
  9. hehe keren juga sobat, tapi kalau kita terus berkomentar, apa nggak makin sempin tuch ruang komentarnya hehehe.

    tak simpan dulu dech sob tipsnya, ntr kalau pas ada waktu akan saya coba coba dech hehehe makasih sobat.

    BalasHapus
    Balasan
    1. ya pasti makain sempit ini namanya efek dari pengurangan dari induk komentar makin bertambah yang membalas di bawahnya maka makin kecil kotaknya,efek ini efek dari thread comment namun beda dengan thread comment yang asli.ini hanya efek saja.

      Hapus
  10. Kalo ini sih, bukan sederhana lagi sob, tapi luar biasa, hehe

    BalasHapus
    Balasan
    1. Ah masa sih mas,terima kasih.

      Hapus
  11. kunjungan pagi,script nya saya simpan dulu sob,terimakasih

    BalasHapus
    Balasan
    1. mangga di simpan saja kang buat latihan.

      Hapus
  12. pagi sobat...alhamdulillah saya juga sudah pakai threaded comment....saya minta izin sob follow blognya, kalau ada waktu kesebelah juga yaa jalan jalan dan follback....

    BalasHapus
    Balasan
    1. terima kasih sob,insya Allah.

      Hapus
  13. Tampilan kotak komentarnya jadi lebih bagus lagi nih sob....

    BalasHapus
    Balasan
    1. ya lumayan sob,rada-rada cantik dan menarik walaupun bukan asli thread comment.

      Hapus
  14. Sedang kunjungan balik, eeh ada yang perlu dicoba nih...!

    Salam blogger

    BalasHapus
    Balasan
    1. Salam blogger dan salam blowalking saja terima kasih info dan kunjungan baliknya.

      Hapus
  15. Balasan
    1. Terima kasih sob,yang keren yang membuatnya barangkali sob,he...he...

      Hapus
  16. .. wachhhhh,, bagus nich model comment nya. lebih bervariasi. he..86x ..

    BalasHapus
    Balasan
    1. yah lumayan sob buat memperindah walaupun hanya sedikit.

      Hapus
  17. wah mantap ini gan, caranya memang sederhana sekali gak terlalu payah, tapi hasilnya sangat bagus dan mantap.
    ini memang sangat cocok buat blog
    terima kasih sudah berbagi kawan

    BalasHapus
    Balasan
    1. sama-sama pak,silahkan di coba saja mudah-mudahan bermanfaat.

      Hapus
    2. Lumayan nih, tapi aku sudah mantab sama sistem komentar aku, makasih sharingnya kak ?

      Hapus
  18. wah keren gan.. thanks ya.. kapan2 mampir http://nandarious.blogspot.com/

    BalasHapus
  19. mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..

    BalasHapus
  20. ikut simak saja mas, entah mau koment apa hehehe

    BalasHapus
  21. terimakasih mas, sekarang udh saya terapkan di my blog dan berhasil. Niceee!!

    BalasHapus

Sempatkan Waktu Untuk Berkomentar
Komentar anda salah satu penunjang keberlangsungan blog ini.
WARNING!!!! jangan meninggalkan link hidup/Spam,Atau sejenisnya.
Terima kasih atas supportnya.

Random post

Entri Populer

Archive