Cara Membuat Contact Form Melayang

Cara Membuat Contact Form Melayang - Haloo selamat siang sobat blogger, kali ini saya akan share mengenai tips membuat tampilan berbeda pada Contact form bawaan blogger. Contact form ini, biasanya umumnya kan di letakkan di bagian sidebar atau  pada halaman tersendiri atau halaman statis. Jika sobat merasa bosan soal tata letak contact form ini, mungkin bisa mencoba salah satu tips berikut, yaitu meletakkan contact form menjadi Floating atau melayang.

Screen Shot :

Cara Membuat :

1. Template sobat pertama kali harus sudah terpasang J Query, jika belum silahkan cari tutorial cara memasang J Query di blog.

2. Tambahkan Contact Form bawaan blogger di Add Gadget pada halaman pengeditan Layout.

3. Tambahkan kode berikut 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;
}

4. Tambahkan kode berikut sebelum kode </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>

5. Save Template dan Selesai

Source

Tweet