Membuat Thread Comment Pyramid

Untuk kesempatan kali ini saya akan memberikan tips bagaimana cara memebuat thread comment seperti piramida meskipun tidak begitu menarik, ini merupakan hasil modifikasi dari postingan saya sebelumnya tentang "Memebuat thread comment bertingkat". Disini saya hanya mengatur margin left dan right saja dengan nilai yang sama dan memberikan warna border kanan dengan warna yang berbeda, contoh seperti gambar diatas.
Untuk penerapanya sangat mudah, berikut langkah-langkahnya:
1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini 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 */

Kode yang berwarna biru merupakan kode warna untuk border kanan.
Silahkan anda sesuaikan sendiri. Semoga bermanfaat

Judul: Membuat Thread Comment Pyramid; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts