Memasang Widget Fixed Contact Form di Blog

√ Memasang Widget Fixed Contact Form di Blog

  • Posted by:
  • Posted on:
  • Category:
    Blogger, PendidikanBlogger, Pendidikan
  • System:
    Unknown
  • Price:
    USD 0
  • Views:
    324 views


Memasang Widget Fixed Contact Form di Blog

Memasang Widget Fixed Contact Form di Blog

Pada kesempatan kali ini Arlina Code akan berbagi tentang cara Memasang Widget Fixed Contact Form di Blog 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 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-repot login ke akun email, namun dengan widget contact form ini sudah tersedia di blog kita.

Memasang Widget Fixed Contact Form di Blog

Bagi yang sebelumnya pernah menggunakan tutorial ini : Cara Terbaru Menambahkan Formulir Kontak di BlogSilakan hapus terlebih dahulu semua kode terkait tutorial tersebut.

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

Memasang Widget Fixed Contact Form di Blog

1. Buka Blogger > Template > Edit HTML > Kemudian 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>

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

3. Simpan tema dan lihat hasilnya.
Demikian tutorial tentang Cara Memasang Widget Fixed Contact Form di Blog yang bisa Arlina Code bagikan, semoga bermanfaat dan wassalam.



Source link


Rating

0

( 0 Votes )
Please Rate!
√ Memasang Widget Fixed Contact Form di Blog

No votes so far! Be the first to rate this post.

As you found this software useful...

Follow us on social media!

Leave a Reply