Membuat Widget Contact Form Fixed (Melayang) Di Blog

Cara Membuat dan Memasang Widget Contact Form Fixed Keren Di Blog - Widget contact form adalah salah satu navigasi atau fitur yang sudah di anggap wajib ada di setiap blog maupun website.

Ada banyak banget manfaat dan kegunaan dari memasang widget contact form ini. Terutama pada blog atau website yang digunakan untuk mengelola bisnis (toko online berbasis web).

Dengan adanya widget contact form fixed ini di blog, akan memudahkan para pengunjung blog kamu untuk menghubungi kamu terkait permasalahan artikel yang kamu buat. Atau mungkin lebih dari itu lho.

Bisa jadi mereka ingin mengajak untuk berkerja sama dengan blog kamu. Bisa itu berupa open guest post, partner blog (saling menanam link aktif) atau tawaran kerja sama lainnya seperti memasang iklan dan yang semisalnya.

Di postingan atau artikel sebelumnya sudah pernah di singgung bagaimana cara membuat contact form atau contact us di halaman statis blog, ya kan? Belum baca? Coba deh di baca dulu siapa tahu suka.

Di artikel tersebut hanya membuat contact form atau contact us hanya di halaman statis blog. Itu artinya jika ada pengunjung blog yang ingin mengirim pesan melalui contact form yang sudah dibuat, pengunjung harus membuka halaman statis contact form terlebih dahulu sebelum mereka mengirim pesan kepada admin blog. Dan ini bisa saja dianggap ribet dan membuang waktu bagi beberapa pengunjung.

Salah satu cara agar masalah ini terhindar dan agar bisa lebih mempermudah para pengunjung blog dalam berkomunikasi dengan admin (kamu), yaitu dengan cara membuat atau memasang contact form ini menjadi widget fixed yang akan selalu muncul di layar dan akan selalu muncul di halaman blog manapun dan tepatnya berada di sudut kanan bawah (mirip seperti widget sticky).

Gimana, tertarik untuk membuat dan memasang widget fixed contact form ini di blog kamu? Kalau kamu tertarik bisa ikuti langkah-langkah dibawah ini.

Ouh ya, sebelum lanjut ke tutorial cara membuat widget contact form fixed ini di blog, pastikan sudah menambahkan widget contact form bawaan blogger ya. Karena kalau widget contact form belum di tambahkan, widget contact form fixed ini gak bakalan berfungsi atau bleng. Cara menambahkannya masuk ke tata letak ➤ add widget ➤ contact form.

Cara Membuat dan Memasang Widget Fixed Contact Form Di Blog

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian taruh CSS dibawah ini sebelum atau diatas tag penutup </head>

   <style>
   /* Fixed Widget Contact Form By Dzuhalah */
   .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>

4. Setelah itu untuk membuat widget contact form ini menjadi fixed (melayang), tambahkan script dibawah ini diatas tag </body> agar widget ini posisinya tidak gerak-gerak (floating fixed)

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

5. Jika semua kode di atas sudah terpasang ke dalam template dengan benar, langkah terakhir klik simpan dan lihat hasilnya

Nah, itulah tutorial cara membuat dan memasang widget fixed contact form keren di blog dengan CSS yang bisa saya sampaikan. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan.

Cindy NOTHING!!!

Share :