Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Monday, March 9, 2015

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> 

0 comments:

Post a Comment

Popular Posts