Membuat Kotak Komentar Berada Di Tengah ...!

Diawali dengan Bismillahirrohmaanirrohiim... Pada postingan kali ini saya akan menjelaskan tentang cara membuat posisi kotak komentar berada di tengah.

Kita semua tahu, Secara default posisi atau letak kotak komentar adalah menempel di bagian kiri. Untuk lebih jelasnya perhatikan kedua gambar dibawah ini :

1. Kotak komentar default



2. Kotak komentar ditengah



kok bisa...? jawabannya bisa, asal kita berusaha dan berdo'a (kaya lagu Rhoma Irama..hehehe). Sebenarnya saya membuat postingan ini atas permintaan salah satu sahabat saya di dunia blogger, berikut kutipannya komentarnya:

emang ngaruh ke pagerank yah?, saya baru tau Lho.
untuk menghiLangkan Langganan entri atom sudah ke TKP dan berhasiL.
saya kepingin kotak komentar saya berada ditengah
(tanpa harus diLebarkan) caranya gimana yah sob?, terima kasih
atas perhatian dan bantuannya.

Untuk menjawab pertanyaan sekaligus permintaan sahabat blogger kita itu, saya akan menjelaskan triknya dibawah ini.

sebelumnya kita pasti sudah mengenal istilah posisi dalam Kode dasar HTML, Yaitu :

== Posisi Kanan (Left)
== Posisi Kiri (Right)
== Posisi Tengah (Center)

Dari penjelasan posisi diatas saja, pasti dibenak kalian sudah pasti terbayang bagaimana membuat suatu widget berada ditengah termasuk kotak komentar kita. Yupppzzz... kita akan menggunakan posisi tengah alias center. Untuk kodenya sendiri seperti ini :

<center>

</center>

** CARA PEMASANGAN PADA TEMPLATE

Setelah mengenal istilah posisinya, sekarang kita tinggal menerapkannya pada kode di template blogger kita. tahapnya sebagai berikut :

1. Login Ke blogger kalian
2. Masuk Ke Rancangan ---> EDIT HTML (centang expand template Widget)
3. Sekarang kalian cari kode berikut :

<div class='comment-form'>
<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 blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup' style='width:100px;height:20px;'/>
</b:if>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>

Untuk mempercepat pencarian kalian gunakan CTRL+F lalu cari sebagian kodenya yaitu kode berikut :

<div class='comment-form'>

4. Setelah ketemu, sisipkan kode diatas diatara kode posisi tadi, sehingga hasilnya akan seperti ini :

<center>

<div class='comment-form'>
<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 blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup' style='width:100px;height:20px;'/>
</b:if>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>

</center>

Catatan : Perhatikan letak kode posisi warna merah yang mengapit kode kotak komentar.

5. Simpan Template kalian
6. Selesai dan lihat hasilnya.

Semoga artikel diatas akan membantu para pembaca khususnya sahabat blogger saya yang mengirimkan komentarnya. Semoga bermanfaat.