English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

.::Daftar Isi::.

.::You Follow I Follback::.

Rabu, 16 Maret 2011

Cara Mudah Modifikasi Kotak Komentar

Tutorial kali ini akan membahas bagaimana merubah tampilan kotak komentar blog anda. jika kotak komentar anda terlihat rapi dan menarik maka pengunjung akan selalu meluangkan waktunya untuk berkomentar di postingan anda. kali ini saya akan memberitahu cara memodifikasi kotak komentar yang simpel.


Tampilannya Akan Seperti gambar Di Bawah Ini:

Caranya cukuplah mudah:

1. Masuk Ke Rancangan>> Edit HTML

2. Cari kode yang mirip dengan kode di bawah ini
/* 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;
}

3. Ganti kode diatas 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;
}

4. Kode yang bercetak tebal diatas "#B4F4FF" adalah warna block dari header masing-masing komentar, jadi rubahlah sesuai dengan keinginan anda.

5. Kemudian Simpan Dan Lihat Hasilnya


Reaksi:

5 komentar:

blogwalking here
visit back please
Jaringan Komputer™

Untuk Tukar Link Silahkan Klik Link Berikut Ini klik di sini


thx 4 visit

muantep tenan, , :iloveindonesia

:kiss tutor yang bagus gan n blognya juga keren, sampai terbrngong aku melihat tmpilan blog agan yg rapi n keren in, salam kenal n happy blogging aj gan.. :recsel

Halo mas, maaf nih, kenapa di blog ane gak ada kode seperti ini : #comments h4 {, dan yg mirip2 gitu, kenapa ya?? Ane jadi gak bisa modif kotak komentar ane deh, huhuhu

@Fahri Samudra Beda jenis template kali gan, coba baca postingan ini ,mudah2an mencerahkan :matabelo .maaf kang admin, bkn nya mau nyepam, tp sharing :malu:

Posting Komentar