Sponsor Post

Best Telegram Groups List Collection - Updated

Saturday, 8 September 2018

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 means you just show some random post to your blog visitors which are published in your blog and it is very useful for displaying some random post for increasing page-views. Here I give you random post widget code with thumbnail and without 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 have 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, in this post, I give you a random post widget solution that is enabled to show some random posts in our 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.
Add Random Post In Blogger 1
Step 2: Now click the HTML/JavaScript gadget.
Add Random Post In Blogger 2
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.
Add Random Post In Blogger 3

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>
<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://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><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
<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=10;removeRandomDuplicate(); showRandomLabels();</script></div><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>

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 enabling Random Post widget in the blog, above I give you the 2 random post widget options with thumbnail and without thumbnail, now select the gadget or widget code according to your blog design.

Read More:- 

14 comments: