Duy Ripper: Bài viết ngẫu nhiên Style đẹp cho blogger

Như tiêu đề của Bài viết thì hôm nay mình sẽ hưỡng dẫn các bạn tạo ra một widget chứa các bài viết ngẫu nhiên trên Blog. Bài viết ngẫu nhiên là một cái giúp thu hút thêm người đọc làm vốn bài viết của các bạn trở nên phong phú nên nó sẽ là một thứ không thể thiếu trong bố cục Blog các bạn được.

Bạn có thể xem Demo ngay trên Blog của mình nhé.

Làm thế nào để tạo được một Widget như vậy? 

Đơn giản bạn chỉ cần Copy đoạn Code sau và Paste nó vào chỗ bạn muốn hiển thị.

<style>
#random-posts img {
    float: left;
    margin-right: 5px;
    width: 57px;
    height: 57px;
    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: 14px;
    text-transform: none;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
display:none;
}
#random-posts li {
    border-bottom: 1px solid #EEEEEE;
    padding: 5px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 9;
var randomposts_chars = 110;
var randomposts_details = 'no';
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/AVvXsEg7h_6wSTphG_72UgfQTG2c0l997rIRRqu8CkSKJtl5ELHySydoxpvFDRPIJu-m8tF123PTgZj_Ip82wUQGazSC4ymdrxecL29vrK-G5vTUIOam2RemOzB9kJirGx02eicoyCRSKzd6S6o/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>

Kết quả: 

Lưu ý: var randomposts_number = 9; là số bài viết hiển thị nếu muốn nhiều hơn hãy thay đổi nó nhé.
TỔNG KẾT: Khá đơn giản phải không.! Nếu gặp phải khó khăn gì hãy để lại nhận xét để mình có thể giúp đỡ nhé. 
Xem thêm tại Blog mình: Kul Nguyễn Bình