Thời gian gần đây nhiều bạn muốn mình hướng dẫn cách: Làm thế nào để Tạo Hiện Ẩn Form Liên hệ với tôi trong Blog. Đây là widget blog liên hệ đến chủ blog được hiện, ẩn nếu nhấp chuột vào, hình thức phong cách liên lạc này đơn giản và gọn gàng với hiệu ứng đẹp

Đối với những người muốn cài đặt các widget với hình thức này, xin vui lòng đọc các hướng dẫn dưới đây:

1. Đăng nhập vào Blogger> Layout> Thêm Tiện ích> Tiện ích khác> Chọn "Form Contact" và lưu nó.

2. Blogger> Mẫu> Chỉnh sửa HTML> Thêm CSS dưới đây ngay trên code]]> </ b: skin> hay </ style>

/* CSS Contact Form */

#chslidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:0;z-index:99;text-align:left;transition:all .4s ease-out}

.chslidingbox-title{background:#5996C1;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}

.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}

a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}

.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}

.chslidingbox-container{border:1px solid #ddd;float:left;width:100%;height:auto;padding:10px}

.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}

.chslidingbox-container >div >span{font-size:14px}

#ContactForm1{display:none;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

width:300px;height:auto;margin:5px auto;padding:5px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}

#ContactForm1_contact-form-email-message{width:300px;height:120px;margin:5px 0;padding:5px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color:#444;color:#444;background:#fff;}

#ContactForm1_contact-form-submit {background:#5996C1;color:#fff;border:1px solid #5996C1;width:100px;height:40px;line-height:30px;cursor:pointer;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}

#ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width:300px;margin-top:35px;}

.show{bottom:-375px}

.hide{bottom:0}

3. Thêm mã HTML dưới đây sau khi <body> hoặc <body

<div class='show' id='chslidingbox'>

<div class='chslidingbox-title chslidingbox-www'>

<span style='float:left;margin:0 15px;'>Contact Us</span>

<span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span>

<span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>

<span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span>

</div><div class='chslidingbox-container'>

<form name='contact-form'>

Nama<br/>

<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<br/>Email Address*

<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<br/>Pesan*<br/>

<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>

<br/><input id='ContactForm1_contact-form-submit' type='button' value='Send'/>

<br/><div style='max-width:222px;text-align:center;width:100%;'>

<div id='ContactForm1_contact-form-error-message'>

</div><div id='ContactForm1_contact-form-success-message'>

</div></div></form></div></div>

4. Thêm Javascript dưới đây trước khi </ body>

<script type='text/javascript'>

//<![CDATA[

// Contact Us

$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-maximize"),l=$("#chslidingbox-minimize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});

Tạo thanh Liên hệ với tôi có thể Hiện - Ẩn