Cara Membuat Contact Form Melayang

Cara Membuat Contact Form Melayang - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Contact Form Melayang !! Semoga tulisan dengan kategori Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Contact Form Melayang ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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