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

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