Cara Menciptakan Contact Form Melayang

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

Screen Shot :

Cara Membuat :

1. Template teman pertama kali harus sudah terpasang J Query, kalau 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 isyarat 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 isyarat berikut sebelum isyarat </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

Share this post