Tạo các bài viết đề xuất ẩn hiện theo cách đơn giản nhất

Tạo các bài viết đề xuất ẩn hiện theo cách đơn giản nhất

Bài viết đề xuất là dạng các bài viết khác nhau hiển thị ngẫu nhiên được trích xuất từ nguồn cấp url feed hoặc từ url trực tiếp trong Blog. Với dạng bài này mình đã viết nhiều rồi, có thể liệt kê các bài nổi bật dưới đây:

Phương pháp tạo các bài viết đề xuất ẩn hiện tức là chúng ta trích xuất dữ liệu từ nguồn cấp thành các các bài viết ngẫu nhiên nhưng sẽ ẩn nó đi, thay vào đó sẽ thiết lấp một khoảng thời gian nhất định hiển lần lượt từng bài một.

Tạo các bài viết đề xuất ẩn hiện theo cách đơn giản nhất
Hiển thị mỗi bài viết đề xuất trong một khoảng thời gian nhất định

Cụ thể, lúc bạn tạo widget bài viết đề xuất hiển thị 10 bài, cách làm này cũng tương tự vậy nhưng không hiển thị hết 10 bài mà lần lượt hiển thị từng bài một. Do đó bạn cần hiểu theo hai bước với bước 1 trích xuất dữ liệu từ nguồn cấp để lấy số bài viết ngẫu nhiên và bước hai hiển thị từng bài một theo một khoảng thời gian và sẽ lặp lại từ bài đầu nếu trang không tải lại.

Phương pháp thực hiện như sau:

Chèn code script trước thẻ đóng </body>, lưu ý theme cần chèn link jquery

<script>//<![CDATA[
function recommended_products() {
  var r=10 // Số bài viết
  function get_random_posts(e) {
    if (e.feed.entry) {
      for (var t = 0; t < e.feed.entry.length; t++) {
        var entry = e.feed.entry[t],
          entry_title = entry.title.$t
        for (var a = 0; a < entry.link.length; a++) {
          if (entry.link[a].rel == 'alternate') {
            var entry_alternate = entry.link[a].href
            break
          }
        }
        if ('media$thumbnail' in entry) {
          var entry_thumb = entry.media$thumbnail.url
        } else {
          var st = entry.content.$t,
            at = st.indexOf("<img"),
            bt = st.indexOf('src="', at),
            ct = st.indexOf('"', bt + 5),
            dt = st.substr(bt + 5, ct - bt - 5)
          if (at != -1 && bt != -1 && ct != -1 && dt != "") {
            entry_thumb = dt
          } else {
            entry_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s72-c/safe_image.png'
          }
        }
        if ('category' in entry) {
          for (var k = 0; k < entry.category.length; k++) {
            var entry_category = entry.category[k].term
          }
        } else {
          entry_category = ''
        }
        // Nếu muốn hiển thị bài bên trái thay right thành left
        var html = '<div class="notifications-wrapper right hide"><a href=' + entry_alternate + ' title="' + entry_title + '"><div><img alt="' + entry_title + '" src=' + entry_thumb + '></div><div><p>Đề xuất cho bạn</p><p>' + entry_title + '</p><p>' + entry_category + '</p></div></a></div>'
        $(html).appendTo('body')
      }
    }
  }
  setTimeout(function(){
    var div = $('.notifications-wrapper'),current = 0
    setInterval(function() {
      $(div).addClass('hide')
      $(div).eq(current).removeClass('hide')
      if (current < div.length - 1) current++
      else current = 0
    }, 7000)
  },2000)
  $.get('/feeds/posts/summary?alt=json&max-results=0', function(data) {
    if (data.feed) {
      var a = data.feed.openSearch$totalResults.$t
      if (a < r) r = a
      let arr = []
      do {
        let num = Math.floor(Math.random() * a)
        arr.push(num)
        arr = arr.filter((item, index) => {
          return arr.indexOf(item) === index
        })
      } while (arr.length < r)
      arr.forEach(function(m) {
        m += 1
        $.ajax({
          type: 'GET',
          url: '/feeds/posts/default',
          data: {
            'alt': 'json',
            'start-index': m,
            'max-results': 1
          },
          dataType: 'jsonp',
          success: get_random_posts
        })
      })
    }
  }, 'jsonp')
}
window.addEventListener('load', function() {
  setTimeout(recommended_products, 3000)
})
//]]></script>

Code css tham khảo chèn trước thẻ đóng </head>

<style>/* <![CDATA[ */
.notifications-wrapper{position:fixed;z-index:20;bottom:20px;min-width:320px;max-width:414px;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1)}
.notifications-wrapper.hide{opacity:0;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.6,1);transition-timing-function:cubic-bezier(0.4,0,0.6,1)}
.notifications-wrapper.left.hide{left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}
.notifications-wrapper.right.hide{right:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
.notifications-wrapper:not(.hide){opacity:1}
.notifications-wrapper.left:not(.hide){left:20px}
.notifications-wrapper.right:not(.hide){right:20px}
.notifications-wrapper>a{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background:#fff;color:#2d2d2d;border-radius:4px;overflow:hidden;box-shadow:rgba(0,0,0,0.3) 0 0 6px, rgba(0,0,0,0.15) 0 1px 6px}
.notifications-wrapper>a>div:nth-of-type(1){width72px;height:72px}
.notifications-wrapper>a>div:nth-of-type(2){padding:0 13px;line-height:1.6}
.notifications-wrapper p{margin:0!important}
.notifications-wrapper p:nth-of-type(1){text-transform:uppercase;font-weight:500}
.notifications-wrapper p:nth-of-type(1),.notifications-wrapper p:nth-of-type(3){font-size:90%}     
/* ]]> */</style>

Tham khảo thêm: Làm thế nào để tối ưu css trong blogspot?


0 Nhận xét