Merubah Lebar Kotak Komentar blog

Apakah lebar kotak komentar blogmu tampak kurang serasi dengan lebar halaman posting kamu? Kotak kopmentar default biasanya lebih kecil dan tidak seimbang dengan lebar halaman post.Nah,,agar posisi lebar kotak komentar bisa serasi maka kita perlu sedikit merubah kode htmlnya. Dibawah ini adalah trik Merubah lebar kotak komentar blog.

Untuk contoh lihat kotak komentar di blog ini.

Berikut langka-langkah nya:
=>Login ke blogger dengan ID kamu »»

=>Klik Tata Letak »» Klik tab Edit HTML »»

=>Klik tulisan Download Template Lengkap untuk mem-backup template awal untuk antisipasi kegagalan proses»»

=>Jangan lupa Centang kotak kecil di samping tulisan Expan template Widget »» Tunggu hingga proses selesai.

=>Cari kode di bawah ini;(Belum tahu caranya?tanyain sama mbahmu..
..nih...tekan key F3 atau Ctrl F)

<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 dan ganti kode di atas dengan kode berikut:

<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>

=>Sesuaikan ukurannya apabila ada perbedaan height(kode warna biru) pada kode pengganti dengan kode pertama.

=>Selanjutnya tambahkan kode CSS di bawah ini di atas kode ]] > </b:skin>

div.comment-form-block{
width: 420px; /* Untuk merubah ukuran sesuai keinginan */
margin: 0 auto;
}
div.comment-form-block p{
color: #000;
font-family: 'Georgia';
font-size: 14px;
text-align: left;
}

=>Perhatikan kode yang berwarna biru di atas,rubah dan sesuaikan menurut keinginanmu.

=>Simpan Template dan lihat hasilnya

Mudah kan?

Semoga bermanfaat.