2 Random Posts Widget for Blogger With & Without Thumbnail (2020)

A random post widget for blogger can decrease the bounce rate of your blogger blog. Also, It will help you to improve user engagement by showing some random posts to your visitors.
 
Therefore I’m recommending these lightweight and eye-catching widgets for your blog. Actually, these random posts widgets for bloggers are specially designed for your blog sidebar. Another most important thing is, these widgets are responsive so they will adapt the width of the sidebar automatically.
 
By using a random post widget on your blogger site, you can give your readers the freedom to navigate your blog more efficiently like the blogger search box widget do. In fact, a random posts widget could keep your old post alive by bringing them back in front of your users.
 
Moreover, you’ll get 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

 

You can add different types of random posts widget in different places of your blog. But before adding, you should think about what type of widget should be added to get optimum results.
 
According to me, if you use a random posts widget for blogger with thumbnail, it will help us to get more visitors on your blog website. Therefore, I will recommend this one for your blog.
 
Actually, it is a very responsive and lightweight random posts widget for bloggers. This widget has also many customization and configuration options which I’m going to discuss below. You can change some basic styles of this widget within one click. Moreover, the default design of this widget will suit any type of blog.
 
random post widget for blogger with thumbnail
Random Posts Widget for Blogger With Thumbnail
 
Random Post Widget Code:

 

<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://1.bp.blogspot.com/-CFaxpvI89Rg/Xq0AFblj2DI/AAAAAAAAClo/fBE-ObyryRkJnj1fNqeRDSbKDNmAacZLgCLcBGAsYHQ/s1600/393738.jpg");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 =
6;
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://4.bp.blogspot.com/-atF9AaH_YEI/WXc5HKoFZmI/AAAAAAAAAGE/LoIPxdwBHecNVesXy9J0AQJwdIuWFYu0QCLcBGAs/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 “6” [var borp_number = 6;] to increase or decrease the total number of random posts of the widget.
 
Change the background image: You can also change the background image of this random post widget. For changing the background image, just change the above-highlighted URL. Also, if you want to use the same widget without change any background, you can replace the highlighted URL with “#”.
 

Random Posts Widget for Blogger Without Thumbnail

 

Although I’ve recommended the above widget with thumbnail, you can try this random post widget for blogger without thumbnail. If you’re wondering that it is the best suit for your blog or not. Then my answer is yes.
 
Actually, you can use this random post widget to not make your blog messy. Your blog is very simple and also doesn’t want to increase loading time of your site then you can use this widget. Moreover, I’ve designed this widget with an amazing bullet point to attract readers. So, I’m sure it will do its job.
 
random post widget for blogger without thumbnail
Random Posts Widget for Blogger Without Thumbnail
 
Random Post Widget Code:
<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://3.bp.blogspot.com/-iqPqAkSBMh0/WXdSEyG6qqI/AAAAAAAAAGc/HNrklKvbVk4Gs9IBguzz5ZURJM_WPMxJACLcBGAs/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:

How many posts to show: Change the above-highlighted number “6” to increase or decrease the total number of random posts of the widget.
 

How to Add Random Posts Widget to Blogger?

 

We have already seen two different types of random posts widget for bloggers. Not it is time to add them to your blog. Adding of these random post widgets is not a big task. It is very easy and needs a few clicks. Simply follow my step by step instruction.
 
Step 1: First of all, you’ve to log in to your blogger account and go to your blogger dashboard.
 
Step 2: From the left menu, click on the “Layout” option and find the sidebar area. After that, you’ll see the “Add a Gadget” link. Click on it.
 
random posts widget for blogger
 
 

 Step 3: After clicking on add a gadget, a popup window will appear in front of you. Scroll down the page and click on the “HTML/JavaScript” gadget.

random posts widget for blogger
 

 

Step 4: Now you’ll see the text area as shown below figure. Put the title “Random Posts” into the title box and copy your desired random posts widget code from above and paste it into the content area as shown in the below figure.
 
how to configure random blogger widget
 
 
Step 5: Finally, click on the “Save” button >> “Save arrangement (at the top right corner)”. If you did follow all the step then everything is done successfully, go to your blog, and refresh it. You’ll see your chosen random post widget will be working perfectly.
 
Conclusion:
 
I have given some stylist random post widget for blogger. I hope you’ve chosen your desired one and added it to your blog without any problem. Although these widgets are tested, if you faced any problem for the entire process, please leave a comment on that particular issue. I will get back to you very soon. Also, don’t forget to share this post and follow me on Facebook and Twitter.

 

You Might Also Like:

 

 
 

 

 

 

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top