Membuat Floating Contact Form Pada Blog

Screenshoot tampilan floating contact form

Yang sebelumnya sudah saya bahas mengenai cara membuat contact form menggunakan halaman statis pada blog, kali ini saya akan memberikan tutorial cara membuat floating contact form. Apa bedanya dengan contact form biasanya?

Bedanya kalau contact form halaman statis, menggunakan halaman untuk membuat contact formnya. Namun kalau floating itu, contact form yang menempel pada blog pojok kanan bawah. Kalian bisa lihat contohnya seperti gambar di atas.

Cara Membuat Floating Contact Form Pada Blog

Pertama pada template anda pastikan sudah support dengan jQuery, jika belum Copy code berikut ini lalu paste sebelum tag </head>

[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>]

Jika sudah klik Save Template

Selanjutnya ke pemasangan kode Javascript dan Css

Copy kode berikut ini lalu paste sebelum ]]></b:skin>

[/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;

}]

Kemudian Copy kode di bawah lalu paste sebelum </body>

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

</script>>]

Klik simpan dan silahkan kalian lihat hasilnya. Untuk contact ini juga akan terlihat ketika dibuka browser ponsel.