How to Add a Random Post Widget on a Blog

How to Add a Random Post Widget on a Blog - Random post widgets are one of the important features in increasing pageviews on a blog. The widget, useful for randomly displaying articles on blogs. Thus, old articles that have not been seen by visitors to the maximum can potentially be reopened.

But most bloggers often think twice about installing a widget, because it is assessed to add a loading burden on the blog. However, the Random Post I will share is a fast and light random post widget that won't burden loading on your blog. The way to implement it is also quite easy, you just need to add the code to the new widget on the blog. Here's how to apply it:

How to Add a Random Post Widget on a Blog

1. Open Blogger >> Click Layout >> Add a new widget >> Copy and save the code below in it.

<style scoped='' type="text/css">
#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#arlina-random li:last-child{border-bottom:0;}
#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='arlina-random'>Load...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'https://khalistablog.blogspot.com',
    maxResults = 10,
    containerId = 'arlina-random';

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 ArlinaRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // 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, 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=ArlinaRandomPosts"></scr' + 'ipt>');
//]]>
</script>

Note: Change the code marked with your blog url and the number of articles that will be displayed.

2. Save the widget and see the results.

It's easy not to create a random post widget. So, the tutorial challenges How to Add a Random Post Widget on a Blog. Hopefully with these brief tips, it can be useful for you and good luck.

Share :