Form liên hệ nổi ẩn hiện cho Blogger/Blogspot

Main Posts Background Image

Main Posts Background Image

Thứ Sáu, 26 tháng 9, 2014

Form liên hệ nổi ẩn hiện cho Blogger/Blogspot

Floating Contact Form for Blogger
HÀNH HƯƠNG - Nếu bạn không muốn tạo ra trang tĩnh để chèn hình thức liên lạc cho Blogger, hoặc cũng không muốn đặt nó ở bên phải. Vì vậy, thủ thuật này có thể là sự lựa chọn hoàn hảo của bạn, tạo ra một hộp nổi lên, ẩn xuống của hình thức liên lạc. Video demo Vậy làm thế nào để tạo ra nó?
Thêm CSS và JavaScript

Hãy dán mã dưới đây trước ]]></b:skin> trong mẫu 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;
}

Sau đó dán mã dưới đây trước </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>
Lưu lại và thưởng thức thành quả của bạn!

P/s: Chú ý nếu trong mẫu blog của bạn chưa có jQuery thì hãy thêm mã dưới đây vào trước </head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Chúc bạn thành công!

Theo: bloggeritems

Error 404

The page you were looking for, could not be found. You may have typed the address incorrectly or you may have used an outdated link.

Go to Homepage