Contact Form

Sebuah web/blog jika ada contact form akan lebih baik, setidaknya dapat berinteraksi dengan pengunjung, kali ini kami berbagi tips membuat contact form seperti yang dapat anda lihat di pojok kanan atas web/blog ini

Klik template kemudian edit HTML

Cari kode ]]></b:skin>

Copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin>

.ContactForm {display:none}

Klik simpan template

Selanjutnya masuk ke tata letak

Tambahkan gadget pilih gadget lainya

Kemudian tambahkan formulir kontak dan simpan

Klik kembali tambahkan gadget cari dan pilih tambahkan html/javascript

Kemudian copy dan paste kode dibawah ini kedalam html/javascript box dan klik simpan

Selesai

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact Me</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>
<style>
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
 height: 311px;
 background: #FD6CA3;
 border: 1px solid #FD6CA3;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}
</style>

Selamat mencoba, terima kasih untuk mas Samsury di _samsury-sites.blogspot.com_