Cara Memperlebar Kotak Komentar

Seperti posting yang terdahulu dalam membuat area posting kotak terpisah membuat ini dan itu, sekarang saya akan mencoba membahas cara memperlebar kotak komentar. Sebagai contoh saya ambil dari template blog ini, mungkin ada perbedaan dalam kode-kode di template blog kamu!



Silahkan login ke blogger kamu

klik Edit Html

Untuk jaga-jaga Backup template kamu >> klik aja Download Template Lengkap

Dan jangan lupa Centang Expand Template Widget

Cari kode di bawah ini :

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>

Hapus kode di atas dan ganti dengan kode dibawah ini :

<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor'
scrolling='auto' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>

Kemudian tambahkan kode CSS di bawah ini sebelum kode ]]></b:skin>

div.comment-form-block{
width: 587px;
margin: 0 auto;
padding:10px;
border:1px solid #000;
}
div.comment-form-block p{
color: #000;
font-family: 'Georgia';
font-size: 14px;
text-align: left;
}

Silahkan kamu ganti yang warna ungu di atas sesuai keinginan kamu.
Dan CSS di atas masih bisa diedit lagi !
Selamat mencoba ...