Membuat Efek Thread Comment Berrtingkat hanya dengan CSS

Thread


Membuat Efek Thread Comment Berrtingkat, kali ini saya akan berbagi sedikit tutorial membuat efek thread comment bertingkat Blogger hanya dengan CSS.
Tutorial kali ini sebenarnya hampir mirip dengan tutorial dari mas Taufik Nurrohman tentang widget popular post berwarna warni, karna didalam CSS nya terdapat kode nth-child(1-6) , kode tersebutlah yang dapat membuat efek tampilan berikutnya berbeda dari tampilan utama nya, itu setahu saya.

oke, dalam penerapannya cukup mudah, silahkan salin kode dibawah ini dan letakkan diatas ]]></b:skin>


/*!
 * Membuat Efek Thread Comment Berrtingkat 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 */


Selesai, simpan template anda.
Silahkan atur warna bacground color pada CSS .comments .comment-thread.inline-thread .comment sesuai kebutuhan.

20 Responses to "Membuat Efek Thread Comment Berrtingkat hanya dengan CSS"

  1. ijin praktek bagus buat blog ane nie

    ReplyDelete
  2. mantep tuh gan
    gan
    klo bikin relate post berjalan tapi ada 2 gmana tuh?
    soalnya pernah nyoba ada 2 yang satunya malah kagak gerak

    ReplyDelete
  3. Mantap Nie.Hanya Dengan Sentuhan Css Saja Sudah Menghasilkan Thread Koment Bertingkat :D

    ReplyDelete
  4. wow keliatannya keren juga tuh,
    ane mao pasang diblog ane kira" support kaga ya :D

    ReplyDelete
  5. Izin prakteknya gan. Bosen juga nih sama tampilan komentar yang seperti biasa. Semoga berhasil :D

    ReplyDelete
  6. Nice Post Gan
    Back : dhack.co.vu

    ReplyDelete
  7. ini untuk kometar bawaan blogger ya, kreatif gan dengan menambahkan nth-child sperti itu. Cukup pakai CSS aja cukup, tidak peru ribet2 :D

    ReplyDelete
  8. wah ini dia tutorial yang ane cari2 selama ini....
    praktekkin ah buat blog ane....

    ReplyDelete
  9. wah keren sob Membuat Efek Thread Comment Berrtingkat hanya dengan CSS thanks artikel sobat sangat membantu

    ReplyDelete