Cara Mudah Menambahkan Widget/Gadget Floating Contact Us Pada Blogspot

Widget/Gadget Floating Contact Sederhana Pada Blogspot

Jika sudah mengetahui bagaimana cara memasang sebuah widget Formulir kontak pada blogspot. Mungkin Anda tidak sama sekali memperhatikan bahwa terkadang penampilan widget tersebut yang anda tambahkan melalui/lewat tambah gadget HTML/javascrip kayaknya kurang wow dan pasti membuat ruang pada blog Anda tidak elegan. Tapi bagi saya sama saja kok. Nah bagaimana kalau Anda menjalankan sebuah blog eCommerce di blog anda dan pelanggan Anda perlu mengirimkan email permintaan cepat untuk menemukan beberapa info yang mereka cari,sedangkan Anda menaruh formulir kontak pada footer. Pasti mereka mencari kesana kemari bukan....?

Salah satu solusi yang paling sederhana untuk masalah seperti ini yakni bagaimanakah membuat sebuah formulir kontak lebih mencolok dengan cara membuatnya melayang/floating. Hal pertama yang perlu kita lakukan adalah silahkan backup template Anda terlebih dahulu untuk menjaga script html pada template anda berantakan, Jadi jika Anda keliru untuk mengikuti petunjuk di bawah ini dengan benar Anda masih bisa

Langkah-langkahnya

Silahkan masuk terlebih dahulu ke Blogger >> Template >> Edit HTML >> Klik di mana saja di template editor HTML dan tekan (CTRL + F), kotak pencarian akan muncul. Sekarang silahkan mencari ]]></b:skin> dan di atas ]]></b:skin> pastekan CSS style sheet coding berikut ini.

<style type="text/css">/* Formulir kontak melayang ----------------------------------------------- */ #czone-contact .ContactForm { margin: 0px!important; } #czone-contact .contact-form-button-submit { max-width: none; width: 100%; height: 35px; border: 0; background-image: none; background-color: #FA411E; cursor: pointer; font: normal normal 13px Open Sans; font-style: normal; font-weight: 400; } .#czone-contact .contact-form-button-submit:hover { background-color: #222; background-image: none; border: 0; } #czone-contact #contact { position: fixed; bottom: 0; right: 6%; background-color: #EEE; color: #555; width: 300px; z-index: 1.0E+15; } #czone-contact #contact .contact-form-widget { padding: 30px; display: none; } #czone-contact #contact { position: fixed; bottom: 0; right: 6%>; background-color: #EEE; color: #555; width: 300px; z-index: 1.0E+15; } #czone-contact #contact h2.title { margin: 0px; font-weight: 400; background-color: #FA411E; color: #FFF; padding: 8px 15px; font-size: 16px; cursor: pointer; letter-spacing: 3px; text-align: center; } #czone-contact #contact h2.title .fa { position: absolute; left: 10px; top: 12px; } #czone-contact #contact .contact-form-widget { width: 240px; padding: 30px; display: none; } #czone-contact #contact * { transition: all 0 ease; -webkit-transition: all 0 ease; -moz-transition: all 0 ease; -o-transition: all 0 ease; } #czone-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message { background-color: #DDD; color: #111; border: 0; padding: 10px 5px; font: normal normal 13px Open Sans; } #czone-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget { max-width: none; margin-bottom: 15px; }
Note Untuk merubah posisi yang sesuai pada Blog Anda silahkan Ganti 6% sesuai dengan posisi yang Anda inginkan Sekarang dengan bantuan kotak pencarian, cari </body> dan tepat di atas </body> paste coding berikut ini <style type="text/css"><div id='czone-contact'> <b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'> <b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'> <i class='fa fa-paper-plane'/> <data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> </b:includable> </b:widget></b:section></div> <script type='text/javascript'> //<![CDATA[ $( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");}); //]]></script>

Terakhir Klik SIMPAN Selamat mencoba