Thread Comment Pyramid dengan CSS

Assalamualaikum Sobat. kali ini saya akan membagikan suatu trik yang cukup sederhana. sebut saja "Cara Membuat Thread Comment Pyramid'. Saya udah lihat-lihat ke blog lain, Banyak yang udah pakai ini dan banyak yang udah bagikan ini.Trik ini cukup mudah sob, hanya menambahkan Cssnya aja dan langsung jadi.Langsung aja ya sob.

Cara Membuat Thread Comment Pyramid
- Masuk Ke Menu Edit Template dan Cari Kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode  ]]></b:skin>

/* Efek thread-comment pyramid hanya dengan CSS
* Level pyramid dibuat dengan cara menuliskan margin-left dan right dengan nilai yang sama
*/
.comments .thread-toggle {
margin-bottom:5px;
}
.comments .comment-thread.inline-thread .comment {
border-right:4px solid #FF9100; margin:0 0 0 0; /* Level 7+ */
}
.comments .comments-content .inline-thread .comment:nth-child(6) {border-right:4px solid #FF0000; margin:0 0 0 0;} /* Level 6 */
.comments .comments-content .inline-thread .comment:nth-child(5) {border-right:4px solid #0000FF; margin:0 3% 0 3%;} /* Level 5 */
.comments .comments-content .inline-thread .comment:nth-child(4) {border-right:4px solid #7B00FF; margin:0 6% 0 6%;} /* Level 4 */
.comments .comments-content .inline-thread .comment:nth-child(3) {border-right:4px solid #B300FF; margin:0 9% 0 9%;} /* Level 3 */
.comments .comments-content .inline-thread .comment:nth-child(2) {border-right:4px solid #FF00DD; margin:0 12% 0 12%;} /* Level 2 */
.comments .comments-content .inline-thread .comment:nth-child(1) {border-right:4px solid #FF0000; margin:0 15% 0 15%;} /* Level 1 */

 - Simpan Template Sobat

Gimana? Cukup Jelas kan.Saatnya saya pamit undur diri dari hadapan anda.
Sekian dan terimah kasih..
Sampai jumpa lagi dipost berikutnya yah :D

~Wassalam


Sumber:mdf

Tweet