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.

Form liên hệ ẩn hiện ở chân trang cho Blogger
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 != &quot;&quot;'>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
          <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </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é.

12 bình luận

  1. avatar says

    01:06 Ngày 18 tháng 10 năm 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ẽ ...

  2. avatar says

    08:04 Ngày 18 tháng 10 năm 2014

    Ok, thank bác cập nhật thêm vào ^^

  3. avatar says

    18:14 Ngày 18 tháng 10 năm 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.

  4. avatar says

    11:30 Ngày 19 tháng 10 năm 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

  5. avatar says

    18:32 Ngày 19 tháng 10 năm 2014

    bạn ơi xem lại giúp mình với :v

  6. avatar says

    18:33 Ngày 19 tháng 10 năm 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.

  7. avatar says

    09:41 Ngày 23 tháng 10 năm 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

  8. avatar says

    09:45 Ngày 23 tháng 10 năm 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.

  9. avatar says

    18:34 Ngày 19 tháng 06 năm 2015

    Cái này nó gửi về mail hả cậu?

  10. avatar says

    21:39 Ngày 19 tháng 06 năm 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é.

  11. avatar says

    14:13 Ngày 02 tháng 05 năm 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 :).

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.