Cách Tạo Bài Viết Nên Xem Ngẫu Nhiên Cho Blogspot

Cách Tạo Bài Viết Nên Xem Ngẫu Nhiên Cho Blogspot

Hôm nay mình sẽ chia sẻ cho mọi người cách tạo một bài viết ngẫu nhiên trong khi đang xem bài viết thì nó hiện lên trước mặt. Giúp người xem có thể biết thêm nhiều bài nữa.


Code này đặt trên thẻ </body> nhé.

<style>
.jeg_popup_post{display:block;position:fixed;background:#fff;width:300px;bottom:150px;right:15px;z-index:9;border-radius:3px;box-shadow:0 0 1px rgba(0,0,0,.2),0 2px 20px rgba(0,0,0,.15);padding:5px 20px 15px 15px;opacity:0;visibility:hidden;transition:.3s ease}
.jeg_popup_post.active{opacity:1;visibility:visible;bottom:100px;transition:.4s ease}
.jeg_popup_post.close{opacity:0;visibility:hidden;bottom:-100px;transition:.4s ease}

Bạn có thể thích những bài đăng này

.jeg_popup_post .caption{color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:700;position:absolute;right:0;bottom:0;line-height:1;padding:3px 5px;background:#e70000}
.jeg_popup_content{margin-top:15px}
.jeg_popup_content:nth-child(2){margin-top:10px}
.jeg_popup_content .jeg_thumb{float:left;margin-right:10px;width:60px}
.jeg_popup_content .post-title{width:auto!important;font-family:'Roboto',sans-serif;text-overflow:ellipsis;display:-webkit-box!important;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical;font-size:14px;margin:0!important;border-bottom:0!important;padding:0!important;line-height:inherit!important;font-weight:400!important}
.jeg_popup_content .post-title a{color:inherit}
.jeg_popup_close{background:#e70000;color:#fff;position:absolute;right:0;top:0;width:20px;height:20px;line-height:20px;font-size:12px;text-align:center}
.jeg_popup_close:hover{color:#fff}
.jeg_popup_post .jeg_popup_content:hover{color:#fff!important;visibility:visible;opacity:1;top:0}
.jeg_popup_post .jnews-edit-post span{display:none}
.jeg_popup_post .caption a{color:#fff}
@media screen and (max-width:700px) {
.jeg_popup_content .jeg_thumb{float:left;margin:0;width:100%}
.jeg_popup_content .thumbnail-container img{width:100%!important;height:50%!important}
}
@media screen and (max-width:500px) {
.jeg_popup_post{display:none!important}
}
</style>
<div id='random-post-container'></div>
<script type='text/javascript'>
//<![CDATA[
// Xem tiep
jQuery(document).ready(function($) {
jQuery(window).scroll(function () {

if ( jQuery(this).scrollTop() > 700){
jQuery('.jeg_popup_post').addClass('active');
} else {
jQuery('.jeg_popup_post').removeClass('active');
}
});
});
function close_post(){
$('.jeg_popup_post').addClass('close');
}
var homePage = 'https://www.sibenit.net',
maxResults = 1,
noImageUrl = 'https://i.imgur.com/IIdtni8.png',
containerId = 'random-post-container';

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

function randomPosts(json) {
var link, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = '<div class="jnews_popup_post_container"><section class="jeg_popup_post">';
for (var i = 0, len = entry.length; i < len; i++) {
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<span class="caption"><a href="' + link + '">Next Post <i class="fas fa-angle-double-right"></i></a></span><div class="jeg_popup_content"><div class="jeg_thumb"><div class="thumbnail-container">';
skeleton += '<img alt="count-down" class="attachment-jnews-75x75 size-jnews-75x75 wp-post-image" height="60" sizes="(max-width: 75px) 100vw, 75px" src="' + img + '" width="60"/></div></div>';
skeleton += '<h3 class="post-title"><a href="' + link + '">' + entry[i].title.$t + '</a></h3></div></small>';
skeleton += '<a class="jeg_popup_close" style="cursor: pointer;" onclick="close_post();"><i class="fa fa-times"></i></a>';
}
ct.innerHTML = skeleton + '</section></div>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Nhớ sửa domain thành domain của mình nhé.
Demo


Chúc các bạn thành công !