RANDOM POST WITH THUMBNAIL IN YOUR BLOGGER

Your Ads Here

HOW TO CREATE RANDOM POST GADGETS IN BLOGSPOT WITH THUMBNAIL

Blogger is the best blogging platform in any blog writer. Many blogger gadgets are available on Blogspot itself. More useful gadgets available on the internet. Now know how to create random post gadgets on Blogger. 

Blogger already provides many tools for better blog designs. But some beautiful tools are created by third-party websites, and they share the code of the tool.

Sample of Random post widget

The random post displayed image thumbs and post description and it works randomly with page refresh or new page opening time. 

How to install this widget 

Sign in and Click to the layout of Blogspot and click to 'Add a gadget' and select html section and paste the code of random post.

Random post widget html code 

     <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/AVvXsEjvjRcJRiy7jjzvjpAqd4PKeY1_JTVyvx6s4bDJQxYoNaQjxlBKei-o8S1UcFlBUse7lteiNxu4sjc91IKLufXmYalWHkj_rTs-5nrwLIt1KgIuvEbgOgTxQFujtiuAgJc6A2RkUKlEzMw/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>

Change random port number, details, and size 

Change size

        width: 75px;
        height: 75px;

Change no of post

var randomposts_number = 5;

Change details Character

var randomposts_chars = 110;

Save and view your blog

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here