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

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

Related Posts by Categories