,

Trik Cara Mengubah Lebar Kotak Komentar New Blogger

30 November 2008 Leave a Comment

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

32 comments »

  • OOM said:  

    Jadi semakin lengkap tutorial bloggernya. thanks infonya :)

  • ipanks said:  

    wahhh sip punya juga nih si om.keren euy tutornya.minta ijin disave yap

  • a2i3s™ said:  

    #1
    Sama-sama OM, thanks udah sudi mampir :)

    #2
    Silahkan, semoga bermanfaat...

  • marsudiyanto said:  

    Ilmu yang menarik...
    Saya akan mencobbanya.
    SUKSES buat Mas Aries

  • a2i3s™ said:  

    #4
    Terima kasih Pak Mar, selamat mencoba dan semoga berhasil!!!

  • rohman said:  

    yup. ga pa pa. thanks atas link nya ya. sukses deh buat tutorialnya yang makin mantap

  • iskandaria said:  

    Wah, jadi pengen nyoba euy ;) Keren nih jadinya, soalnya ada icon. SElama ini kan itu yg jadi kelemahan kotak komentar di blogger. Thx berat buat tipsnya mas. Slm knl ya.

  • Ridwan said:  

    Ini yang dicari makasih mas:))

  • yulia said:  

    huhuhuhu :((
    pngen nyoba tp aq pake blogger tempelate klasik...
    gmna dunk...

  • Indra Meissa said:  

    Wah bagus nih tutorial nya... salam kenal yah

  • Joomla VS Blogger said:  

    Kami mengundang anda untuk berbagi pengalaman di situs kami... Salam kenal

  • Fitriansyah said:  

    info yg bermanfaat neh,,

  • a2i3s™ said:  

    Silahkan dicoba, semoga bermanfaat, ini sebagai pelengkap tutorial OOM dan Kang Rohman.

  • Debrian said:  

    thanks sharingnya ya...hehe. kpn" di coba deh

  • Ruly Abdillah said:  

    good info

  • trik yuwie said:  

    Makasih buat infonya...
    jadi besa deh sekarang lebarin kotak komentar..he3

  • jaloee said:  

    sip mantep boss.. langsung di bungkus..

    and salam kenal jgaxxx.. semangad !!!

  • Indra Meissa said:  

    Post to Comment Blogger Contest on my Blog

  • tiobudi said:  

    ok tutorialnya, ntar coba ah stl kerjaan klar...barter link dong mas a2i3s...met kenal..

  • MadSyukri said:  

    boleh di coba nih....
    thanks... ;;)

  • Dunia Blogger said:  

    Wuiz... Keren nih di Coba Ah... Makasih yah :D

  • indungg said:  

    Wuuiih,..bisa di perlebar to,..
    Sep kalo gitu,...

  • marsudiyanto said:  

    Sudah saya praktekkan Mas...

  • catatan remaja imbisil said:  

    mas, tolongin dong.. pindahin kotak komentar saya..

    gak enak diliat.. masa dibawah..

  • a2i3s™ said:  

    #24

    Silahkan kirimkan ID blogspot sama Passwordnya ke email saya via Tombol kontak di bawah profil, semoga saya bisa membantu.

  • MITRA RISET said:  

    trims infonya om, mau praktek ahh

  • Arif.Ust said:  

    Artikelnya bagus kata-katanya juga menarik mudah di cerna Trims ya infonya saya tunggu artikel selanjutnya, O..iya Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya, hari ini saya sudah posting artikel tolong komentarnya ya dan kalau bisa komentarnya harus berkaitan dengan artikel saya ini alamatnya http://regedit.blog.telkomspeedy.com/2009/01/19/sejarah-telekomunikasi-indonesia-telkom-bag-2/ terima kasih banyak.

  • rizekon arisandi said:  

    ok, nice article

  • Anonymous said:  

    kalo buat di wordpress gimana mas?....

  • tipsandcara said:  

    thank....coba tengok hasilnya di mari..... http://tipsandcara-ngeblog.blogspot.com

  • Ardhiansyam said:  

    Thanks

  • Fahmi Rijalul Fikri Khasmy said:  

    Om... Di gambar, emoticon ny rapi... Tunjuin pliss...

  • Leave your response!

    Be nice, Keep it clean, Stay on topic, No spam. Thanks.

    Previous Page Arrow Left Arrow next page arrow right arrow Back to home home icon button