Memasang Widget Fixed Contact Form Di Blog

Memasang Widget Fixed Contact Form di Blog - Pada kesempatan ini Saya akan membuatkan ihwal cara memasang widget fixed contact form yang berarti widget ini akan muncul di halaman blog tepatnya di sudut kanan bawah.

Seperti yang kita tahu, widget contact form / formulir kontak merupakan salah satu akomodasi email dari Blogger yang berfungsi menghubungkan antara pengunjung dan pemilik blog untuk saling berkomunikasi secara personal. Cara pengiriman pesannya pun cukup mudah, kita hanya perlu menulis nama, alamat email, dan isi pesan. Kaprikornus tidak perlu repot-repot login ke akun email, namun dengan widget contact form ini sudah tersedia di blog kita.

Bagi yang sebelumnya pernah memakai trik ini : Memasang Formulir Kontak pada Halaman Statis

Silakan hapus terlebih dahulu semua instruksi terkait trik tersebut.

Sebelumnya pastikan di blog teman sudah terpasang widget contact form. Jika belum tambahkan widget tersebut di Tata Letak > Tambahkan widget baru. Ok, eksklusif saja dengan cara penerapannya.

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan instruksi di bawah ini sempurna di atas ]]></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. Selanjutnya tambahkan instruksi di bawah ini sebelum </body>

<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 dan lihat hasilnya.

Result

Demikian ihwal Cara Memasang Widget Fixed Contact Form di Blog, biar bermanfaat.