24 tháng 6, 2012

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/
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 - 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/

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy7O0Et43glChExtUZ8cG-1chmPPHEss2qucG026mt6FyGQ7y6otsmNr_fSqsZeVpeLnUz-Cww2mWdUNI9Bjapbr0cAmIT2KUq-n3mYi1ZsFSq8sgheB2Uj_q1ZGUxFeRj7r1Y_FdZKuI/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.

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets