Cara Menambahkan Widget Floating Contact Us di Blogger

Tentu sobat blogger sudah mengetahui cara pasang widget Formulir kontak pada blogspot.Namun, Anda mungkin telah memperhatikan bahwa kadang-kadang Penampilan widget tersebut yang langsung Anda tambahkan lewat tambah gadget terlihat kurang keren dan membuat ruang pada blog Anda tidak elegan.

Bagaimana jika Anda menjalankan sebuah blog eCommerce di blogger dan pelanggan Anda perlu mengirim email permintaan cepat untuk dukungan menemukan beberapa informasi keinginan mereka sedangkan Anda menaruh formulir kontak pada footer.

Sebuah solusi sederhana untuk masalah ini adalah bagaimana membuat formulir kontak lebih menonjol dengan cara membuatnya melayang/floating. Hari ini di artikel ini.

Untuk hasilnya silahkan sobat lihat Demo D E M O

Hal pertama yang perlu Anda lakukan adalah untuk membackup template Anda , sehingga jika Anda tidak mengikuti petunjuk di bawah dengan benar Anda dapat menggunakan cadangan untuk mengembalikan template.

Langkah-langkah

Pergi ke Blogger >> Template >> Edit HTML >> Klik di mana saja di template editor HTML dan tekan (CTRL + F), ini akan memunculkan kotak pencarian. Sekarang mencari ]]></b:skin> dan di atas ]]></b:skin> paste CSS style sheet coding berikut.

<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