15 February 2016

How To Add Random Posts Widget into Blogger Blogs

In this article, i can explain of how to add a random posts widget into your Blogger blogs. The Random Posts Widgets is also called the Random Posts Gadget. 



It will display the random posts added to your blogs that due to the natural structure of blogs, could be lost very easily and deeply into your archives. 

At many time, when new visitors can visit your blog or your site, they are rarely bother going back to find out the one of your good posts, but with this widget, you can display the list of random post any where to your blogs.

How To Add Random Posts Widget into Blogger Blogs

It is the easiest way to display the random posts in random style in the sidebar. If you can not used this widget, then be patient, i will show you yo how to add this random posts gadget into your blogs on blogger platform.

You can customized this gadget in a easy way and it is also pretty fast loading , also displayed the thumbnails of your posts with how many comments they received.

So , if you want to add it into your blog, then just follow these steps .

Add Random Posts Widget To Your Blogger Blog


Step 1 - First Log In to your Blogger Account > Go to " Layout " > Click on "Add Gadget".


How To Add Random Posts Widget into Blogger Blogs


Step 2 - Add New Gadget "HTML / JavaScript ". 


How To Add Random Posts Widget into Blogger Blogs


Step 3 - Copy below code, and paste it into HTML/JavaScript Gadget, and Save it.

<style>#random-posts img {    float: left;    margin-right: 10px;    width: 75px;    height: 75px;    background-color: #F5F5F5;    padding: 3px;}
ul#random-posts {    list-style-type: none;}
#random-posts li {    margin-bottom: 10px;}
.random-summary {    display: block;}</style>
<ul id='random-posts'><script type='text/javaScript'>var randomposts_number = 5;var randomposts_chars = 60;var randomposts_details = 'yes';randomposts_details2 = '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 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('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');        if (randomposts_details == 'yes') {            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'        }        if (randomposts_details2 == 'yes') {            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'        }        document.write('<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><div style="font-size: 10px; float: right;"><a href="http://www.techora.net/" rel="nofollow">Random Posts Widget</a></div>

Customize this Widget


Hey, hope you enjoy this widget, here if you want to more customize this widget according to your need, then try this.

  • If you want to add more than 5 posts then simply find and change the parameter " 5 ".
  • If you want to make thumbnails more bigger then try this  " width = 75 " and " height = 75 ".
  • If you want to add text snippets into your gadget then change parameter "no" to "yes" .

randomposts_details2='no';
  • If you want to add more snippets characters then change "60" parameter.
  • If you want to remove date and time and also comments, then simply change the parameter from "yes" to "no" .

So, save your widget and it is live into your blogger blog, try and enjoy.



Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!