Thư viện

Trải nghiệm

Thứ Sáu, tháng 12 09, 2011

Tạo khung nội quy nhận xét đóng tự động

Khung nội quy nhận xét tự động đóng sau 2 phút kể từ lúc bạn truy cập vào bài viết dành cho blogspot.

Chia sẻ:
Như các bạn có thể thấy ở phần nhận xét theo các bài viết trên Namkna có khung nội quy nhận xét khá lạ so với các blogspot khác, nếu để ý, sau 2 phút bạn sẽ thấy khung nội quy nhận xét này tự động đóng và biến mất. Với tính năng này, blogspot của bạn sẽ trở nên lạ hơn, gây trí tò mò hơn đối với người đọc. Lấy giả thuyết tính trung bình để đọc một bài viết trên blogspot của bạn phải mất 1,5 phút thì bạn có thể cài đặt sau 2 phút thì khung nội quy nhận xét sẽ biến mất, tức là người đọc có 30 giây để lướt qua nội quy nhận xét nếu có ý định để lại nhận xét. Và điều thật bất ngờ là sau khi nhận xét được xuất bản thì khung nội quy nhận xét bổng dưng biến mất mà không có sự tác động nào.

Ảnh Demo:
Tạo khung nội quy nhận xét đóng tự động

Tạo khung nội quy nhận xét đóng tự động - http://namkna.blogspot.com/

Xin bật mí một chút, ý tưởng tạo khung nội quy nhận xét này có định dạng CSS từ trang đăng nhập Blogger, mình chỉ linh hoạt áp dụng và tạo thêm hiệu ứng đóng tự động cho nó.

Để cài đặt khung nội quy nhận xét như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message (Thư thông báo mẫu nhận xét)rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS (Lưu cài đặt) để lưu cài đặt.Tạo khung nội quy nhận xét đóng tự động - http://namkna.blogspot.com/
Tạo khung nội quy nhận xét đóng tự động
Bước 2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTLM), chọn Expand Widget Templates (Mở rộng mẫu tiện ích).

Tìm đến đoạn code:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Và xóa phần sau nếu có (nếu không xóa phần nhận xét của bạn sẽ bị lặp lại 2 lần):
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
Rồi đặt trước đoạn code:
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Bằng đoạn code bên dưới.
<style>
#comrule {padding:5px 0;width:550px}
.comrule-container{padding:5px;background:#fff;border:1px solid darkgray}
.comrule-header{padding:5px 10px;background:#a2bf89;white-space:nowrap;color:#fff}
.comrule-body{width:580px;padding:5px 10px;background:#cddebe}
.comrule-body a{color:#036300}
.comrule-close{float:right;margin-right:-5px}
.comrule-text{text-align:justify;font-size:14px;line-height:19px;font-weight:normal;text-case:sentence;color:#069}
</style>
<script type='text/javascript'>
function closediv() {
document.getElementById(&quot;comrule&quot;).style.display=&quot;none&quot;;
}
setTimeout(closediv, 120000);
</script>

<div id='comrule'>
<div class='comrule-container'>
<table cellpadding='0' cellspacing='0'><tr><td class='comrule-header'><b>Nội quy!</b></td>
<td class='comrule-body'><a class='comrule-close' href='#' onclick='closediv()'><img alt='Đóng lại' src='https://lh5.googleusercontent.com/-JHYz7SqwKXo/T7y69-NxLlI/AAAAAAAADc0/ISOk4XyqTdU/h120/close-namkna-blogspot-com.png'/></a>
<span class='comrule-text'><data:blogCommentMessage/></span></td></tr></table>
</div>
</div>
Trong đoạn code trên bạn có thể thấy dòng <data:blogCommentMessage/> chính là phần nội quy nhận xét. Số 120000 tượng trưng cho 2 phút (1 phút = 60000 mili giây) đóng tự động khung nội quy nhận xét, bạn có thể đổi con số theo ý thích. Ngoài ra có thể tùy biến CSS cho phù hợp với tông màu trên blogspot của bạn.

Xong rồi bạn hãy lưu Template là được.
theo: thuthuatblogger.

30 nhận xét:

  1. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  2. hay quá thank nhé

    Trả lờiXóa
  3. Amin cho tớ hỏi tẹo. Tớ đã làm như cậu và 1 số trang khác nhưng vẫn không hiển thị được cái khung như trên này .

    Mà nội quy thì lại hiện bên dưới khung nhận xét .

    Ảnh nó đây : Click để xem ảnh

    Các cậu có cách nào để các dòng nội quy lên trên khung nhận xét và thêm được khung nội quy như trên bài viết không.
    Vậy có cần chỉnh sửa chỗ nào và có cần đưa code lên đây không nhỉ.
    Mong giúp đỡ!

    Trả lờiXóa
  4. @Thần Chết Bạn chú ý đoạn code sau:

    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>


    -> tùy theo blog mà thường có từ 3 đến 4 đoạn như thế. Bạn đặt đúng vị trí nó sẽ hiển thị. thường là đoạn code cuối cùng.

    Trả lờiXóa
  5. Cám ơn bạn.Mình vẫn chưa làm được . Khi mới load thì nội quy comment đang còn phía trên nhưng đến lúc load đầy đủ xong thì nó lại chạy xuống dưới khung nhận xét.
    Vì thế mà mình vẫn chưa chèn được các Icon mặt cười Yahoo cho nó.

    Đây là File Xml demo.
    http://www.mediafire.com/view/?8wc9k5rpfs1ewy4
    Các bạn ơi giúp mình tìm ra đoạn Code sai với nhé.
    Cám ơn nhiều !

    Trả lờiXóa
  6. Tiện thể Nam cho mình hỏi có thể tạo được Chatbox Title giống trang hellochao.vn không . Nếu có thể cho mình xin code hoặc bạn có thể viết 1 bài mới về nó.

    Trả lờiXóa
  7. @Thần Chết Mình qua trang bạn nói nhưng không thấy chat bõx.

    Trả lờiXóa
  8. @Thần Chết Template bạn gửi cho mình bị lỗi rồi,

    Trả lờiXóa
  9. ^^ Mình xóa toàn bộ làm lại trang khác nhưng có điều là "Nội quy thông báo " mình làm được rồi. Nhưng khi ta gửi 1 câu trả lời là nó lại mất bảng thông báo đó và đưa nội quy nhận xét xuống dưới From Comment.
    Thôi bây giờ cái đó gác lại đã .
    Mình tìm trên mạng có cái chat Tab Title khá hay . Đoạn code của tác giả tích hợp vào Vbb được nhưng vào Blogspot thì mình không biết edit như thế nào để thêm vào được. Link nó đây:
    Click vào đây để xem link

    Cậu có thể nghiên cứu nó và đặt code như thế nào không. Nếu được thì bạn Nam gửi lên này đoạn code chèn vào Blog nhé. Thanks !

    Trả lờiXóa
  10. Mình muốn chèn liên kết link vào khung thông báo thì làm thế nào vậy bạn.

    Trả lờiXóa
  11. @Thần Chết Thứ nhất bạn phải xóa đoạn code sau trong template thì sẽ không hiện ra bên dưới khung comment nữa:

    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>


    - thứ 2: Đoạn code trên có 1 scrip tự động đóng sau khi nhận xét bạn chỉ cần xóa đi là được:

    <script type='text/javascript'>
    function closediv() {
    document.getElementById("comrule").style.display="none";
    }
    setTimeout(closediv, 120000);
    </script>

    Trả lờiXóa
  12. @Link mediafire Bạn vào Cài Đặt - Bài đăng và nhận xét - Tại mục thư thông báo nhận xét bạn sử dụng lệnh sau để chèn liên kết.

    <a href='URL link'>Nội dung</a>

    Trả lờiXóa
  13. Ok, admin có thể viết một bài hướng dẫn chỉnh sửa khung ghi chú cho đẹp mắt hơn ko ạ.

    Trả lờiXóa
  14. @Link mediafireCác tùy chỉnh thay đổi bạn có thể thực hiện trong các đoạn CSS sau:
    #comrule {padding:5px 0;width:550px}
    .comrule-container{padding:5px;background:#fff;border:1px solid darkgray}
    .comrule-header{padding:5px 10px;background:#a2bf89;white-space:nowrap;color:#fff}
    .comrule-body{width:580px;padding:5px 10px;background:#cddebe}
    .comrule-body a{color:#036300}
    .comrule-close{float:right;margin-right:-5px}
    .comrule-text{text-align:justify;font-size:14px;line-height:19px;font-weight:normal;text-case:sentence;color:#069}


    Trong đó:
    - color:#036300: Màu link liên kết
    - background:#cddebe: Màu nền khung - Bạn có thể thay bằng hình ảnh.
    - font-size:14px: Cỡ chữ
    - line-height:19px: Khoảng cách giữa các dòng.

    Trả lờiXóa
  15. Bài viết của bạn rất dễ hiểu! Cảm ơn bạn rất nhiều! :)

    Trả lờiXóa
  16. Cảm ơn Nam. Bài viết này hay! Mình áp dụng ngay thử xem sao!

    Trả lờiXóa
  17. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  18. anh Nam ơi em làm theo như trên .. nhưng khi bài viết nào đó mà có người nhận xét thì khung nội qui k hiện như đầu nưa : http://share68.blogspot.com/2013/06/advanced-systemcare-62-pro-key-1-nam.html

    Trả lờiXóa
    Trả lời
    1. Blog có rất nhiều đoạn

      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      do vậy em chèn đúng nó mới hiển thị nha em.

      Xóa
    2. ý em là..lúc chưa có nhận xét thì nó vẫn hiển thị bình thường..nhưng khi có nhận xét thì bị lỗi

      Xóa
  19. em gửi template qua mail của anh rồi. anh sửa dùm em với nhá

    Trả lờiXóa
  20. Chào bạn, mình đã làm theo hướng dẫn bài viết, có đều khung viền bao quanh nó hơi rộng so với nội dung chữ bên trong, có cách nào bóp nhỏ khung viền cho nó vừa với nội dung chữ viết bên trong không ban? bạn xem qua link giúp mình nhé: http://hoatamgroup.blogspot.com/2014/03/lich-tu-mot-ngay-lac-tu-vien-linh-thuu.html
    Cảm ơn bạn nhiều

    Trả lờiXóa
    Trả lời
    1. bạn tìm đoạn code bên dưới:

      .comrule-container{padding:5px;background:#fff;border:1px solid darkgray}

      Điều chỉnh lại padding:5px nha bạn.

      Xóa
  21. Anh ơi, cho em hỏi, muốn chèn khung comment vào chỗ mũi tên thì phải làm sao ạ. Lúc em comment thì bảng nội quy nó ở dưới cuối cùng ạ....
    Hình ảnh đây ạ:Hình ảnh
    Demo đây ạ: Demo

    Trả lờiXóa