Widget bài viết ngẫu nhiên với ảnh và đoạn trích nội dung cho blogspot

 

Khi blog của bạn có quá nhiều bài viết thì người đọc ghé thăm blog không thể nào xem hết được tất cả các bài viết đó. Khi đó tiện ích bài viết ngẫu nhiên sẽ rất có ích cho blog của bạn. Mỗi lần người xem đọc bài hay refresh trang web những bài viết sẽ xuất hiện ngẫu nhiên, người đọc sẽ được biết nhiều hơn về các bài viết trong blog của bạn.

DEMO

CÁCH THỰC HIỆN
Widget bài viết ngẫu nhiên với ảnh và đoạn trích nội dung

Bước 1: Đăng nhập vào Blogger, vào phần Bố cục
Bước 2: Chọn widget HTML/JavaScrip
Bước 3: Copy đoạn code sau vào khung tiện ích

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
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) + "&#133;";
        };
        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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGXxDi8IlVnDlnYIry8fAuRJTNSMw7LWsKFIXR7eG65yvFWXFLc4vk4fzoEWg_68j5UCzgJaZYP0IWpPtzSOPGK0Y9B2QDUAIf3UU0zo60ojnyIGxff2DzBGvpW64LIeKuO6rRf-aFvXI/s1600/no_thumb.png"
                }
            }
        };
        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ưu mẫu và xem thành quả.

Hướng dẫn chỉnh sửa tiện ích:
- Kích thước ảnh đại diện: Thay thế giá trị 75px bằng giá trị bạn muốn.
- Độ dài đoạn trích: Thay đổi giá trị 100 trong đoạn code var randomposts_chars=110
- Thông tin bài viết: Nếu bạn muốn ẩn ngày đăng bài viết và số lượng bình luận của bài viết bạn thay đổi giá trị Yes trong đoạn code var randomposts_details='yes' thành no
- Kích thước phông chữ của tiêu đề và đoạn trích: Thay đổi giá trị 11px và 12px  bằng giá trị bạn mong muốn.