Thêm hộp thoại thông báo bài viết đề xuất vào Blogger

Edit this article 0

Plugin Recommended Post Notifications khi áp dụng trong Blogger hiển thị lần lượt hộp thoại thông báo bài viết ngẫu nhiên bên dưới góc trái hoặc phải trình duyệt trong một khoảng thời gian nhất định

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:
  1. 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
  2. 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
  3. Người đọc có tùy chọn tắt hiển thị thông báo
  4. 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
  5. 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=&quot;<b:if cond='data:view.isHomepage'>true</b:if>&quot;,
  isArchive=&quot;<b:if cond='data:view.isArchive'>true</b:if>&quot;,
  isPost=&quot;<b:if cond='data:view.isPost'>true</b:if>&quot;,
  isPage=&quot;<b:if cond='data:view.isPage'>true</b:if>&quot;,
  isLabelSearch=&quot;<b:if cond='data:view.search.label'>true</b:if>&quot;,
  isSearchUrl=&quot;<b:if cond='data:view.isSearch and !data:view.search.label and !data:view.search.query'>true</b:if>&quot;
  isSearch=&quot;<b:if cond='data:view.search.query'>true</b:if>&quot;,
  isMobile=&quot;<b:if cond='data:blog.isMobileRequest'>true</b:if>&quot;
//<![CDATA[
  var recommended_posts={
    visible:'true',
    show:'right',
    seconds:10,
    limit:5,
    catename:'',
    image:'https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/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://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/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


Thêm hộp thoại thông báo bài viết đề xuất vào Blogger

Thêm hộp thoại thông báo bài viết đề xuất vào Blogger

Thêm hộp thoại thông báo bài viết đề xuất vào Blogger

Demo


Blogger feeds CSS HTML JavaScript Jquery
Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!