How to Add Random Post widget in Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add a random post widget in the Blogger blog with pictures.

How to Add Random Post in Blogger with Pictures

What is a Random post widget?

Random post widget or gadget help a Blogger blog to show some random posts in our blog and it is very useful for displaying some random posts for increasing page-views, Here I give you random post widget code with thumbnail, without thumbnail and horizontal view with thumbnail and select the code which is more suitable for your blog.

Why we need to add a Random post widget to the blog?

Here the Blogger has a popular posts gadget feature but if you want to show some old random posts for our visitors in the blog then the blogger doesn't have any gadget or widget like that, by default in the blogger we have no choice of Random Posts gadgets, using the random post widget it help in blog design and it gives more posts choices to the visitors and they can easily select the random posts which they like and you can earn some extra page-view, so let start the process to add random post to blogger blog, now let's start.

These are the Following Steps:-

Step 1: Go to the Blogger blog dashboard and select the layout option then here find out the place where you add the gadget and click the Add a Gadget link.

Step 2: Now click the HTML/JavaScript gadget.

Step 3: Here we select the random post gadget first then we copy the code which we like and paste it in the content area and click the Save button.

Random Posts with thumbnail:-

Add Random Post In Blogger With Thumbnail

<style>

#bo-random-posts img{background:#fff;height:50px;float:left;width:50px;margin:5px 5px 0px 0px;-webkit-border-radius:50%;border-radius:50%;-moz-border-radius:50%;padding:3px;}

#bo-random-posts img:hover{opacity: 0.5;filter: alpha(opacity=50);}

ul#bo-random-posts {list-style-type: none;background-image: url("");background-repeat: no-repeat;}

#bo-random-posts li {margin: 10px 0;}

#bo-random-posts li a{padding: 5px 0;text-decoration: none;}

.bo-random-summary {display: block;}</style>

var borp_number = 5;

var borp_details = 'yes';

var borp_chars = 60;

var borp_details2 = 'no';

var borp_comments = 'Comments';

var borp_commentsd = 'Comments Disabled';

var borp_current = [];

var total_randomposts = 0;

var borp_current = new Array(borp_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>');

</script><script>function random_posts(t){for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+""}for(var o=0;o<r.link.length;o++){if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCI6j9XXQu3iobCQZ4BWt3fgY589uwbNhEOOuNNMaeZ5PTlHsS5OpnNzNPQ4S9yaQixykSM8X5PHK0-8GwfWhM9NxmrfzMPSakwaFuUyCdsZmHZowVVEgRldFMpXuGGEAeWwQrA909gsO0/s1600/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script></ul><div style="font-size: 10px; float: right;"><a href="https://techtspot.blogspot.com/2018/09/how-to-add-random-post-in-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Random Posts without thumbnail:-

Add Random Post In Blogger Without Thumbnail

#bo-rp-box ul{margin:0px;float:left;margin-left:20px;padding:0px;}

#bo-rp-box li{vertical-align:middle;list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbTy4Bw5zG2waP9g4KTiMYZb58QPB9OuubN0gitqurPrrrJr2d5nbEnh8RkkZiHBtVULvbMqtSHtsYJ56RbT7uv7sbRnxy0zGzt04bWAMloH-B2ZGUJ8ac4L4PEQvcowFqyILiLlJVj1o/s1600/b1.png"); margin-bottom:0;width:auto;margin-top:0;padding:10px 0;}

#bo-rp-box a{color:#0F0F0F;text-decoration:none;font-size:14px}

#bo-rp-box a:visited {text-decoration: none;color:blue;}

#bo-rp-box a:hover{color:blue}</style><script>

</script><div id="bo-rp-box"><script src="/feeds/posts/default?alt=json-in-script&callback=rp_results_label&max-results=10"></script>

Horizontal Random Posts with thumbnail:-

Add Horizontal Random Post Widget Blogger

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 a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}</script><script type='text/javascript'>

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;"><br/><br/><a href="https://techtspot.blogspot.com/2018/09/how-to-add-random-post-in-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Here you want to edit the posts numbers in the random post gadget, you just replace the blue code number.

Step 4: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enable Random Post and Horizontal Random Post widget in the blog, above I give you the 3 random post widget options with thumbnail, without thumbnail, and horizontal posts with thumbnail, now select the gadget or widget code according to your blog design and apply in your blog but if you want to see how the Random Post look like then visit the Demo blog.