Trong thời gian sử dụng Zopim mặc dù mình không có thời gian để online nhiều để hỗ trợ trực tuyến, nhưng mình nhận thấy một điều đó là số lượng người gửi những câu hỏi về cho mình gia tăng khá nhiều. Nhận được nhiều câu hỏi mới và trả lời được đối với mình cũng là một niềm vui nho nhỏ trong khi không có thời gian viết bài cho blog.
 |
| Widget liên hệ ẩn hiện |
Thế tối nay bất chợt nghĩ nếu mà mình thêm một các tương tự vào Blogger khỏi Zopim luôn thì sao, và mình đã làm ra một cái widget nho nhỏ để mọi người có thể sử dụng. Widget liên hệ này thì là widget mặc định nên bạn có thể thoải mái yên tâm nó hoạt động tốt với tốc độ cáo nhất.
Demo có thể xem trực tiếp tại đây:
http://kslbloggertemplate.blogspot.com
Biểu mẫu liên hệ ẩn hiện dưới chân trình duyệt cho Blogger
Để thêm widget biểu mẫu liên hệ ẩn hiện thế này thì bạn làm theo hướng dẫn sau đây của mình. Đầu tiên truy cập vào trang tổng quan của blog mà bạn muốn thêm widget này vào. Tiếp đến vào phần chỉnh sửa mã HTML của giao diện hiện tại, tìm đến thẻ ]]></b:skin> và thêm đoạn css này lên trên
.lienhe {
position:fixed;
bottom:-245px;
right:10px;
height:250px;
width:265px;
background:#efefef;
border:1px solid #bbb;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
padding: 0 10px;
z-index: 999;
}
.lienhe-box {
width:285px;
position:absolute;
top:-30px;
left:-1px;
background:#405D9B;
color:#fff;
font-family:Arial;
font-size:15px;
text-align:center;
padding:10px 1px;
}
.lienhe:hover {
bottom:0;
z-index:2;
}
.lienhebox input {
width:240px;
padding:10px;
max-width:240px;
}
.lienhebox textarea {
width:258px;
max-width:240px;
padding:10px;
}
.lienhebox .contact-form-button-submit {
width: 264px;
padding: 0;
margin-top: 5px;
}
đây là đoạn css căn chỉnh giao diện cái widget liên hệ.
Sau khi chèn xong css bạn tiếp tục tìm đến thẻ <body> và chèn đoạn mã sau đây ngay xuống dưới nó
<div class='lienhe'>
<div class='lienhe-box'>Liên hệ ngay với KslZone.NET</div>
<b:section class='lienhebox' id='lienhebox' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
đoạn mã này mình viết ra một section mới trong đó có chứa widget liên hệ mặc định của Blogger. Nó kết hợp với đoạn css ngay ở trên để hình thành giao diện ẩn hiện khá là ngầu cho blog của bạn.
Hiện tại thì mình cảm thấy giao diện này cũng hơi khoai do đó nếu bạn nào biết HTML và CSS thì có thể tự chỉnh sửa lại cho hợp ý và giao diện blog của bạn nhé.
Belum ada tanggapan untuk "Form liên hệ ẩn hiện ở chân trang cho Blogger"
Post a Comment