CARA MEMODIFIKASI THREADED COMMENT
CARA MEMODIFIKASI THREADED COMMENT – Bagaimana cara memodifikasi tampilan threaded comment sehingga memiliki posisi avatar selang seling dikanan kiri? Ikuti saja tutorial dibawah ini. Untuk sebagian orang yang ingin tampilan blognya berbeda dari yang biasanya, diperlukan keahlian yang lebih dalam hal pengetahuan tentang css. Karena ini merupakan modal dasar untuk bisa memodifikasi segala tampilan yang ada di blog kamu.
 |
| Threaded Comment |
Dan untuk bisa memodifikasi tampilan threaded comment ini kita perlu sedikit pengetahuan tentang css pseudo class :nth-child(n). Fungsi dari :nth-child(n) ini adalah untuk merubah tampilan div, li, span pada urutan ke-n. Jadi kamu bisa dengan mudah mengotak-atik style css yang ada pada urutan ke-n hanya dengan menggunakan pseudo class ini.
Untuk menentukan urutannya kamu bisa memodifikasi pada bagian n-nya. Hayo inget-inget lagi pelajaran matematika tentang masalah barisan. Ada barisan bilangan ganjil, ada juga barisan bilangan genap dan juga ada pula yang lainnya. Setiap barisan ini memiliki rumusnya masing-masing misalkan:
n : untuk barisan bilangan 1,2,3,4,5, — ,n
2n : untuk barisan bilangan 2,4,6,8,10, — , 2n
2n-1 : untuk barisan bilangan 1,3,5,7,9, — , 2n-1
note: pada css ini nilai n=1;
Nah sekarang bisa toh untuk memodifikasi bagian n-nya, lalu kita lanjutkan pada cara pemasangannya di kode css. Di tutorial ini kita akan membuat tampilan avatar yang letaknya kanan-kiri, jadi kita harus menggunakan rumus letak-n yang berbentuk 2n atau 2n-1 terserah kalian mau pilih yang mana. Ini hanya akan berefek pada posisi pertama dari style yang akan di modifikasi.
Berikut ini tampilan default dari threaded comment kamu bisa mengganti tampilan comment yang lama dengan mengikuti tutorial yang ada di artikel KELEBIHAN MENGGUNAKAN THREADED COMMENT
 |
| tampilan threaded comment |
Untuk bisa memodifikasi tampilan threaded comment ini, ada beberapa style utama yang perlu kita rubah yaitu:
li
.avatar-image-container
.comment-block
span.datetime
cite.user
Biar ringkes langsung kita taruh :nth-child(2n) atau :nth-child(2n-1) pada bagian li. Untuk element style yang lainnya di sesuaikan, ubah tampilannya berlawanan dengan css tampilan default. Yang tadinya gambar avatar di kanan kita rubah jadi di kiri margin dan paddingnya juga menyesuaikan. Berikut ini contoh sytle css tampilan threaded comment yang saya gunakan:
.comment-thread li:nth-child(2n) .avatar-image-container {
float:right;
border-radius: 5px;
border: 1px solid #FF7A00;
}
.comment-thread li:nth-child(2n) .comment-block {
margin: 0 48px 0 0;
position: relative;
}
.comment-thread li:nth-child(2n) span.datetime {
float:left;
position: relative;
}
.comment-thread li:nth-child(2n) cite.user {
margin-right:10px;
float:right;
position: relative;
}
Margin, padding dan floating kamu atur sendiri sehingga tampilan dari threaded comment yang selang-seling ini sudah sesuai dengan yang diinginkan.
Biar lebih keren lagi dan gak acak-acakan saya mengatur agar tampilan reply dari threaded comment ini hanya dua level atau dua tingkat saja. Dan tidak lupa menghilangkan tombol show hide reply biar jarak div dari komentar ke reply tidak terlalu jauh dan memakan banyak tempat.
CARA MENGATUR JUMLAH LEVEL TINGKATAN REPLY
1. Untuk menghilangkannya kita gunakan kode css display:none; pada style class yang akan dihilangkan. Berikut ini kode cssnya:
.comments .continue {
display:none;
}
.comments .thread-toggle {
display:none;
}
2. Atur margin dan padding dari elemen sebelum dan sesudahnya. kamu bisa menggunakan kode dibawah ini, jika dirasa kurang pas silahkan diotak-atik sendiri.
.comment {
margin-bottom:0px !important;
}
.comment .comment-replies {
margin-top: 0px !important;
padding-top: 0px !important;
}
.inline-thread {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.comments .comments-content .comment {
padding-top:0px !important;
padding-bottom:10px !important;
}
MENGATUR TAMPILAN THREADED COMMENT
Kamu bisa mengatur tampilan bagian dari threaded comment dengan mengganti atau menambah style css berikut ini
 |
| edit threaded comment |
.comment .avatar-image-container {
border-radius: 5px;
border: 1px solid #FF7A00;
}
.comment .comment-content {color: #CFC3B7;
text-align: left;
margin: 5px 0 10px 10px;
padding: 5px 10px 10px 10px;
border: 1px solid #FF7A00;
border-radius: 0 0 10px 10px;
}
.comment .comment-header {border: 2px solid #B62011;
border-radius: 10px 10px 0 0;margin: 0px 0 5px 0 !important;padding-left:10px;color:#CFC3B7;height:17px;}
Demikian CARA MEMODIFIKASI THREADED COMMENT semoga bisa bermanfaat untuk mempercantik tampilan blog kamu. Jangan lupa untuk sering-sering berkunjung ke blog ini ya :D Salam blogger.
