Bài viết ngẫu nhiên đơn giản và tối ưu nhất

Trước đây mình có giới thiệu với các bạn tiện ích bài viết ngẫu nhiên nhiều tùy chỉnh cho Blogger / Blogspot. Thì mặc dù tiện ích này khá là hay nhưng nếu bạn nào có dùng thử qua và test nhiều thứ bạn sẽ thấy đôi khi đoạn Javascript đó sẽ không phản hồi được, nhiều khi nó còn gây ra hiện đơ luôn trình duyệt hiện tại đang sử dụng.



Chính vì thế sau một thời gian nhỏ nghiên cứu để tự sửa lại cho đỡ bức xúc về vấn đề này, mình xin giới thiệu đến các bạn tiện ích bài viết ngẫu nhiên đơn giản vả ít chức năng hơn, nhưng hoạt động trơn trư và hiếm khi còn gặp trường hợp không phản hồi dẫn đến đơ trình duyệt nữa.

Tiện ích này thì mình chỉ mới bắt tay vào nghiên cứu, nên có thể trong tương lai mình sẽ cải tiến nó có nhiều tính năng hơn tương tự như tiện ích cũ, nhưng sẽ khắc phục được nhược điểm mà tiện ích cũ mắc phải.

Bài viết ngẫu nhiên đơn giản và tối ưu

Ở bai viết này mình sẽ chia sẻ cho các bạn loại bài viết ngẫu nhiên, cái thứ nhất là chỉ có tiêu đề bài viết không thôi (giống như trang 404 của mình), cái thứ hai là sẽ gồm có ảnh thumbnail và đoạn trích cho các bạn có nhu cầu về cái đẹp.

Chỉ có tiêu đề

Bạn hãy chèn đoạn mã sau đây vào bất cứ chỗ nào mà bạn muốn hiện: widget html, chân trang bài viết,...

<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>

Demo: http://fiddle.jshell.net/kieusonlam/a9L4uq36/show/

Có ảnh thumbnail và đoạn trích

Tương tự như trên đặt đoạn mã sau đây vào nơi mà bạn muốn hiện tiện ích bài viết ngẫu nhiên

<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;
}

Demo: http://fiddle.jshell.net/kieusonlam/wzj0ofoc/show/

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>

Demo: http://jsfiddle.net/kieusonlam/0jcp9ekg/show/

http://www.kslzone.net/2014/08/bai-viet-ngau-nhien-don-gian-va-toi-uu-nhat.html