How to Add Random Post Widget in Blogger blog with Pictures
Hello and welcome to our blog, in this article, I will show you how to insert or add a random post widget with pictures in the blogger blog.
How to Add Random Post in Blogger with Pictures
What is a Random post widget?
Random post means you show some random post link to your blog visitor which is published in your blog and it is very useful to display some random post to increase page-view, visitors spend more time in your blog And the income also increases. Here I am giving you random post widget code with and without thumbnail and select the code which is more suitable for your blog.
Why do we need to add a Random post widget to the blog?
Here blogger has a popular post gadget feature but if you want to show some old random post to our visitors in a blog then blogger currently does not have any such gadget or widget, in this post, I will show you a random post widget Show blogger show solution. Let me show that our blog is capable of showing some random posts, let's get started on the step to get a random posts widget Show on our blogger.
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)+"…"}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/AVvXsEhOo65kgEPwyCDc4E7A5dmC1vaVWV_8yYCW-wU1QDkvLcvqz652Ny-PTEe8SOu62Gbv33y3oWpHVM14WwfhK6W579_Jxna59mVLBgHj_5liwVvyzC-tmrflmtRLWi2l4fSpt6TP7lzi1Ev3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivfHwXqxL35GKPlzPnCZ8sQ1IY2z1yaamcuW8k0ZsuJDNQd4SMj2K-uoaA_houppuK9uTyX0Kkv2BhwkN73s7f69xugV7vLby7lPSSSfmYQDD_HAprAbzuIJap1PL78vAqLEFwAW7SiGvZ/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=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 have given you the screenshot of my demo blog, where I enable a random post widget in the blog, in this post I give you 2 random post widget options with thumbnail and without thumbnail, now you can select any gadget or widget code according to your blog design
Post a Comment