Cara Merubah Kotak Komentar Bertingkat ~ IDAM BASHORI

Kamis, 06 Desember 2012

Cara Merubah Kotak Komentar Bertingkat

12/06/2012 10:34:00 PM IDAM BASHORI 1 comment

Selamat malam sobat,,,,,,,, Setelah sekian lama vakum dari dunia blogger karena sibuk dengan tugas-tugas kuliah yang sangat membosankan dan menguras pikiran akhirnya sekarang bisa lagi berbagi ilmu tentang tutorial-tutorial blog. Untuk totorial kali ini saya ingin berbagi bagaimana cara membuat kotak komentar kalian bisa bertingkat seperti gambar disamping. Ok,,, langsung ke TKP saja biar sobat cepat untuk menerapkannya.

1. Login ke Akun Blogger sobat.

2. Pilih Menu Template.

3. Klik Edit HTML.

4. Klik Lanjutkan.

5. Kemudian centang Expand Template Widget.

6. Cari kode ]]></b:skin> gunakan Ctrl+F untuk pencarian lebih cepat.

7. Copas kode berikut :

/* Efek thread-comment bertingkat hanya dengan CSS
 * 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 */

8. Kemudian taruh diatas kode ]]></b:skin>

9. Klik tombol Simpan.

Nah, sekarang sobat bisa lihat hasil.

Selamat mencoba sobat semoga sukses,,,,,,,,,,,,,,,,, Sampai ketemu lagi ditutorial lainnya!!!

Baca Juga Artikel Di Bawah Ini!!

Tutorial Blog