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()})});
//]]>
</script>
|
5.
Save Template và xem kết quả.
Như
vậy là OK. Hy vọng có ích cho bạn.