Search Blog








Add Random Post Widget With Round Thumbnail In Blogger

we use label to arrange post but if you have blog and updating daily with new things then you may have many post.Random post widget is the need of that blogger blog so visitor can access to more random post.while you can also use other widgets.


Also you can Add Multi Color Recent post widget to get more expose of your blog.

random post widget with thumbnail

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
]]></b:skin>



adding design of blog

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)+"&#133;";};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

IconIconIconFollow Me on Pinterest
Blog Widget by LinkWithin