Wednesday, July 31, 2013

Membuat Floating Formulir Kontak Blogger







Pada postingan ini saya akan share mengenai cara membuat floating kontak widged terbaru dari blogger ini untuk pemasangganya cukup simple silahkan ikuti langkah dibawah ini...

masuk blog anda telebih dahulu
kemudian menuju halaman tata letak/add gadged
kemudian pilih gaged lainnya
setelah itu pada urutan kedua pilih Formulir Kontak


Setelah itu simpan widged 
kemudian kita beralih ke menu template/edit html
jika sudah cari kode ]]></b:skin> gunakan ctrl + f
setelah itu letakan kode dibawah ini tepat diatas tag ]]></b:skin>
/*Floating Contact by empblogspot.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 255px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #2E9AFE;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 2px solid #848484;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: left;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Setelah itu cari kode </body> dan letakan kode dibawah ini tepat diatas tag  </body>

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact by empblogspot.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>

 Silahkan di edit sendiri kode yang saya tandai sesuai selera agan masing masing
terakhir Simpan template agan dan lihat hasilnya...
selamat mencoba semoga bermanfaat....

1 comments: