Membuat formukir kontak melayang dibloger
Sobat bloger dalam artukel kali ini saya mau menulis/memberikan tips cara membuat formulir kontak melanyang dengan handphone sobat bloger.karena disini saya menulis/membuat blog melalui handphone y sobat bloger.cara dan langkah langkanya sbb..
Pertama tama masuk dulu ke accunt bloger melalui handphone sobat bloger..
Sebelun edit htmlnya sebaiknya sobat bloger cadangkang dlu template sobat bloger,lalu klik thema dan edit html contoh..👇👇
Jika sudah,klil edit html lalu cari kode </head> lalu letakan kode diatasnya..contoh gambar kode tag 👇👇
<style>
/* Fixed Widget Contact Form By mancingdolar */
.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}
</style>
Setelah dipasang lalu simpan thema,lanjut ke pemasangan kode html ke dua
Cari kode tag </body> biasanya berada dibawah kode html thema punya sobat bloger contoh
Letakan kode html dibawah ini tepat diatas tag </body>
<script>
//<![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>
Jika sudah lulu klik simpan,langkah selanjutnya pergi tata letak lalu tambhkan wigdet formulir kontak lalu aktifkan dan simpan.perlu diingat formulir kontak tidak akan bekerja/blank jika belum diaktifkan selamat mencoba y teman temam
Nah sampai disini tutorial/tipa membuat formulir kontak melayang lewat hp bisa dipahami.semoga tips ini bisa bermanfaat untuk sobat bloger sekalian.