Hiks... setelah membaca beberapa pesan yang masuk ke kotak shoutbox, kotak komentar serta kiriman email, rupanya banyak sekali yang menyukai tampilan dari kotak komentar yang kang rohman pakai yaitu kotak komentar yang seperti ini :
Seperti
biasanya, kalau banyak yang suka pasti kang rohman di berondong oleh
permintaan agar di buatkan tutorial cara membuat kotak komentar yang
seperti gambar di atas. Nah, untuk memenuhi hasrat beliau-beliau ini
maka kang rohman menyempatkan diri untuk membuatkan tentang bagaimana
membuat kotak komentar ini.
Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.
Agar tidak terlalu ngalor ngidul karena sekarang kang rohman punya penyakit males ngetik banyak-banyak, maka langsung saja kepada langkah bagaimana cara memodifikasi kotak komentar ala blog kang rohman.
Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.
Agar tidak terlalu ngalor ngidul karena sekarang kang rohman punya penyakit males ngetik banyak-banyak, maka langsung saja kepada langkah bagaimana cara memodifikasi kotak komentar ala blog kang rohman.
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
- Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.
- Tunggu beberapa saat ketika proses sedang berlangsung.
- Cari kode pada bagian CSS yang seperti ini :
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
- Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}
#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}
#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}
.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}
.commentinfo{
clear: both;
}
.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEPMZL_KVXRBSsfgAznV8LGLPITsVqDL6jv_ldvI9kxZ7f-v-t8fChsUfOvu0wx-33G-PlAv8zZdQj4Nz7fFGPF8No_m2K0Cole_ChsIDOBJtJ0HDcG1g1cvTDrPhobvDHSv9m9dsVL6z/s320-r/comment.gif) no-repeat top left;
}
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEPMZL_KVXRBSsfgAznV8LGLPITsVqDL6jv_ldvI9kxZ7f-v-t8fChsUfOvu0wx-33G-PlAv8zZdQj4Nz7fFGPF8No_m2K0Cole_ChsIDOBJtJ0HDcG1g1cvTDrPhobvDHSv9m9dsVL6z/s320-r/comment.gif) no-repeat top left;
}
- Lihat Ke bagian bawah, dan cari kode yang seperti ini :
Komentar :
ada
Nah itulah tutorial singkat yang anda tunggu-tunggu selama berbulan-bulan, semoga dapat mengobati rasa kesal yang selama ini mengganjal di hati anda.
Selamat mencoba.
1