Advanced Random Posts Widget For Blogger with Thumbnails and Snippets

Advanced Random Posts Widget For Blogger with Thumbnails and Snippets

This random posts widget called advanced because its displays the image thumbnail  title of the article, date when the posts have published, number of comments the article have, and article summary on your blog. The image thumbnail has a hover effect that add some elegances to this widget and of course to your blog as well. The title of your posts will be automatically turned into all caps lock in this widget it is coded with Cascading Style Sheet or CSS.

Later you will learn how to implement it to your blog and how you can edit the image thumbnail dimension, the summary length of the article, post information date/comments, and the font size of the post title and, of course, the summary description. Don't worry it's easy promised!

The purpose of using this elegant widget in your blogger is because when your blog has many articles your visitors will not look at them one by one. So the solution in order to make your visitor aware that you have an article like that is to put a random posts widget in your blogger's blog sidebar. Hoping that they are interested in one article on your random posts.

Related Posts: Add Recent Comment Widget In Blogger | Disable content selection except blockquoute | floating Social Media Buttons Widget for Blogger | All In One SEO Pack For Blogger Blogspot | How To Add Scroll Bars on Blogger Blockquote | Create Rollover Image Effect | Anti Adblock Script for Blogger

Steps on How To Add Random Posts Widget to your Blogger Blogspot
Step 1: Log in to your Blogger account and click LAYOUT > Click on ADD A GADGET and a new window will pop-up.

Step 2: Select the HTML/JAVASCRIPT option

Step 3: Copy the code below and paste it inside the HTML/JavaScript box Content area, and type "Random Post" in the Title.

<style>
#random-posts img {
    border-radius: 5px;
    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/AVvXsEhqNItjrRKAKUE4K_F8MUPXC2r7iF7Qhx5-AX8pykVa5dYCrd8OJgrYTrdswNADenGVnmmwlFchLgSkbBDCDEX9y8z4tQJhE2M3JJKv0Lj9ZzbPxQPf1IR07vwgdDCzldm2iB5Q8DnmCxk/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 Customizations

• Thumbnail Dimensions >> To change the size of the thumbnail kindly change the [ width: 75px; height: 75px; ] value with a red color to your desired width and height. Example width: 95px; height: 95px;
• Number of Posts >> change the "5" from [ var randomposts_number = 5; ] to the number of posts you want to show randomly.
• Summary Length >> You can control the length of the summary by changing the "110;" value from [ var randomposts_chars = 110; ]. This is character counts you will set how many characters will show in the widget.
• Article Information >> If the the post date and comment count bothering you, Change the 'yes' to 'no' from [var randomposts_details = 'yes';].
• Title Font Size >> To change the post Title fontsize modify the "12" value from [ font-size: 12px; ]
• Summary Font Size >> To change the summary font size modify the "11" value from [ font-size: 11px; ]

Final Words!

I hope that you like this Advanced posts random widget guys! This widget can also help you to decrease your bounce rate so enjoy!!! Let me know if it is working in your blog by dropping a comment below. If you have problems with implement the widget in your blog just comment it below, as I always promised I will reply thanks!