Lompat ke konten Lompat ke sidebar Lompat ke footer

Random Posts Widget for Blogger With and Without Thumbnail



Random Posts Widget for Blogger With and Without Thumbnail

Random Posts Widget for Blogger With and Without Thumbnail
Random Posts Widget
A random posts widget for blogger can decrease the bounce rate of a blogger blog. Also, it can improve the user engagement by displaying some random posts to your visitors. Therefore I am recommending these lightweight and eye catching widgets for your blog. Actually, these random posts widgets are specially designed for your blog’s sidebar. Another 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 blog, you can give your readers the freedom to navigate your blog more efficiently like the blogger search box widget do. In fact, a random post widget could keep your old blog posts alive by bringing them back in front of your audience. Moreover, you will gather 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

We can add different types of random posts widget in different places of our blog. But before adding, we should think what type of widget should be added to get optimum result. According to me, if we use a random posts widget for blogger with thumbnail, it will help us to get more reader attraction. Therefore I will recommend this one for your blog.

Actually, it is a very lightweight random posts widget for blogger. This widget has also many customization and configuration options. You can change some basic styles of this widget within few click. Moreover, the default design of this widget will suit any type of blog.
Random Posts Widget for Blogger With and Without Thumbnail
Advanced random posts widget 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("https://2.bp.blogspot.com/-eB6ncdwhYU4/WXeAc8w0G_I/AAAAAAAAAGs/JXbaCjRPONoUGFpk_D96AqPWdXD4BEpPgCLcBGAs/s1600/clouds-bg.png");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>

Configuration:

How many posts to show: Change the above-highlighted number “5[var borp_number = 5;] to increase or decrease the total number of random posts of the widget.

Change the background: You can change the background image is used in this widget by changing the above-highlighted URL. Also, if you wish to use this widget without any background, you can replace the highlighted URL with “#”.

Random Posts Widget for Blogger Without Thumbnail

Although I have recommended the above widget, you can try this random posts widget for blogger without thumbnail if you think it is the best suit for your blog. Actually, you can use this random posts widget to not make your blog messy. Moreover, I have designed this widget with an amazing bullet point to attract readers. So I am sure it will do its job.

Random Posts Widget for Blogger With and Without Thumbnail
random posts widget for 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=6;
removeRandomDuplicate(); showRandomLabels();
</script>
</div>

Configuration:

Change the highlighted 6 to show your desired number of random posts. No other configuration is needed. Simply add it to your blog and enjoy.

How to Add Random Posts Widget to Blogger?

We have already seen some amazing and stylish random posts widget for blogger. Now it is time to add them to your blog. As a matter of fact, adding one of these widgets is very easy and needs some few clicks. Simply follow my step by step instruction.

Step 1: At first, you have to log in to your blogger account and land on the blogger dashboard.

Step 2: From the left menu, click on the “Layout” section and find the sidebar area. After that, you will see the “Add a Gadget” link. Click on it.

Random Posts Widget for Blogger With and Without Thumbnail
Add Random Posts Widget to Blogger


Step 3: A popup window will appear in front of you. Scroll down and click on the “HTML/JavaScript” gadget.

Random Posts Widget for Blogger With and Without Thumbnail
Add Html Or JavaScript Widget

Step 4: Now you will see the text area as shown below. Put the title “Random Posts” into the title area and copy your desired random posts widget code from above and paste it into the content area as shown below.

How to Add Random Posts Widget to Blogger-3

Step 5: Finally, click on the “save button > “Save arrangement (at the top right corner)”. If everything is done successfully, go to your blog and refresh it. You will see your chosen random post widget will be working perfectly.
Random Posts Widget for Blogger With and Without Thumbnail
Paste Widget Script and save
I have given some stylish random posts widget for blogger. Hope you have chosen your desired one and added this to your blog without any issue. Although these widgets are tested, if you go through any trouble for the entire process, please leave a comment on that issue. I will get back to you very soon. Also, don’t forget to share this post and subscribe.

Posting Komentar untuk "Random Posts Widget for Blogger With and Without Thumbnail"