Menu Floating Contact US Hide dan Show Dengan Efek Jquery

Membuat menu floating dengan tombol hide dan show sebenarnya bukanlah sebuah hal yang sulit, kita tinggal membuat sebuah konsep javascript dengan sedikit difungsikan sentuhan Jquery. Dan tentu Anda harus menambahkan widget Formulir Kontak nya dulu agar dapat berfungsi.

Tata Letak >> Gadget Lainnya >> Formulir Kontak >> Save.

Live Demo

Berikutnya masuk ke edit HTML dan copy CSS bawah ini dan simpan tepat di atas ]]></b:skin>

.ContactForm, .ContactForm .title {display:none;}
.leofloating {position:fixed;width:240px;right:0;bottom:0;z-index: 999;}
.leofloating-head a {padding:5px 10px;background:#48d;color:#fff;font:15px Oswald;text-shadow:1px 0 0 #1f4962;display:inline-block;*display:block;zoom:1;}
.leofloating-body {height:280px;background:#fff;border:1px solid #ddd;padding:10px;display:none;}
.leofloating-head {text-align:right;}
.leofloating-body .ContactForm {margin:0;display:block !important;}
#ContactForm1_contact-form-name{margin:5px auto;padding-left:35px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAVkDdMP1vq7OvoUyb7n5MO0SDQgEUD8XyoGUGRBa55S1NLaZ2eHwMQw5tc0303D9KrQf00EFmgbTvl7IQJKVzZUT1k_Y5tnxSTaAM8_-KxM0PRJCFJQNGErEv5giRF9h3beIuh1Ttao/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;box-shadow:rgba(0, 0, 0, 0.247059);border-radius:2px;}
#ContactForm1_contact-form-email{margin:5px auto;padding-left:35px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5n_5kiMIMzsRkCaft1Ff2OvAdPhSIBVlBkt9cfxpPCkTZ9-LLd3vicBKUYExdh0T1W4t60S3qxI74jLxdqJWLQyXKNulEIRKHFPuH_iZ4YVma53PNdUANycYRVsYftGCW9uJDutyq9M/s1600/pen.png)no-repeat 10px center;color:#777;
border:1px solid #ccc;box-shadow:rgba(0, 0, 0, 0.247059);border-radius:2px;}
#ContactForm1_contact-form-email-message{margin:5px auto;padding:5px;background:#f6f6f6;color:#777;border:1px solid #ccc;box-shadow:rgba(0, 0, 0, 0.247059);border-radius:2px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:left;color:#fff;font:15px Oswald;padding:0;cursor:pointer;margin:5px 0 3px 0;border-radius:2px;text-shadow:1px 0 0 #1f4962;}
#ContactForm1_contact-form-submit:hover {background:#C874E9;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:240px;margin-top:15px;}

Berikutnya simpan JS ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="leofloating"><div class="leofloating-head"><a href="#clik">Contact US</a></div><div class="leofloating-body"></div></div>');
$('.ContactForm').appendTo('.leofloating-body');
var slide_up = false;
$('.leofloating-head a').click(function(){
 if (!slide_up) {
 slide_up = true;
 $('.leofloating-body').slideDown();
 } else {
 slide_up = false;
 $('.leofloating-body').slideUp();
 }
});
//]]>
</script>

Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini

Share thisPlus this