Memasang Widget Fixed Contact Form Di Blog

Memasang Widget Fixed Contact Form di Blog - Pada kesempatan ini Saya akan membuatkan perihal 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 isyarat 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, pribadi saja dengan cara penerapannya.

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan isyarat 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 isyarat 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 perihal Cara Memasang Widget Fixed Contact Form di Blog, supaya bermanfaat.

Share this post