Random Posts Widget For Blogger

Random posts widget for blogger

Every blogger has a popular post widget in his blog similarly many bloggers are using a new widget called Random posts widget in their blogs in order to increase page views. How does it help in increasing page views?  well because this widget is displayed on right or left side of your blog posts so when a visitor reads your posts it attracts him because of its good look and the content in which he is interested. One of its most important feature is that when one post is clicked and opened then this gadget will show new posts(it works in a way that it show random posts) so it helps you to increase your page views.

Those bloggers who want to increase their blog traffic must have this widget in their blog. So in this post I am going to share a very useful gadget with you, to add this widget to your blog follow below steps:

Screenshot:



random post widget for blogger

(1). Go to blogger and click Layout.

(2). On the layout page click add a gadget and copy the below code and paste it in Html/javascript tab. 


<ul id="random-posts">
<script>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_thumbnails = 'no'
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>
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/AVvXsEiyw0s09fe4GZdmzdSMycvpdeh2qCycJgrTqnYc8wH2RZowEkfVJE3gM_c_ux9ENjl6V9MgAJzNDSBWsU6ZxTKQlEj6AuRL6ZF7JfD6hsj1tNbYcgHoAWtsXTHAgrG2O3oWhe4cQZ_cENk/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>
<style>
#random-posts {padding: 0 0 0 5px;}
#adshit {text-align: center;padding-top: 10px;margin-top: 5px;padding-bottom: 5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWtxPqswticW1jqtK1ljPbN_gdjgEsFXoaBlS_5zbcC8DnpvwyYA84AmK7JoOdBHuCvQt6dPyJZ0jOm-a7W1jZZ0okmUGvUkPiiXN4DUKAKcuWk6RW8RdiBr1r9HtPYUgplGNCnN-gls/s320/ad-back.jpg);}
#random-posts li {margin-bottom: 5px;list-style-type: none;}
#random-posts img {border-radius: 100px;float: left;position: relative;bottom: 10px;box-shadow: 1px 4px 4px #DEDEDE;padding: 3px;margin-right: 5px;width: 70px;border: 1px solid #D9D9D9;height: 70px;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 13px;position: relative;top: 5px;}
#random-posts a:hover {text-decoration: none;}
.random-summary {display: none;}
</style>

(3). Click save and you are done!

Customization:

  • I have disabled details in this gadget because it make congestion in blog, if you want to show details in this widget then in the widget's code change no to yes as shown in below piece of code:
<ul id="random-posts">
<script>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_thumbnails = 'no'
  • To increase number of posts change 5 to your desired number in above piece of code.
  • To customize summery of post change 110 to your desired alphabet number.
If you like this gadget share this post with others, if you have any problem or suggestion then leave a comment below. Follow and subscribe for latest news.

Tags: gadgets for blogger, increase blog page views, 101Helper blogger tips, tricks, gadgets, Random posts widget for blogger, random posts gadget for blog, blogger gadgets.


EmoticonEmoticon