Membuat Floating Contact Form Widget Blogger

HaiSob apa kabar? Berikut ini saya akan membahas tentang cara membuat Floating Contact Form untuk Blogspot Blogger. Ini bermanfaat nantinya untuk kamu pemilik blog/web, misalnya ada yang ingin menghubungi kamu karena tertarik dengan blog kamu, misalnya dia ingin bertanya, ingin berbisnis denganmu atau seringkali juga jika ada yang ingin memasang iklan di blog kamu.

Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer. Widget Floating Contact Form ini dibuat langsung dari widget default bawaan Blogspot jadi kamu tidak perlu mendaftar di web-web penyedia widget contact form ini. (Baca juga: Simple and Clean Contact Form Widget for Blogspot)

Custom Blogger Contact Form Widget


Membuat Floating Contact Form Widget Blogger
Contact form with CSS rainbow devider for Widget Blogspot


Cara Memasang Widget Contact Form di Blogger


Kita harus menambahkan widget contact form di blog kita. Caranya, buka Layout ➔ Add gadget ➔ Contact Form. Letakkan di sembarang tempat, contoh disini saya meletakannya di sidebar blog.

Cara Memasang Widget Contact Form di Blogger
Add Contact Form

Selanjutnya kita harus menyembunyikan widget bawaan blogger ini. caranya: Pilih menu Template ➔ Edit HTML
Contact form with CSS rainbow devider Widget for Blogspot
Template - Edit HTML

Kemudian cari kode seperti dibawah ini dan hapus pada beberapa bagian dan sisakan seperti dibawah ini ( tulisan hapus bagian ini itu dihapus juga yah )
  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>
Save Template.

Cara Memasang Floating Contact Form Widget di Blogger


Pilih menu Tata Letak  ➜ Tambahkan Gadget ➔ HTML/JavaScript
Cara Memasang Floating Contact Form Widget di Blogger
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript
Masukan kode dibawah ini:
<!-- floating contact form-->
<style>
.form-parent {width:323px;height:auto;background: transparent url('http://3.bp.blogspot.com/-gvfHlb6JnY4/VPnwlkELmhI/AAAAAAAAKDU/9lgOeCd279E/s1600/contact-button.png') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
Name:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message: <span style="color:red;">*</span><br />
<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
<div id="cc">
By <a href="http://www.haisob.com" target="_blank">GET IT</a>
</div>
</form>
</div><!--Parent-->
<!--All ends here-->
Save widget dan Selesai.

Sekian Cara Membuat Floating Contact Form Widget Blogger. Salam Bloggers.