Memasang Widget Fixed Contact Form di Blogger

Table of Contents

Seperti yang kita tahu, widget contact form atau formulir kontak merupakan salah satu fasilitas 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. Jadi tidak perlu repot login ke akun email. Namun dengan contact form widget ini sudah tersedia di blog kita.

Bagi yang sebelumnya pernah menggunakan tutorial ini, silakan hapus terlebih dahulu semua kode terkait tutorial tersebut.

Sebelumnya, pastikan di blog Anda sudah terpasang widget contact form. Jika belum tambahkan widget tersebut di Tata Letak > Tambahkan widget baru. Berikut cara dan penerapannya.

Memasang Widget Fixed Contact Form di Blog

• Buka Blogger > Template > Edit HTML
• Tambahkan kode di bawah ini sebelum </head>

<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}
</style>

• Selanjutnya tambahkan kode di bawah ini sebelum </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>

• Simpan tema

Demikian tutorial cara memasang widget fixed Contact Form di Blogger pada artikel ini. Semoga bermanfaat.