Two Random Posts Widget for Blogger With & Without Thumbnail

By using a random post widget on your blog, you can give your readers the freedom to navigate your blog more efficiently like the blogger search box widget do. In fact, a random post widget could keep your old blog posts alive by bringing them back in front of your audience. Moreover, you will gather some extra page views and reader attraction too, which is amazing for improving the value of your blog.

Random Posts Widget for Blogger With Thumbnail

We can add different types of random posts widget in different places of our blog. But before adding, we should think what type of widget should be added to get optimum result. According to me, if we use a random posts widget for blogger with thumbnail, it will help us to get more reader attraction. Therefore I will recommend this one for your blog.
Actually, it is a very lightweight random posts widget for blogger. This widget has also many customization and configuration options. You can change some basic styles of this widget within few click. Moreover, the default design of this widget will suit any type of blog.

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtC5cBZM1685u0_q8tZhNBxhbtTB1Lw56N-FmXTG6rRO9cjmvuRuhBdVl2xg49qixRBmikTCsBOBGpoWQ5grQLgqKvGwJZOxTHl6IN9YegFj1G4WMsyeYDPbO-oXbwIwHDOdacoFcmO38f/s1600/clouds-bg.png");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>
<ul id='bo-random-posts'>
<script>
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>');
function getvalue(){for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break}n?r--:borp_current[r]=o}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))}
</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)+"&#133;"}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/AVvXsEh2oFpOVCgSBF-XBz6DKebGXVpkOD0gpa2Z7psiHQmQoa0v0-cNOep6-GixZcXHSoxoqVWVmc1EWZhRI-2TL3LYAjVbK0ihr_0lTz1TW2Afbhhe8aOCVtmRAAHacrj60OPRF4TibqZnPlGR/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>

Configuration:
How many posts to show: Change the above-highlighted number “5” [var borp_number = 5;] to increase or decrease the total number of random posts of the widget.
Change the background: You can change the background image is used in this widget by changing the above-highlighted URL. Also, if you wish to use this widget without any background, you can replace the highlighted URL with “#”.

Random Posts Widget for Blogger Without Thumbnail

Although I have recommended the above widget, you can try this random posts widget for blogger without thumbnail if you think it is the best suit for your blog. Actually, you can use this random posts widget to not make your blog messy. Moreover, I have designed this widget with an amazing bullet point to attract readers. So I am sure it will do its job.

<style>
#bo-rp-box{float:left;margin-bottom:10px;margin-top:0px;}
#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/AVvXsEj34jduO_haei_k7kkf7bY-KU5p00qS0JqFfPp2frdAR4BUAKFdNMGDGujf69IHkl1H1aD73pQfg0UmvL9LmAHq8i554te55cU5_pLWlw9BKnuD88jbecBgqfLhfq3DFpmTg5pe8MftTg0u/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>
function rp_results_label(r){for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break}}}function removeRandomDuplicate(){for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r}function contains(r,e){for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1}function showRandomLabels(){for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++:r=0,e++;document.write("</ul>")}var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array;
</script>
<div id="bo-rp-box">
<script src="/feeds/posts/default?alt=json-in-script&amp;callback=rp_results_label&amp;max-results=10"></script>
<script>
var currentposturl="";
var maxresults=6;
removeRandomDuplicate(); showRandomLabels();
</script>
</div>

Configuration:
Change the highlighted 6 to show your desired number of random posts. No other configuration is needed. Simply add it to your blog and enjoy.

How to Add Random Posts Widget to Blogger?

We have already seen some amazing and stylish random posts widget for blogger. Now it is time to add them to your blog. As a matter of fact, adding one of these widgets is very easy and needs some few clicks. Simply follow my step by step instruction.
Step 1: At first, you have to log in to your blogger account and land on the blogger dashboard.
Step 2: From the left menu, click on the “Layout” section and find the sidebar area. After that, you will see the “Add a Gadget” link. Click on it.

Step 3: A popup window will appear in front of you. Scroll down and click on the “HTML/JavaScript” gadget.

Step 4: Now you will see the text area as shown below. Put the title “Random Posts” into the title area and copy your desired random posts widget code from above and paste it into the content area as shown below.

Step 5: Finally, click on the “save” button > “Save arrangement (at the top right corner)”. If everything is done successfully, go to your blog and refresh it. You will see your chosen random post widget will be working perfectly.