CÁCH TẠO FORM LIÊN HỆ TRỔI NỔI CỰC ĐẸP CHO BLOGGER

Nếu bạn không muốn tạo ra trang tĩnh để chèn form liên lạc cho Blogger, điều này thật là bất tiện.Vì vậy, trong bài viết này mình sẽ hướng dẫn các bạn cách tạo một form liên hệ trôi nổi thật ấn tượng và tiên lợi.

DEMO

VIDEO DEMO

CÁCH TẠO FORM LIÊN HỆ TRỔI NỔI CỰC ĐẸP CHO BLOGGER

• Thêm thư viên Jquery và kích hoạt gadget contact ( Liên hệ) của Blogger

Nếu blog của bạn không có jQuery, hãy đọc bài viết này để biết cách thêm thư viên Jquery vào Blogger :Here
Tôi cũng đã viết một bài viết để giúp bạn tìm ra cách để thêm một tiện ích Contact Form cho blog của bạn hay còn gọi là gadget. Nếu bạn chưa biết cách làm thì hãy đọc bài này: Here

• Thêm CSS và JavaScript

1. Bước 1: Hãy dán code dưới đây trước ]]></b:skin>
trong template của bạn.

.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;
}

2. Bước 2: Sau đó các bạn chèn đoạn code dưới đây vào trước </body> trong template.

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form */
$('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>

Sau đó bạn hãy lưu lại và xem thành quả của mình đã làm được sau một thời gian vất vả. Các bạn nhớ like khi làm được nhé