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

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

Recent News

[latest][5][recentright]

TOGGLE CONTENT

NASA Website SEND YOUR NAME TO MARS
Layout Builder with dozens of easy to use elements
Just change the contents and everything done in minutes
Content Importer, to easily setup your site
With one click you get a site very similar to the theme demo.
Many layout styles
Lots of beautiful interactive elements like slideshows, galleries, tabs, toggles that help you showcase your best work
Responsive Layout and High Resolution Display
Works beautiful on modern high resolution displays: Smarthpones, iPads, Retina MacBooks, etc