Dahulu kala permasalahan kotak komentar di Blogspot merupakan salah satu pertimbangan untuk membuat blog di www.blogger.com, pengunjung jadi malas berkomentar dan kurang nyaman karena form komentar tampil berupa Popup, beda dengan blog di www.wordpress.org yang lebih simpel, dengan tampilan kotak komentar berada di bawah postingan.

Namun kabar baik bagi sobat-sobat blogger, pihak Blogspot telah melakukan perbaikan mengenai permasalahan kotak komentar tersebut, sekarang bukan masalah lagi menyematkan kotak komentar di bawah postingan. Permasalahan sekarang adalah bagaimana caranya memodifikasi kotak komentar tersebut agar sesuai dengan yang anda inginkan dan tentunya sesuai dengan template yang anda gunakan.

Untuk referensi bagaimana cara memodifikasi kotak komentar di bawah postingan, Kang Rohman telah mengupasnya di sini, dan apabila ingin menambahkan emoticon pada komentar Kang Agus telah pula membahasnya di sini.

Lho, lantas trik apa nih yang mau a2i3s bahas??! hehe... tenang tenang, OK sekarang a2i3s langsung aja, silahkan anda amati perbedaan gambar kotak komentar di bawah ini:

1. Lebar Kotak Komentar Bawaan Blogspot



2. Kotak Komentar Hasil Modifikasi

Coba lihat perbedaannya, kotak komentar pertama adalah kotak komentar standar, dengan lebar default sebesar 450px, sedangkan pada gambar kedua merupakan kotak komentar yang telah dimodifikasi ukurannya, lebar maupun tingginya dapat disesuaikan dengan keinginan sendiri, maupun mengikuti tampilan template yang anda gunakan. Bagaimana,ingin tau cara merubah lebarnya? silahkan lanjutkan membaca!




Baiklah, udah ngga sabar ya? Silahkan login dengan account blogger anda, lalu masuk ke Tab Layout dan pilih Edit HTML.

Sebelum kita ngoprek-ngoprek kode-kode template, sangat disarankan untuk membackupnya terlebih dahulu. setelah itu, klik kotak kecil dipojok kanan atas editor template yang bertuliskan Expand Widget Templates

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>

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>

Langkah selanjutnya adalah tambahkan kode CSS di bawah ini sebelum kode ]]></b:skin>

div.comment-form-block{
width: 450px; /*silahkan ubah sesuai dengan lebar yg anda inginkan*/
margin: 0 auto;
}

div.comment-form-block p{
color: #000;
font-family: 'Trebuchet MS';
font-size: 12px;
text-align: left;
}

Kode CSS di atas bisa anda sesuaikan dengan keinginan dan selera anda, silahkan rubah nilai angka yang telah saya tandai dengan warna merah.

Simpan Template anda, dan coba lihat hasilnya!!!

Kode CSS yang tidak ditebalkan boleh tidak dipakai, itu sebagai bonus aja, hehe...
Selamat Berkreasi!

Selesai...

Let's Things Free With a2i3s

Thanks to:
Fernando at http://blog.randomnessf1.com

Related Posts