How to Add Random post widget  in blogger

How to Add Random post widget in blogger

Hi friends, Today we will learn  How to Add Random post widget in blogger.  It is a good way to show random post on your blogger website because the user attracts with your random post mostly because they don't want to go in the next page and hard to find the post.

So, let's start it.

Note - follow the steps.

Step- 1   First open your blogger dashboard.

Step- 2   Click on Layout Section as shown in the image below.

Step- 3   After then click on  + Add widget as shown in the image below.


Read also: How To Completely Remove Copyright Footer Credit For All Blogger Template

Step- 4   After clicking on + Add a widget you will see a popup as like shown in the image below.

              just click on HTML+Javascripit + icon.

Step- 5   Copy this 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/AVvXsEiL5uzChtnFVT0eWtxbBNbaYO78X5BwDJKlEPZZytvp4z1NZiqui8knRupkm10kWqsbsxiTn1yl34la_YyOrN1U3PGiSFf8pl3iqL4lTD2K4gs04psDW5RB46lLo94NaqHmxdEnOodT46c/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>

Step- 6  Paste in the empty content box and press save as shown in the image below. 


Step- 7  Last steps click on the Save button and refresh your blogger site.

Yeah! You have learned ЁЯШК

I hope you understood this and like this article. if you like it so, please give feedback in the comment section.

If any mistakes I made here, so please let me know and improve me.
If you have any query, feel free to ask me  ЁЯШК 

Post a Comment

Please do not enter any spam link in the comment section.

Previous Post Next Post