Memasang Widget Contact Form Melayang di Blog

Memasang Widget Contact Form Melayang di Blog

Pada kesempatan ini saya akan berbagi tentang cara memasang widget contact form melayang di blog.

Seperti yang kita tahu contact form merupakan salah satu fasilitas email dari blog 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 contact form sudah tersedia di blog kita sendiri.


Ok, langsung saja dengan cara pemasangannya. Widget berikut merupakan gabungan dari kode contact form yang di pasang di static page.


1. Buka blog > Edit HTML > Kemudian pasang kode CSS di bawah ini tepat di atas ]]></b:skin>

/* CSS Contact Form */
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 left:0;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:400;
 display:inline-block;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.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 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:left;
}
.floating-ai-body .ContactForm {
 margin:0;
 display:block!important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:Oswald,sans-serif;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}

Catatan : Untuk font dan warna disesuaikan dengan blog Sobat.



2. Pasang Script di bawah ini tepat di atas </body> dan simpan template.

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>

3. Kemudian pasang widget contact form di Tata Letak > Tambahkan Gadget > Pilih Gadget Lainnya > dan tambahkan widget Formulir Kontak

4. Terakhir, simpan widget dan lihat hasilnya.

Sekian dari saya, semoga bermanfaat.

Referensi : http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html