• Jelajahi

    Copyright © Bacalah Biz
    Best Viral

    Reviews

    BACALAH

    LIFESTYLE

    +

    Cara membuat Widget Fixed Contact Form di Blog

    Noka
    الخميس، يناير 9, يناير 09, 2020 WIB Last Updated 2022-06-13T15:55:36Z
    Bacalah 1

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

    Bacalah 2
    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

      News

      INFORMASI PUBLIK

      +