Membuat Efek Thread Comment Berrtingkat hanya dengan CSS

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.

Tweet