Membuat Background Kotak Komentar Lebih Menarik

Membuat Background Kotak Komentar Lebih Menarik, dari judulnya aja udah menarik, tapi cara ini tidak terlalu sulit untuk dilakukan. Sobat blogger pasti bisa melakukannya, tujuan dari membuat background kotak komentar lebih menarik adalah agar kita tidak bosan dengan tampilan kotak komentar yang putih polos. Ada kalanya kita bosan dengan tampilan itu, tidak ada salahnya kita membuat perubahan kan, yang tentunya menjadi lebih baik.

Berikut ini screenshot nya :

Tampilan Sebelum Disentuh Cursor

Tampilan Setelah Disentuh Cursor

Jika sobat tertarik, ikuti langkah-langkah berikut ini :

1. Masuk ke blogger;
2. Klik Perancangan lalu klik Elemen Laman;
3. Klik Expand Template Widget (jangan lupa backup template sobat terlebih dahulu);
4. Kemudian tambahkan kode CSS berikut ini diatas kode ]]></b:skin>

#comment-form iframe{

   background:#ffffff url(http://www.scenicreflections.com/files/STARS_BACKGROUND_Wallpaper_v2zvm.jpg) ;

   border:5px solid #9999FF;

   padding:5px;

   font:normal 12pt "ms sans serif", Arial;

   color:#7EB2AC;

   width:450px;

   height:230px;

   }

#comment-form iframe:hover{

   background:#000000 url(http://cdn.pimpmyspace.org/media/pms/c/cx/xk/kg/star_neon.gif);

   border:7px solid #999FFF;

   }

Jika kode tersebut telah ada, maka sobat hanya perlu memodifikasi elemen yang ada di dalamnya, saya menemukan sebagian template tidak memiliki kode tersebut. Sobat bisa merubah gambar background sesuka hati sobat.

5. Selanjutnya sobat cari kode yang mirip seperti ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>

<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>

6. Kemudian pastekan kode <div id='comment-form'> dan </div> diantara kode tadi sehingga menjadi seperti ini:

<div id='comment-form'>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>

<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>

</div>

7. Langkah terakhir adalah SIMPAN TEMPLATE sobat

Semoga tutorial ini bermanfaat buat sobat blogger.

---

by Facebook Comment untuk Anda!

---

Artikel Terkait

Tutorial Blogger

• Membuat Efek Hover Transparan pada Gambar
• 3 Widget Animated Bird Twitter Follow untuk Blogger, Keren!
• Cara Meng-Upload Gambar Jumlah Banyak Pada Postingan Blogger
• Trik Sederhana Cara Proteksi Gambar di Blog
• Cara Membuat Open New Tab Pada Setiap Link di Blog
• Cara Menghilangkan Link Posting Lama dan Postingan Baru di Blog
• Cara Agar Postingan Blog Tidak Bisa di Copy
• Cara Membuat Efek Zoom Gambar saat Dilalui Kursor
• Cara Membuat Efek Meteor Jatuh di Blog
• Cara Membuat Cursor Diikuti Bintang di Blog
• Cara Membuat Back To Top Dengan Double Click di Blog
• Cara Membuat Link dengan Efek Pelangi
• Cara Mudah Membuat Tampilan Blog/Web Maintenance
• Cara Membuat Efek Link Mengeluarkan Bintang
• Cara Membuat Refresh Otomatis Di Blog
• Cara Membuat Teks yang Di Block Menjadi Berwarna
• Cara Membuat Gambar Berjajar
• Tips Untuk Blogger Pemula
• Cara Memasang Widget Alexa Rank
• Membuat Link begerak bila disentuh kursor mouse
• Cara Mudah Pasang Kotak Komentar Facebook Pada Blogger
• Membuat Judul Blog Bergerak
• Mengukur Seberapa Berat Blog/Web
• Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot

---

---