Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Custom Widget Contact Form Pada Blog

Custom Widget Contact Form Blogger Custom Widget Contact Form Pada Blog – semua pasti sudah tahu fitur widget terbaru dari blogger agar bisa berkontak langsung via email dengan pemilik atau author blog, inilah kemudahan yang diberikan oleh blogger agar penggunanya bisa lebih mudah untuk berkomunikasi didalam sebuah blog dengan menggunakan widget contact form. Walaupun widget contact form memang jarang di tampilkan pada sidebar atau jarang dilihat oleh pengunjung namun tidak salah apabila kita melengkapi blog dengan widget contact form dengan custom yang menarik untuk kemudian bisa dipasang kedalam halaman statis blog atau tempat yang dikehendaki. Memang benar apabila setelah menambahkan contact form dari widget yang disediakan oleh blogger sudah bisa langsung digunakan. Namun tidak ada salahnya juga apabila kita ingin melihat tampilan widget contact form agar bisa menjadi lebih menarik atau sesuai dengan tampilan yang di kehendaki sendiri. Langkah-langkah untuk memasang dan memodifikasi juga cukup mudah, berikut adalah tutorial cara Custom Widget Contact Form Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
Custom Widget Contact Form Blogger 3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.
#ContactForm1 {display:none}
5. Lalu berikutnya kita akan memasang tampilan baru widget contact form, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.
<style>
#contact-wrapper{ width:400px; height:auto; padding: 10px; margin: auto; position:relative; font:12px Arial; }  #mycontactform{ width:400px; padding: 10px; margin: auto; position:relative; } .field{ background:gray; padding:10px; height:50px; width:400px; } .area{ padding:10px; min-height:195px; } #ContactForm1_contact-form-name{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 400px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/highlight.js"></script>

<div id="contact-wrapper">
<form id="mycontactform">
<div>
<div class="field">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
</div>
<div class="field">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="field area">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></div></div></form></div>
6. Langkah terakhir klik Publish.

Sampai sini selesai sudah langkah-langkah untuk Custom Widget Contact Form Pada Blog, dan kini widget contact form sudah terpasang dalam halaman statis blog. Apabila ingin memasang widget contact form tersebut kedalam sidebar maka caranya setelah sampai pada point 5 copy kode tersebut kemudian paste kedalam widget HTML/Javascript. Untuk tinggi, lebar maupun warna background contact form silahkan custom agar lebih sesuai dengan yang di kehendaki.

Berlangganan artikel via email

30 Response to "Custom Widget Contact Form Pada Blog"

Pertama mas andes

Balas

Fresh trus dengan modif widget2 nya

Balas

fresh dan selalu up to date yah mas...

Balas

Dapat pelajaran baru lagi nih mengenai Custom Widget Contact Form Pada Blog, makasih mas Andes :)

Balas

Untung saya sudah menggunakan contact form dari Blogger ini. Asyik banget memang memodifikasi penampilan contact form ini sesuai keinginan kita. :)

Balas
avatar
Anonymous

Nice shared, Sob..thanks!

Balas
avatar
Anonymous

wahh mantepp tuh mas...

Balas

bener banget tuh mas eka, kreatif trs ga ada habisnya...sukses trs faceblog

Balas
avatar
Anonymous

Dapat pelajaran baru lagi nih mengenai Custom Widget Contact Form Pada Blog, makasih mas Andes :)

Balas

owh gitu toh mas .. keren-keren
jadi pangen nyicipin nih ....

Balas

terimakasih kembali hehe

Balas
avatar
Anonymous

alhamdulillah saya udah ngedit, walau gk sekeren yg ini :D

Balas

ane coba-coba dulu gan

Balas

kok dicatat mbak kelamaan atuh hehe...

Balas

monggo dicicipin mas Ruly mumpung masih anget hehe...

Balas

hatur nuhun kang :)

Balas
avatar
Anonymous

semakin hari artikelnya makin dalem nih mas Andes...

Balas

sama kaya yang kemarin ya mas... kontac from juga...??

Balas

sejak awal ng'blog saya ngga pede euy masang beginian, tapinya sekarang mah udah rada pede, tapi masangnya diblog ku yang lain ah...jangan di DESA CILEMBU.

Balas

pelajaran gratisan lagi , top memang mas andes ini..puinter banget

Balas

nyicipin kaya makanan aja yah hahaha

Balas

wih keren ya...bisa modif terus, keren banget mas

Balas

mantab makin keren aja design kontak form nyaa

Balas

saya harus baca berulang-ulang nih untuk paham, baru berani utak atik blog kalau waktu bener2 luang, bila tidak, kalau kacau susah betulinnya....hehehe

Balas

boleh boleh boleh, dicoba kang

Balas

eh ini sama juga ternyata .. simpen dulu, entar balik lagi kalo ada ketinggalan .

Balas

saya sudah peke :) thanks buat infonya

Balas

Saya coba dulu ya mas.

Balas
avatar
Anonymous

in the contact form in the bottom right corner of the site how did you do?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Custom Widget Contact Form Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode