Cara Mudah Membuat Floating Widget Contact Us Blogger

Tentu  anda 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.Betul?

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.

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.

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! Mudah Bukan anda hanya tinggal mengikuti tutorial di atas lalu copy paste kode di atas, edit sedikit atau tidak sama sekali, beres. Jika anda menyukai artikel ini silahkan anda sebarkan :) Happy Blogging