Plugin mình viết có tên Recommended Post Notifications, để các bạn dễ hình dung mình giải thích ngắn gọn như sau: Hộp thoại thông báo tựa như thông báo trình duyệt bên dưới góc phải, mỗi khi có thông báo hộp thoại sẽ xổ ra với nội dung thông báo gì đó. Bài viết đề xuất là bài viết ngẫu nhiên random.
Cơ chế hoạt động
Cơ chế hoạt động của plugin như sau:
- Khi trình duyệt load xong sau một khoảng thời gian giống nhau lần lượt hiển thị hộp thoại bên dưới góc trái hoặc phải với nội dung hiển thị nội dung một bài viết gồm: ảnh, tên, link và nhãn
- Quản trị viên có thể cài đặt hiển thị hộp thoại thông báo, giới hạn số bài viết, thời gian giữa mỗi lần hiển thị thông báo, Cài đặt hiển thị thông báo tại các trang khác nhau
- Người đọc có tùy chọn tắt hiển thị thông báo
- Nếu quản trị viên tắt thông báo, trình duyệt sẽ không hiển thị hộp thoại thông báo
- Sử dụng lưu trữ cục bộ, nếu người đọc đã tắt thông báo, trình duyệt sẽ không hiển thị hộp thoại thông báo cho đến khi người đọc xóa lịch sử duyệt web
Cách áp dụng
Chèn đoạn code dưới đây trước thẻ đóng </body> của template
<b:if cond='!data:view.isError'>
<b:tag name='style'>/* <![CDATA[ */
:root{--settings-font-size:.95rem;--settings-text-color:#264459;--settings-link-color:#264459}
/* ]]> */</b:tag>
<link href='https://cdn.jsdelivr.net/gh/vietblogdao/css/recommended-post-notifications.min.css' rel='stylesheet'/>
<script id='recommended_settings'>
var isHomepage="<b:if cond='data:view.isHomepage'>true</b:if>",
isArchive="<b:if cond='data:view.isArchive'>true</b:if>",
isPost="<b:if cond='data:view.isPost'>true</b:if>",
isPage="<b:if cond='data:view.isPage'>true</b:if>",
isLabelSearch="<b:if cond='data:view.search.label'>true</b:if>",
isSearchUrl="<b:if cond='data:view.isSearch and !data:view.search.label and !data:view.search.query'>true</b:if>"
isSearch="<b:if cond='data:view.search.query'>true</b:if>",
isMobile="<b:if cond='data:blog.isMobileRequest'>true</b:if>"
//<![CDATA[
var recommended_posts={
visible:'true',
show:'right',
seconds:10,
limit:5,
catename:'',
image:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s60-c/safe_image.png',
view:{
isHomepage:'true',
isArchive:'true',
isPost:'true',
isPage:'true',
isLabelSearch:'true',
isSearchUrl:'true',
isSearch:'false',
isMobile:'true'
},
messages:{
title:'Bài viết được đề xuất',
label:'trong',
confirm:'Bạn muốn tắt thông báo đề xuất?',
accept:'Có',
cancel:'Không',
button:'Áp dụng',
success:'Bạn đã tắt thông báo bài viết đề xuất, bạn sẽ không nhìn thấy thông báo trong tương lai cho đến khi xóa lịch sử trình duyệt.',
close:'Hộp thoại sẽ tự đóng sau',
seconds:'giây'
}
}
//]]></script>
<script defer='defer' src='https://cdn.jsdelivr.net/gh/vietblogdao/js/recommended-post-notifications.min.js'/>
</b:if>
Lưu ý: Template cần có thư viện jquery
Cài đặt
Các bạn xem chú thích theo các dòng bên dưới
var recommended_posts={
visible:'true', // Hiển thị thông báo, đặt giá trị thành false tắt hiển thị
show:'right', // Hiển thị thông báo bên phải, đặt giá trị thành left nếu muốn hiển thị bên trái
seconds:10, // Thời gian hộp thoại thông báo hiển thị tính bằng giây
limit:5, // Giới hạn bài viết hiển thị
catename:'', // Thêm tên label nếu muốn hiển thị bài viết trong một nhãn nhất định
image:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s60-c/safe_image.png', // Link ảnh thay thế nếu bài viết không có ảnh
view:{
isHomepage:'true', // Hiển thị thông báo trang chủ, đặt giá trị thành false tắt hiển thị
isArchive:'true', // Hiển thị thông báo trang lưu trữ, đặt giá trị thành false tắt hiển thị
isPost:'true', // Hiển thị thông báo trang bài viết, đặt giá trị thành false tắt hiển thị
isPage:'true', // Hiển thị thông báo trang tĩnh, đặt giá trị thành false tắt hiển thị
isLabelSearch:'true', // Hiển thị thông báo trang label, đặt giá trị thành false tắt hiển thị
isSearchUrl:'true', // Hiển thị thông báo trang các bài đăng cũ hơn, đặt giá trị thành false tắt hiển thị
isSearch:'false', // Hiển thị thông báo trang tìm kiếm, mặc định bị tắt, nếu đặt giá trị thành true phải đặt giá trị của isSearchUrl thành false
isMobile:'true' // Hiển thị thông báo trên điện thoại m=1, đặt giá trị thành false tắt hiển thị
},
messages:{ // Văn bản
title:'Bài viết được đề xuất',
label:'trong',
confirm:'Bạn muốn tắt thông báo đề xuất?',
accept:'Có',
cancel:'Không',
button:'Áp dụng',
success:'Bạn đã tắt thông báo bài viết đề xuất, bạn sẽ không nhìn thấy thông báo trong tương lai cho đến khi xóa lịch sử trình duyệt.',
close:'Hộp thoại sẽ tự đóng sau',
seconds:'giây'
}
}
Hình minh họa
