36 Cara Memodifikasi Formulir Komentar Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

modifikasi formulir komentar blogger

Bagi sebagian desainer membuat formullir komentar web tampil cantik dan unik sangat mudah. Tapi bagi sebagian orang atau blogger mungkin hal itu merupakan perkara yang sulit atau tidak mungkin. Tapi hari ini InsyaAllah hal itu bukan hal yang mustahil lagi bagi blogger karena kita bisa mendapatkan berbagai tutorial yang dapat memandu kita step by step mewujudkan harapan kita membuat dan menyesuaikan formulir komentar blogger sesuai keinginan kita, dengan cara terbaik hanya dengan sedikit penambahan CSS dan HTML.

Silahkan lihat beberapa contoh berikut:

Menggunakan background warna:

modifikasi formulir komentar blogger

Menggunakan background image/ gambar:

  modifikasi formulir komentar blogger

modifikasi formulir komentar blogger

 modifikasi formulir komentar blogger

Menggunakan background warna dan image:

modifikasi formulir komentar blogger

Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode di berikut: (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)

<div class='comment-form'>

4.Ganti dengan kode berikut:

<div id='ib-form'>

5. Tambahkan kode CSS berikut diatas ]]></b:skin>

#ib-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Sedikit penjelasan tentang bagian-bagian penting pada kode CSS di atas untuk membantu sobat menyesuaikan tampilan formulir komentar sesuai dengan keinginan sobat:

Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a

Berikut adalah rincian untuk setiap bagian dari kode CSS diatas 
1. Kustomisasi Untuk Mode Aktif

#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini

* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat

* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.

* padding: jarak antara border dan teks

* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"

* width:95%;height:250px; Lebar dan tinggi formulir komentar

2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar 
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.


3. Kustomisasi Untuk Link Warna
#ib-form a

Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.

Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?

Oya masih ada pesan sponsor lagi, membuat formulir komentar dibawah postingan lihat disini, kalau ingin memodifikasi tampilan komentar admin agar berbeda dengan pengunjung blog, lihat disini

Pingin buat scroll pada daftar komentar yang panjang? Lihat disini. Mengatasi kolom komentar yang bermasalah, lihat solusinya disini yuk!

Screnshot sample image dua dan tiga saya ambil dari blog sobat blogger Rizky. Makasih ya! Yang lain dari blog eksperimen saya sendiri.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

36 komentar :

  1. Tutorial yang seperti ini yang sangat bermanfaat buat orang lain. Benar-benar seperti nama blog ini, "INDAHNYA BERBAGI"

    Ini maksudnya untuk mengcustom template komentar bawaan blogspot ya? Kedepan, jika tidak keberatan dan saya tak merepotkan, saya request artikel tentang cara buat Form Contact di blog. Terima kasih

    BalasHapus
  2. Benar benar gudangnya ilmu mba blog ini, makasih sudah berbagi.

    BalasHapus
  3. Kalau yang scroll saya sudah coba dan berhasil. Tetapi saya kesulitan menghilangan kotak komentar pada poting yang belum mendapat komentar, Gimana ya Ukhti...caranya?, saya otak-atik HTML nya gagal terus ga nemu-nemu.

    Maksud saya begini, kalau tulisan saya belum mendapat komentar, saya tidak ingin ada kotak komentar kosong.

    Terima kasih.

    BalasHapus
  4. terima kasih infonya sangat berguna

    BalasHapus
  5. keren sob blog q juga dah tak pasang

    BalasHapus
  6. Asalamualaikum,

    Saya sebenarnya bukan penggemar blogspot. Tapi tulisan di atas sungguh menarik. Kapan2 saya akan menggunakan teknik di atas jika saya ngeblog dengan blogspot.

    Semoga banyak orang yang akan mengambil manfaat dari tulisan-tulisan Mbak Amtullah. Amin!

    Salam.

    BalasHapus
  7. trik ini yg nemuinnya orang pakistan...aaahhhh

    BalasHapus
  8. @ Diptara.Com: Untuk request form contact admin blog insyaAllah. Tapi di web Anda khn dah ada ya?
    @ Sepwawan: Terimakasih apresiasinya.
    @ Yuda: Sy msh krg ngerti, maaf!
    @ alfaiz, rizky: makasih
    @ Anis: Wslmun'alaik. Amiin
    @ Beben: Tau aja, tapi yg background warna bukan (pasti anda tau jg) krn dipost itu sy liat anda komentator pertama?

    BalasHapus
  9. Begini Mbak, Saya memakai template blogspot modern (bukan template classic), setiap artikel yang belum ada komentarnya selalu ditampilkan kotak komentar kosong.
    Maksud saya bagaimana cara/tip untuk menghilangkan formulir komentar (kotak komentar) di bawah posting saya apabila artikel yang bersangkutan belum ada komentarnya.

    Terima kasih sebelumnya (maaf kepanjangan)

    BalasHapus
  10. Maaf, maksud saya bukan formulir komentar, tetapi kotak untuk menampilkan para komentator.

    Kotak tersebut selalu tampil walaupun tidak ada komentaor, jadi hanya berupa kotak kosong.

    BalasHapus
  11. NAIS SHARE MAS. TAPI KAYAKNYA BIKIN LOADING BLOG LAMA.

    BalasHapus
  12. @ Yuda, ntr sy cek blog anda, biar lebih jelas seperti apa yg dimaksud?

    @ Ryan: tdk bikin load page lama hanya nambah dikit CSS kok.

    maaf sy wanita seorang muslimah bukan laki. Lihat di profil! Amatullah artinya hamba Allah wanita dari bahasa arab, sama dgn abdulullah bg seorg muslim.

    BalasHapus
  13. Wedew Keren Gan Triknya..Langsung Praktek ah.
    Dan Baca Selanjutnya..

    BalasHapus
  14. Komentar media untuk pembaca mengirim kesan pesannya.apalagi skg bisa diubah2 bentuknya,dapat menambahkan kita untuk komen..

    BalasHapus
  15. Makasih infonya bermanfaat....

    BalasHapus
  16. aku paling seneng deh kalo modif2 kotak komen, ukh... hahaha...

    tp kadang suka ribet sendiri :p

    ada ga yg abis komen trus ada replynya langsung di situ? *usul ya.. kalo bisa... :p

    syukron, ukhti...

    BalasHapus
  17. @ ducky: oke, insyaAllah pada postingan berikutnya saya bahas trik menambahkan button reply pada daftar komentar

    BalasHapus
  18. wah keren bisa di coba
    terima kasih tutorialnya
    aemoga sukses

    BalasHapus
  19. mantep.... langsung saya praktekkan... makasih... hhe

    BalasHapus
  20. saia coba, tapi kenapa gag bisa ya?

    BalasHapus
  21. mas, kok ada scrolnya ya? biar cm kotak saja, (tanpa scroll), gmana? trs ngatur box comment-nya biar di tengah, bgmna?

    terimakasih

    BalasHapus
  22. Misi Gan, mau kenalan. Aq newbie Gan, maksih banget tipsnya. Nanti aq praktekin semua tips Agan yg blm terpasang diblog aku.

    Gan, mau nanya, cara nongolin forum comment gimana?

    Makacih....

    BalasHapus
  23. Sip.. makasih mbak tutorialnya...
    Udah berhasil..

    Oiya untuk memberikan nomor pada comment nya gimana ya mbak?

    BalasHapus
    Balasan
    1. Sama-sama, terima kasih juga apresiasinya. InsyaAllah cara memberikan penomoran pada komentar akan saya posting pada kesempatan yang lain.

      Hapus
    2. Oya mbak...
      Kalau mengembalikan format komentar Blog yang sudah dimodifikasi, gimana ya?

      Hapus
    3. Hapus saja kode kode yang telah dimasukkan/ditambahkan dan kembalikan kode semula yang anda telah ganti dengan kode yang baru. Kembali ke tutorial yang pernah anda ikuti. Lebih mudah lagi jika setiap kali ingin mengedit template anda membackup dulu template anda, jd jika tutorial tidak berhasil diterapkan atau anda kurang suka dengan tampilan barunya anda bisa mengembalikan tampilan lama blog anda.

      Hapus
    4. Iya klo yang editan saya sendiri, saya udah ada back up nya mbak... cuman karena ini bawaan template... dan code-code nya agak berbeda, jadi cukup bingung juga bagian mana yg harus dihapus utk mengembalikan ke default nya. Bisa dibantu mbak? Klo bisa nanti saya kirim HTML ke email mbak. Makasih dan maaf merepotkan.

      Hapus
  24. cara membuat sudut pos menjadi melengkung ketika diarahkan mouse gimana yaaah ;-(

    BalasHapus
  25. Visit Back Mbak
    http://gifzt-modder1.blogspot.com/

    BalasHapus
  26. knapa punya sy tak bisa di terapin? pas di coba pake template bawaan blogger bisa....apa mungkin gara2 templatenya? soalnya sy pke template artisteer

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!