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

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

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