-->
  • Jelajahi

    Copyright © Bacalah Biz
    Best Viral Premium Blogger Templates

    Iklan

    Reviews

    ADS1

    Sidebar ADS

    .

       

    PROMO / DISKON PRODUCT 

          



    Cara membuat Widget Fixed Contact Form di Blog

    Admin
    , Januari 09, 2020 #Bacalah
    masukkan script iklan disini

    #Bacalah, Cara membuat Widget Fixed Contact Form di Blog
    Dalam hal ini mengindikasikan informasi yang disampaikan secara akurat

    masukkan script iklan disini
    Mungkin Cara membuat Widget Fixed Contact Form di Blog
    diperlukan , sebagai sarana komunikasi antar pembaca blog kamu.

    Terlebih dahulu pastikan dalam Blog kamu sudah ada contact form diletakkan dalam Layout

    Ikuti panduang singkatnya ;






    Contact Form 



    Cara membuat Widget Fixed Contact Form Di Blog 


    Baru kemudian masukkan data kode dibawah di HTML Blog dengan ;

    1. Pada posisi blog html,menggunakan Control F temukan dan
    letakkan diatas b/skin atau style

    /* Fixed Contact Form */
    .ContactForm,.ContactForm .title{display:none}
    .floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
    .floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
    .floating-ai-head a:hover{background:#2588ca;color:#fff}
    .floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
    .floating-ai-head{text-align:right}
    .floating-ai-body .ContactForm{margin:0;display:block!important}
    #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
    #ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
    #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
    #ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
    #ContactForm1_contact-form-submit:hover{background:#468a53;}
    #ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
    .contact-form-widget form{display:table;margin:0 auto;}
    .contact-form-widget {max-width:initial;}
    .floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}




    2. Sebelum </body> letakan


    <script type='text/javascript'> //<![CDATA[// Fixed Contact Form$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())}); //]]></script>


    3. simpan template >> selesai


    Bacalah  juga ; Facebook tampil seperti twitter


      Pastikan setiap Blog yang kamu buat tersedia dengan adanya  Contact Form ini.

      Selain memudahkankan pembaca kamu menghubungi juga tetap menjalin komunikasi 2 arah yang saling bersinergi .




      Semoga bermamfaat





      Komentar

      Tampilkan

      .

      close
      Banner iklan disini

      Terkini

      HIJRAH