Before i tell you how to add random post widget in blogger i would like to tell you about random post widget and its feature.The title of post has font size of 11px while image thumbnail had radius of 70px.Random articles are like related article, this widget will show three random post with round image thumbnail and title snippets.It show articles randomly.Also it show the date of articles publish and how many comments on that post.
How to add Random post widget in blogger
1 First login to your blogger account and go to your blog.
2 Go to template and edit Html
3 Find this code
4 Copy the below code and paste above ]]></b:skin>
5 Now go to layout and add gadget of html/javascript
Paste then below code there
6 Save the gadget now visit your blog to confirm.you can see random post are displayed.
Note: this random article widget show five number of post.you can change it by editing to your requirement.
It also show date of articles published. and comment on random post, you can also hide it.so if you want to remove date and number of comment, beneath random post title look at fifth line of above code that is var rdp_info='yes'; change yes to no and save the gadget.
Also If your random post widget width is not match to your blog sidebar.you can adjust position of the widget.To change look at code of step 4.you can see 304 lighted in red color.increase or decrease widget width according to your requirement.
you are done.Enjoy beautiful random post in blogger.if you have any query feel free to ask.
If you have problem in design of random post widget then you have to do few additional steps.remove the code that you have added above ]]></b:skin> in your template.
GO to template and click customize go to advanced then click on add css, copy the code from step 4 and paste it there and click apply to blog.Now your random post design work properly
3 Find this code
]]></b:skin>
4 Copy the below code and paste above ]]></b:skin>
/* Random Posts Style */#random-posts img {float: left;margin-right: 10px;width: 45px;height: 45px;background-color: #EEEEEE;padding: 3px;border-radius: 70px;}ul#random-posts {list-style-type: none;width: 304px;float: right;display: inline-block;margin: 20px -10px 0px 0px;}ul#random-posts li {margin-bottom: 3px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNv9nfLOaKQo_Cb2TunJuCSnteDmpv2i_RORiWXdV0RLkpxjEeUvOg7YjbtL0mj0yc6JvuvpO_iEQtCopAa_0hYOkcOeCtXLu39cNM9vxop_feTHNH0vJji5dO_6JYh00RX5KJ15RVdP1/s1600/blockquote-bg.png);background-repeat: repeat;border-bottom: 1px solid #E8E8E8;padding: 6px 2px;}ul#random-posts li span {font: 11px Cambria,Georgia,sans-serif;}#random-posts h4 {font: 15px Cambria,Georgia,sans-serif;color: #E75A3A;font-weight: bold;}#random-posts a {color: #222;font: 12px Cambria,Georgia,sans-serif;}#random-posts a:hover {color: #E75A3A;}
5 Now go to layout and add gadget of html/javascript
Paste then below code there
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=4;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<a style="font-size: 0px; color: #fcfcfc; float: right; margin: 5px;" href="http://5gblogger.blogspot.com/2016/01/add-random-post-widget-in-blogger.html" rel="dofollow">random post Widget</a>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMliyzU397cqnhjDQck-wGKCtUQDiYYjqaVvbjVCIgqofuz3M4Oi_ZgBMf39daIeifWY2t6anm8OfTZCvQdoDCk1C1fvhQ4LSIRX4_sr3EF0F256xIvU9siGwKPA7t6Zh0pW8KzV4tyE/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" title="'+rdp_snippet+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
6 Save the gadget now visit your blog to confirm.you can see random post are displayed.
Note: this random article widget show five number of post.you can change it by editing to your requirement.
Customization of widget
To change number of random post displayed look at third line in above code,that is var rdp_numposts=4; change number four to your choice number.It also show date of articles published. and comment on random post, you can also hide it.so if you want to remove date and number of comment, beneath random post title look at fifth line of above code that is var rdp_info='yes'; change yes to no and save the gadget.
Also If your random post widget width is not match to your blog sidebar.you can adjust position of the widget.To change look at code of step 4.you can see 304 lighted in red color.increase or decrease widget width according to your requirement.
you are done.Enjoy beautiful random post in blogger.if you have any query feel free to ask.
If you have problem in design of random post widget then you have to do few additional steps.remove the code that you have added above ]]></b:skin> in your template.
GO to template and click customize go to advanced then click on add css, copy the code from step 4 and paste it there and click apply to blog.Now your random post design work properly
