Nov 18, 2017

How To Add Advanced Random Posts Widget With Image In Blogger


Random Post widget allows users to see different posts when they refresh their browser. This advanced random post widget will display Thumbnails to user's and also snippets.


Advanced Random Posts Widget With Image

This is one of the best Random Post widget for blogger, because it has many features. Advanced random post widget for blogger also shows data and time the random article was published, with also number of comments the article has.

The advantage of random post widget is that it shows different posts to any users and doesn't repeat posts frequently. This advance random post widget is also good for bloggers who has many articles on their blog, because this widget can display old and new posts. So it will make your users stay more on your blog as they see old articles that are unique and has catchy title.

The best place to add random post widget is at the side bar of your blogger blog or at the bottom of your blogger blog.


Add Random Post Widget To Blogger - Blogspot

1. Login to your blogger blog > Click Layout  at the left side bar > Click Add A Gadget 

Advanced Random Posts Widget Blogger


2. Now Select HTML/JAVASCRIPT which is the 4th on the lists.

Random Posts Widget Blogger


3. Now a window will pop up. Copy the below codes and paste it in the empty box. Name the Title "Random Post" if you wish.

Random Posts Widget

To Copy Codes On This Blog, Use CTRL+C & Then Paste It With CRTL+V

<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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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 Post Designs & Customization

  • Change thumbnail size: Change width: {75px; & height: 75px;}
  • Change post number: Change var randomposts_number = 5;
  • Change discription length: Change var randomposts_chars = 110
  • Disable date & comments in blogger: Change var randomposts_details = 'yes'; to var randomposts_details = 'no';
This is how to add random post widget to blogger blogger Blogspot Blog. Hope your enjoyed this article. Love to see your comments, Share with others.


Read Also: 


Get Our Hottest Updates via SMS. Kindly SMS FOLLOW UCHETECHS to 40404 on Any Network, It Is Totally FREE. Download Our Android App From Playstore HERE
To Submit Your Guest Post Or Sponsored Article, Click HERE. For Latest Tips and Tricks, Join Our Telegram Group Chat
uchetechs blog-bg
   
SHARE THIS

Author:

UcheTechs Is A Top Tech Website That Provides Blogging Tips, Android tricks, Pc Tips and Tricks, Internet Tricks, Latest Games On All Devices, Latest Phone Gadgets With Reviews And Tech News Around The World. Continue Visiting This Site For Latest Tips And Tricks On Android, IOS, And PC

Join Our Social Media Platform Below.


Get Latest Tips And Tricks From UcheTechs


facebook twitter gplus pinterest rss

2 comments:

  1. THis is a well written article

    ReplyDelete

WE LOVE COMMENTS... (IfNot Related To This Topic, Kindly Use FB Comment).

Kindly tick the Notify Me box to Know when i reply you