Oke không luyên thuyên lôi thôi nữa :v Bắt đầu nào.
Demo Ngay Tại Blog Mình Nhé
CÁC BƯỚC THỰC HIỆN
Bước 1: Vào Bố Cục -> Thêm Tiện Ích -> Tiện Ích Khác -> Chọn "Mẫu Liên Hệ" rồi lưu lại.
Bước 2: Chèn đoạn CSS sau vào ngay sau thẻ ]]></b:skin> nhé.
Bước 3: Chèn đoạn code sau vào sau thẻ <body> hoặc <body<style>
/* CSS Biểu Mẫu Liên Hệ */
#chslidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:73%;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}
</style>
Bước 3: Chèn đoạn JavaScript vào trước thẻ </body><div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'><i class="fa fa-user-circle-o" aria-hidden="true"></i> Liên Hệ Tác Giả</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'>
Tên Của Bạn:<br/>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/>Email:
<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/>Lời Nhắn:<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='Gửi'/>
<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>
Bước 4: Sửa các thông tin sao cho phù hợp với blog bạn và Lưu Lại hưởng thụ thành quả thôi.<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>
Chúc các bạn thành công!
Source code: www.idblanter.com
Không có nhận xét nào