Advanced Random Posts Widget For Blogger With Image Thumbnails And Snippets

Hello and Welcome to GetWebInfo. Here on this post you can learn about Advanced Random Posts Widget For Blogger With Image Thumbnails And Snippets. When your blog has too many posts, visitors don't always have the time or desire to go through all the posts written there in order to make an idea of the blog's content. Thus, a random posts widget that will allow visitors to find content more easily could be really useful.








Adding Random Posts with Thumbnails and Posts Summary On Blogger





Step 01: Login to your Blogger Account, select your blog and go to Layout

Step 02: Add new widget by clicking on the "Add a Gadget" Link and select "HTML/Javascript" form the popup window.

Step 03: After Adding the HTML/Javascript Copy and Paste the following script inside the empty Content Box.

<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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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>

Random Posts Options 


  • Thumbnail Dimensions: To change the size of the thumbnails in pixels replace the 75px value
  • Summary Length: You can control the length of the summary by changing the 110 value from var randomposts_chars=110:
  • Post Infor: If you want to hide the post date and comment count change "Yes" from var randomposts_details='yes':to 'no':
  • Font Size for Posts Title and Summary: To modify the font size for the post snippet modify the 11px value and for the posts title, the 12px value.

At the End Just Click on the Save Button and View Your Blog to make sure every thing work good like you want. Hope this article is really helpful for you if you like this article so please share it on social media thanks.

3 Comment

Comment
30/7/19 delete

Thanks for the simple and easy implementation of the codes. it displays well on my site healthcentera.com and i love the display very much.

Reply
avatar
30/7/19 delete

Most Welcome Gbenga Odunukan

Reply
avatar
25/8/19 delete

Hey Sir!

I hope you are doing Great, This is a very helpful Article for beginners, Thanks For Sharing This Information Keep up the Good Work.
Click Here to Get:- 10 Most Popular Recent Post Widget For Blogger

Reply
avatar