Cara membuat Floating contact form widget for blogger

Floating contact form widget for blogger - ini sanggat bermanfaat jika ada pengunjung blog yg inggin menghubungi kamu karena tertarik dengan blog kamu , misalnya dia inggin berbisnis dengan kamu dan ada juga jika ada yg memasang iklan di blog kamu

Widget ini dibuat langsung dari widget deflaut bawaan blogspot jadi kamu tidak perlu daftar di web-web penyedia widget seperti ini . liat contoh gif demonya

WWW.RHM-FILES.TK

Memasang Widget Contact Form

- kita harus menambahkan widget contact form di widget blog,
  Caranya buka halaman layout > Add Gadget > Contact Form . Letakan di sembarang tempat

WWW.RHM-FILES.TK

Kemudian cari code seperti di bawah ini dan hapus pada beberapa bagian dan sisakan seperti di bawah ini
( Tulisan "hapus bagian ini" itu di hapus juga ye )

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'> Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>

Nah sekarang simpan template anda

Lanjut dengan menambahkan kode di bawah ini caranya : 

Tata Letak >> Tambah gadget >> HTml / Javascript  >> Masukan code di bawah ini

 <!-- floating contact form-->
<style>
.form-parent {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTABRjrNdc4Q-Y4IIjD3_JjDy7ExrsiKKWRMOC3LQk031-h54RyLB-pMR__qGJfpNP8QLjvJ3Oh2QqvFea-JKh-iNagldIsAv9uIGsMHh0lPVwtsB9zS47MpF2Rh00L5pF4X-9hRI6x6x/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.blog.seocips.com/2015/09/floating-contact-form-widget-for-blogspot.html" target="_blank">GET IT</a>
</div>
</form>
</div><!--Parent-->
<!--All ends here-->

DEMO

 Jika nanti ada yg mengunakan widget ini maka pesan otomatis akan di kirim ke email gmail blogger anda , Oh ya jika anda tertarik dengan contact form yg lebih sederhana coba baca ini : 

-Membuat contact form sederhana di blog