Tạo Contact Form trượt cho Blog

Lê An    3/10/2014    Thủ thuật blog    Comments   

Bạn muốn tạo ra một Contact Form (Biểu mẫu liên hệ) cho Blog của mình nhưng với Blog nhiều tiện ích thì rất bất tiện vì Biểu mẫu chiếm nhiều không gian trong bố cục và có khi làm mất đi thẫm mĩ cho giao diện Blog bạn nữa.

Vì vậy hôm nay mình xin giới thiệu đến các bạn một tiện ích sau đây sẽ giúp bạn ẩn khung biểu mẫu vừa mang lại hiểu quả vừa dễ thực hiện. Các bạn làm như sau:

Thêm Tiện Ích

• Đầu tiên bạn đăng nhập Blogspot
• Bạn vào phần Bố Cục -> Thêm Tiện Ích -> Biểu Mẫu Liên Hệ Mới 

Ảnh minh họa

CSS

Hãy dán mã dưới đây trước thẻ ]]></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;
}

Javascript

Sau đó dán mã dưới đây trước thẻ </body> trong mẫu của bạn.

<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>