Simple Style Comment

Udah jarang update ya, karena pulsa internet habis hehe

Jika anda kurang menyukai kotak komentar bawaan asli dari blogger,saya jamin dalam waktu kurang dari 5 [lima] menit,anda sudah bisa memodifikasinya form komentar tersebut sendiri.

Sebenarnya,tanpa postingan ‘langkah memodifikasi kotak form komentar’ kali ini,jika anda browse di google saja sudah berjibun artikel tentang cara singkat mengubah atau memodifikasi komentar/comments form tersebut.

Hanya saja,disini saya akan sharing langkah cara mengganti/mem-vermak kotak komentar hanya dengan satu jurus saja.

Hasilnya nanti kurang lebih akan seperti ini [klik ajha biar gambarnya gede,hehe]:


Cara Singkat Mengubah Kotak Box/Kotak Form Komentar.


Langkahnya cukup mudah,saya akan ambil contoh dari salah satu template bawaan blogger.
Pertama anda pergilah ke Dashboard»Tata Letak»Edit Html.
Cari kode dalam barisan css anda,yang hampir sama seperti berikut (mengingat template yang berbeda-beda):


/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.2em;
color: $dateHeaderColor;
font: bold 78% Georgia Serif;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.4em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 20px 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 20px 1.5em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}



Jika sudah ketemu,tinggal hapus kode tersebut,dan gantilah dengan kode dibawah ini:


#comments h4 {
color:#666666;
font-weight:bold;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
background:#B4F4FF none repeat scroll 0 0;
border:1px solid #B4F4FF;
font-size:15px;
font-weight:bold;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
background:#EEEEEE none repeat scroll 0 0;
border-color:#CCCCCC #CCCCCC #EEEEEE;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
border-bottom:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}



Kode yang bercetak tebal diatas "#B4F4FF" adalah warna block dari header masing-masing komentar,jadi rubahlah sesuai dengan keinginan anda.Bisa anda ganti dengan tulisan black,white,red,blue,dll.
Bisa juga anda menggunakan kode heksa warna untuk memodifikasi warnanya.

Setelah itu,lalu Simpan.

Komentar

Posting Komentar

• Dilarang berkomentar dengan Kata-kata Kasar/Kotor.
• Dilarang berkomentar SPAM dan Memasang Link Aktif.
• Komentar dengan Link Aktif akan dihapus sesegera mungkin.
• Berkomentarlah sesuai Topik/Artikel.
• Berkomentarlah dengan Sopan.

Postingan populer dari blog ini

Navigator Menu Horizontal

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Asal Usul Blog SITE-XP