Cara jitu dan cepat memodifikasi kotak komentar (comment-page)

Monday, August 27, 2012

Cara jitu dan cepat memodifikasi kotak komentar (comment-page)

Tutorial onlineku.Jika anda merasa bosen dg kotak komentar bawaan blogger dan ingin memodifikasinya agar lebih cantik dan enak di pandang mungkin trik berikut saya rasa sangat jitu serta hasilnya sangat ok dan mantabssssss...he..he..he..

Seperti screenshot berikut:

Langkah pertama anda pergi ke Dhosbor=>Rancangan/Dsign=>Edit Html,Kemudian cari code CSS lebih kurang seperti 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;

}

Langkah selanjutnya jika sudah anda temukan code css yang mirip seperti di atas lalu anda hapus code yang mirip di atas tersebut dan ganti dg code yang di bawah ini:

/* Comments
---------------- */
#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 #0251FA;
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 #0251FA;
border-right:1px solid #0251FA;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
border-bottom:1px solid #0251FA;
border-left:1px solid #0251FA;
border-right:1px solid #0251FA;
border-top:1px solid #0251FA;
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;
background:#09adec;}
.deleted-comment {
color:gray;
font-style:italic;
}

Selanjutnya Save Tample anda dan selesai.

Ket:untuk lebih menarik sesuai dg keinginan anda atau agar cocok dg temple yang anda punya silahkan ganti code warna seperti yang saya kasih tanda merah
Mungkin anda mau cek kualitas tample blog anda klik di SINI saja untuk lebih jelasnya.

Judul: Cara jitu dan cepat memodifikasi kotak komentar (comment-page); Ditulis oleh Unknown; Rating Blog: 5 dari 5