Are you looking for a random post widget for blogger.com or blogspot then you’ve landed on the right page.
Today, in this article, we’re going to present two different types of random post widget with and without a thumbnail.
A random post widget for blogger users or blogspot 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 random 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 does. In fact, a random posts widget could keep your old posts 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.
So, let’s get started and see the two best responsive random post widget for blogspot.
You Might Also Like This: How to start a blog with WordPress
Random Post Widget for Blogger.com or Blogspot Users
In this section, I’m going to provide two different stylist random post widget codes. Simply, you can add these codes into your blogger template.
1. Random post widget 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 blogspot with a 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 also has 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 Code:
Copy the below code and paste it into your blogger template where you want to show the random post on your blog post.
<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)+"…"}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>How to Configure Random Post Widget Code in Blogspot
This configuration settings will let you change the background image and how many posts should be shown to the users. To do this, follow these steps.
Number of Posts Should be Shown to Users: Change the above-highlighted bold number “6” [var borp_number = 6;] to increase or decrease the total number of posts on the widget. For example, if you add “5” then on the random post widget users can see five random posts.
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 bold URL with your URL. Also, if you want to use the same widget without change any background, you can replace the highlighted URL with “#”.
2. Random post widget without thumbnail
Although I’ve recommended the above widget with a thumbnail, you can try this random post widget for blogger.com without thumbnail. If you’re wondering if 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 so 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 Code:
If you don’t want to use a thumbnail on your random post widget then this code will help you to use a random post widget on your blogspot post without any thumbnail.
Simply, copy and paste the code into your blogger.com template.
<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&callback=rp_results_label&max-results=10"></script>
<script>
var currentposturl="";
var maxresults=6;
removeRandomDuplicate(); showRandomLabels();
</script>
</div>Random post widget without thumbnail configuration settings:
How many posts to show: Change the above-highlighted number “6” to increase or decrease the total number of posts on your widget.
How to Add Random Posts Widget Code to Blogger.com or Blogspot
We have already seen two different types of random posts widget for blogger.com. Now it is time to add them to your blog. Adding 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.
For example, We want to add random post widget to bottom sidebar of the blog post.
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.
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.
After pasting the code, click on “Save”. It’s done.
Step 5: Finally, click on the “Save” button >> “Save arrangement (at the top right corner)”. If you did follow all the steps then everything is done successfully, go to your blog, and refresh it. You’ll see your chosen random post widget will be working perfectly.
Final Thought
I have given some stylists a random post widget for blogger.com or blogspot. 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.