Friday, May 1, 2020

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

2 Random Posts Widget for Blogger With And Without Thumbnail


A random post widget for blogger can decrease the bounce rate of your blogger blog. Also, It will help you to improve the user engagement by showing some random posts to your visitors.

Therefor I’m recommending these lightweight and eye-catching widgets for your blog. Actually, these random posts widgets for blogger 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 what type of widget should be added to get optimum result.

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 very responsive and lightweight random posts widget for blogger. 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 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. It you blog is very simple and also don’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 type of random posts widget for blogger. 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 some 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 click on add a gadget, a popup window will appear in front of you. Scroll down the page and click on “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 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 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:




Previous Post
Next Post

Hello Everyone My Name is Rajeev Ranjan and I am Author of this Blogger. In This Blog You Will Find All The Latest News Related To Technology,Political,Lifestyle,Tips & Tricks And Many More Which Can Be Very Useful For Your Daily Life.

0 comments:

How, Can I help You?