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>
Silahkan anda sesuaikan sendiri. Semoga bermanfaat
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 CSSKode yang berwarna biru merupakan kode warna untuk border kanan.
* 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 */
Silahkan anda sesuaikan sendiri. Semoga bermanfaat
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.