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:
- Làm thế nào để tối ưu random posts từ nguồn cấp blog?
- Cách tạo widget hiển thị tổng hợp các dạng bài đăng từ widget popular posts - Trích xuất dữ liệu từ nguồn cấp
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.
 |
| 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?
