Chào các bạn, lâu rồi mới chia sẻ code widget xàm xàm cho vui, cho có content. Thực chất nó là một widget Random Post (bài đăng ngẫu nhiên) khá đơn giản mà ít người quan tâm.
Mình đã chỉnh sửa một tí CSS lại để nhìn đẹp và phù hợp hơn. Code mình lấy từ đâu cũng không nhớ nữa :v
 |
| Code widget Random Post (bài viết ngẫu nhiên) cho Blogspot |
Hướng dẫn
Các bạn vào Bố cục > Add widget HTML/Javascript rồi chèn đoạn code dưới này vào là xong:
<style>
#random-posts img{border-radius:5px;float:left;margin-right:10px;width:45px;height:45px;transition:all 0.2s linear 0s}
#random-posts img:hover{opacity:0.6}
ul#random-posts{list-style-type:none;padding:0}
#random-posts a{font-size:17px;padding:0}
#random-posts a:hover{text-decoration:none}
.random-summary{font-size:11px;background:none;padding:5px;margin-right:8px;display:none!important}
#random-posts li{margin:0;border:0;padding:0}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 6; // Số lượng bài viết hiển thị
var randomposts_chars = 110; // Số kí tự của phần mô tả
var randomposts_details = 'no'; // Hiển thị mô tả
var randomposts_comments = 'Comments'; // Bình luận
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://i.imgur.com/9bVLdjR.jpeg"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Lời kết
Đơn giản thế thôi, hy vọng bạn sẽ thích nó. Có thể chỉnh sửa CSS và một vài thông số ở code để phù hợp với Blog của bạn. Chúc bạn thành công!
