Hiển thị Bài viết ngẫu nhiên tối ưu cho Blogger (Blogspot)

BloggerGuide

Tuesday, November 3, 2015

0 comments

Hiển thị Bài viết ngẫu nhiên tối ưu cho Blogger (Blogspot) với tiêu đề bài viết, ảnh thumbnail và đoạn trích cho các bạn có nhu cầu về cái đẹp.

Hiển thị Bài viết ngẫu nhiên tối ưu cho Blogger (Blogspot)

Bước 1: Chọn Style mà bạn thích

Style#1 Chỉ có tiêu đề


<div id='random-post-container'></div>
<script>
//<![CDATA[
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
    maxResults = 7,
    containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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));
    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, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        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 += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>


Style#2 ảnh thumbnail và đoạn trích

<div id='random-post-container'></div>
<script>
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  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 += '<li>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
</script>


Tiếp tục chèn đoạn css sau đây lên trên thẻ ]]></b:skin>

#random-post-container {width:400px}
#random-post-container ul,
#random-post-container li {
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
#random-post-container img {
  display:block;
  float:left;
  border:1px solid;
  margin:2px 7px 5px 0;
}
#random-post-container a {
  font-weight:bold;
  font-size:110%;
}
#rancom-post-container .clear {
  display:block;
  clear:both;
}


Style#3 Có thêm ngày đăng và số nhận xét

CSS thì như cũ, bạn có thể sử dụng lại như bên trên, còn đoạn Javascript thì các bạn hãy sử dụng đoạn này

<div id='random-post-container'></div>
<script>
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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, summary, img, cmt, date,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
        cmt = entry[i].thr$total.$t;
        date = entry[i].published.$t;
  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 += '<li>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
        skeleton += '<br/>';
        skeleton += '<span>' + date.substring(8, 10) + '/' + date.substring(5, 7) + '/' + date.substring(0, 4) + ' - ' + cmt + ' nhận xét</span>';
  skeleton += '<span class="clear"></span></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
</script>


Bạn có thể tùy chỉnh bên trong 2 đoạn mã trên

homePage: Địa chỉ url blog của bạn
maxResults: Số bài viết ngẫu nhiên
summaryLength: Độ dài đoạn trích
noImageUrl: Địa chỉ ảnh mặc định của bài viết không có ảnh

HIỂN THỊ BÀI VIẾT NGẪU NHIÊN TỐI ƯU BLOGGER

Bước 2: Add Widgets vào Blogger

Sau khi chọn được Style bạn coppy và thực hiện như sau

1- Đăng nhập (login) vào Blogger dashboard
2- Vào Bố cục (Lay out) Thêm tiện ích (Add gadget)
3- Tạo một Widget HTML/Javarscip và Dán Code sau và lưu lại (Save)

Tag : Blog Design, Blog Templates, Blog Widgets