Cara Memodifikasi Kotak Komentar

Oke deh folks (gayanya cuy)sekarang kita balik lagi ke tanktop,eh,salah tutorial.Kali ini,aku memberikan tutorial yang agak sederhana namun menarik.Yap,seperti kita tau,template minima yang disediakan oleh blogger kotak komentar pengunjung-pengunjung hanya begitu-begitu saja.

Bingung?Begini loh,kalo kita memilih template minima,kayak punyaku ini komentar dari pengunjung tampilannya cuma standar saja.Template lain juga,namun bagi master blogger dia bakalan mengedit habis-habisan template minimanya.

Nah,biar lebih bergairah menarik,kita buat seperti gambar dibawah ini.

Caranya mudah saja.Cukup ikuti tutorial berikut.

1.Masuk ke blogger-->Layout-->Edit HTML
2.Expand template widgetnya di centangin
3.Cari kode CSS yang hampir sama seperti yang dibawah ini (kode tiap template 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;

}

Kemudian hapus kode berwarna merah diatas dan ganti 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;
}

Nah coba lihat hasilnya, semoga bermanfaat

Artikel Menarik Lainnya:

Ingin Artikel Bujang Riau di kirim ke Email Anda GRATIS !!! Masukkan Email Anda Disini: