Dynamic Random Post Widget With Hover Effect For Blogger

How to add a dynamic random post widget (Images Only) with hovering effect in blogger - If you have a dashing blog with lots of content, then a random post widget is a very unique way to display your blog article randomly. The best part of this widget is that, with a little touch of CSS this widget will look more elegant when you touch or expose the cursor on it. So without wasting your time, I'm moving on the main topic and the topic is that, today with the help of this article we are going to learn how we can easily add this dynamic random post widget in our blog with the help of some CSS code.

Before you add this widget in your blog, make sure to take a look of this widget by clicking on the below demo button.

Live Demo

Okay, if you like this widget and want to install it on your own blog, then follow the below simple steps and add this dynamic widget in your blog without having any problem.

Login to your blogger account – Login, Select your blog and then go to the "layout" section.

Now add a new widget by clicking on the "Add a gadget" link and then select the "Html/JavaScript" from the popup box.

After that copy the following Html Code and paste it in the html/JavaScript box.

<style type='text/css'>
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 auto!important; padding: 0 !important;text-align:center }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;border:none;width:90px;height:90px;overflow:hidden;margin-right:5px !important;margin-top:5px !important}
#random-posts img{float:left;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;;border:none;outline:0;position:static;transition:all .8s ease-out;}
#random-posts img:hover {-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
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>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}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/AVvXsEivFqT7bD9BVsrf_tYKrZIT3ZDHDprkxm9ARUSbFyxRCAXxknLJql86yLgGgSDodcb7JJFDED21vi9Kz1ImCyv0f2Lrbt7mciCAbQdRHp382sZ7WwsJUGRu1OeuHkhk3gqULd0f8qnKI7Wd/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');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>
</div>

The JavaScript code above, var rdp_numposts= 9; is to show how many posts you want to display in the widget. Change the number 9 and adjust it according to your need.

After that, click on the orange save button and then refresh your blog. The sidebar will display a random post widget on each of your blog pages.

That's it! I hope you like this random post widget! Stay tuned for more blogger widgets!