Form liên hệ ẩn hiện ở chân trang cho Blogger
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.
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
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ó
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é.
 |
| Widget liên hệ ẩn hiện |
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;
}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>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é.
lúc 01:06 18 tháng 10, 2014
Bạn Nên thêm thuộc tính z-index:999; nếu không có nó bị mấy cái tiện ích che hết ^^ . Thanks bạn đã chia sẽ ...
lúc 08:04 18 tháng 10, 2014
Ok, thank bác cập nhật thêm vào ^^
lúc 17:44 18 tháng 10, 2014
ko hiện demo
lúc 18:14 18 tháng 10, 2014
Thank bác, vừa thay demo trang đó đang làm một dự án khác mới thay template quên không chỉnh lại.
lúc 11:30 19 tháng 10, 2014
không hoạt động như demo, nó chỉ có cái thanh mà không có form liên hệ bên trong. XEM NGAY
lúc 18:32 19 tháng 10, 2014
bạn ơi xem lại giúp mình với :v
lúc 18:33 19 tháng 10, 2014
Cái template đó có sẵn cái menu liên hệ mình chèn ở menu top rồi mà =.=. Với lại nó xung đột với code cũ trong chỉnh form liên hệ nên nó không hiện được. Mà hiện được nó cũng break layout ghê lắm.
lúc 09:41 23 tháng 10, 2014
của mình nó không hiện chữ: Tên, Email, thông báo
chỉ hiện dấu chấm thôi
lúc 09:45 23 tháng 10, 2014
Bạn tìm trong CSS padding:10px; thay bằng padding:5px; còn cái vụ nó hơi lệch mình sẽ hướng dẫn sau.
lúc 18:34 19 tháng 6, 2015
Cái này nó gửi về mail hả cậu?
lúc 21:39 19 tháng 6, 2015
Cái này xài tiện ích mặc định nên nó gửi trực tiếp về mail nhé.
lúc 14:13 2 tháng 5, 2016
Thanks for share, đã add vào trang http://www.vnhomelist.com/ và đã thành công. Cảm ơn bạn, bài viết rất hữu ích :).
lúc 16:06 22 tháng 4, 2018
mình làm nhưng khi test thử thì nó ko gửi về mail mình