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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Chủ Nhật, 9 tháng 12, 2018 -

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}
.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 !

Tag:
0 Like
0 Comment More Emoticon
0 Nhận xét



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin