Rabu, 16 Desember 2009

Cara Melebarkan Kotak Isian Komentar


Bagi anda yang ingi melebarkan kotak isian komentar langsung saja kita praktekkan caranya

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap untuk mem-backup template awal, kemudian centang kotak kecil di samping tulisan Expan template Widget tunggu hingga proses selesai.

Kemudian cari kode di bawah ini, untuk mempermudah pencarian tekan F3
  
 <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>

Jika sudah ketemu hapus kode di atas kemudian ganti dengan kode di bawah 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>

Selanjutnya tambahkan kode CSS di bawah ini sebelum kode ]]></b:skin>
  
 div.comment-form-block{
width: 550px; /*silahkan rubah sesuai dengan lebar yg anda inginkan*/
margin: 0 auto;
}
div.comment-form-block p{
color: #000;
font-family: 'Georgia';
font-size: 14px;
text-align: left;
}

Kode di atas dapat disesuaikan dengan selera anda, silahkan dirubah nilai angka sesuai templat anda. Jadi anda bisa mengatak ngatik sendiri. Simpan Template dan lihat hasilnya

Semoga bermanfaat