CARA MEMODIFIKASI KOTAK KOMENTAR BLOGGER TANPA EDIT HTML

Template bawaan blogger memang telah lengkap dengan kotak komentar, tapi tampilannya sangat standar, Jika kalian ingin membuat kotak tampilan jadi berbeda dan lebih user friendly kami mencoba menawarkan trik dibawah ini, mudah saja kok. Hanya perlu menambahkan kode CSS. Tidak perlu HTML lagi apalagi JavaScript, Karena HTMLnya sudah ada pada hampir semua template default atau template asli bawaan blogger (kecuali contempo).

contoh kotak komentar situs_Adel

TEMPLATE TEMPLATE MANA BISA DI TERAPKAN?
Template yang lebih lama seperti template sederhana, awsome hingga template terbaru seperti Notable. Atau template template default dan berbeli yang menggunakan "threaded comment system". atau biasanya di dalam template kodenya ditulis sebagai berikut:

<b:include data='post' name='threaded_comments'/>

Kode diatas bisa saja berbeda pada template template, kalian cukup fokus pada bagian "threaded comment system" saja. Pastikan dan cari saja dengan cara pintas dengan menekan tombol CTRL+F pada editor HTML, baiklah kita mulai.

CARA MENERAPKANNYA.
Baiklah, jika kalian tidak ingin mengedit HTML dan takut penerapannya membuat error, jangan kuatir, ikuti petunjuk dibawah ini.

Masuk ke pengaturan blogger:

1. Pilih Tema.
2. Lalu pada tampilan dasbor terbaru pilih "Customize"
3. Kalian segera dibawa ke bagian "Blogger Theme Designer"
4. Pilih advance atau lanjutan
5. akan muncul daftar menu, scroll ke atas pilih yang paling bawah yaitu "Add CSS" atau "Tambahkan CSS"
6. Masukan kode di bawah ini ke dalam kotak CSS, tampilannya sebagai berikut:

ilustrasi cara kustomisasi kotak komentar blogger

Kemudian copy kode dibawah ini seluruhnya dan pastekan ke dalam kota CSS yang telah kalian buka tadi:

.comments h4 {
font-size: 16px;
}
.comments .avatar-image-container {
max-height: 50px;
width: 50px;
}
.comments .avatar-image-container img {
border-radius: 50px;
border:3px solid #dadada;
width: 40px;
height: 40px;
margin-right: 100px;
max-width: 50px;
}
.comments .comment-block{
border: 1px solid #dadada;
background:transparent;
padding: 10px;
font-size: 14px;
border-radius: 10px 0px 10px 0px;
margin-left: 60px;
}
.comments .comment-block::after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -14px;
top: 16px;
border: 7px solid;
border-color: transparent #fdfdfd transparent transparent;
}
.comments .comment-block::before {
content: ' ';
position: absolute;
width: 0;
height: 0;
top: 15px;
left: -16px;
border: 8px solid;
border-color: transparent #dadada transparent transparent;
}
.comments .comment-header,
.comments .comments-content .comment-thread,
.comments .continue a {
font-size: 14px;
}
.comments .comment-header {
background: #FF69B4;
padding: 5px;
border-radius: 10px 0px 0px 0px;
}
.comments .comment-content {
font-size: 14px;
}
.comments .comments-content .comment-content {
margin-bottom: 10px;
}
.comments .comments-content .datetime{
font-size: 12px;
float:right;
margin-right: 10px;
padding-top: 5px;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
font-size: 16px;
}
.comments .comments-content .user a,
.comments .comments-content .datetime a {
color: #fff;
}
.comments .comment .comment-actions a {
margin-top: 30px;
background: #FF69B4;
color: #fff;
padding: 5px;
margin: 3px;
}
.comments .continue a {
display:inline;
background: #FF69B4;
color: #fff;
padding: 5px;
text-align: center;
font-weight: normal;
}
.comments .continue a:hover {
text-decoration: none;
background: #FF0000;
}
.comments .comment .comment-actions a:hover{
text-decoration: none;
background: #FF0000;
}

Save template.
Kalau berhasil kalian bisa merobah warnanya langsung dari kota CSS di atas, soalnya punyaku warnanya pasti Pink hi hi hi....Gak percaya? Lihat DEMO
Template yang aku pakai adalah Notable salah satu dari empat template terbaru blogger yang telah di modifikasi. Dan walaupun cara diatas masih menggunakan matode lama, namun masih kece diterapkan ke template model baru dengan layout versi ke-3.

JIKA TERJADI ERROR
Kalau kodenya tidak bekerja kalian dengan mudah menghapus kode yang tadi kalian pastekan ke dalam kotak CSS, kembali saja ke langkah awal begitu melihat blanko CSS yang sharusnya kosong itu masih terisi dengan kode CSS yang telah kalian pastekan tadi, hapus saja semua dan Save kembali template, mudah sekali bukan?

www.editblogtema.net