Awesome Horizontal Random Post With Thumbnail Widget For Blogger

After our previous posts about “Related Posts Widget” and “Popular Posts Widget” today we are sharing a cool & awesome random post with thumbnail widget for blogger including animation. Adding a Random post widget to a blog has always proved to be extremely beneficial for those bloggers who consistently get higher Bounce rate. Moreover, after reading out the article users can feel free to visit some random posts. It reduces the Bounce rate pretty handsomely and plays a significant role in engaging visitors. This is actually a widget which is re-sizes automatically and also you don’t have to add any extra codes on your template too.

When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower and also fit foe SEO. Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy. There are lots of recent posts gadgets and archive gadgets including related post with popularposts gadgets that you can use but the one we will cover in this post will defiantly grab the attention of people on your blog.

This recent posts widget is similar to the standard recent posts with thumbnails but with one great twist.This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using an animated effect that smoothly scrolls through the posts.

Although “Related Posts Widget” and “Popular Posts Widget” are important for all types of blogs, but in blogs where almost all the posts are similar (like blogs with articles on recipes, money-making, computer tricks or automobiles etc.), visitors usually do not mind reading some quite-unrelated posts too. So along with Related Posts widget, a “Random Posts widget” on your blog will help you to increase the number of page impressions because visitor want some new topic except what he is looking for.

So without any more preface and text, here we go to the features list and then get the code to spice up your code with this animated widget. It’s designed for under post so use it there because when visitor end the reading of post then it want something new that well be in the view of random posts. It will change th posts on every reload and on every page randomly too.

Features:

1.) Awesome And Stylish Widget.
2.) Will Show Random Post, Not Related Post.
3.) OnHover Description Animation Added.
4.) Thumbnail View Widgets Style.
5.) Pure JavaScript Code, No JQuery.
6.) HTML And CSS3 Animation Added.
7.) Under Post Widget Designed.
8.) Will Be Shown Only On Post Page.
9.) Fully Customizable.
10.) Can Change Post Count.
11.) Also Control What To Show Or Hide.
12.) Quick To Load And Easy To Install.
13.) SEO Supported.
14.) Decrease Your Bounce Rate.
15.) Engaged Your Readers And Increase Your Page Views.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty And Move It Under BlogPost Gadget.
9.) Click Save, Now You Are Done.

<!-- This Is A CopyRight Code Of EXEIdeas (www.exeideas.com).It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#random-posts {float: center;text-transform: none;height: 130px;background-color: #f4f4f4;box-shadow: 0 0 0 1px white inset;-moz-box-shadow: 0 0 0 1px #fff inset;-webkit-box-shadow: 0 0 0 1px white inset;padding: 5px;}
#random-posts h2 {padding: 10px 15px;margin: -5px 0px 5px -5px;font-family: Helvetica, Arial;line-height: 1.1em;font-weight: bold;text-shadow: 0 1px 0 white;font-size: 20px;letter-spacing: -1px;color: #333;background: #E4E4E4;border: 1px solid white;width: 658px;box-shadow: 0 0 0 1px white inset;-moz-box-shadow: 0 0 0 1px #fff inset;-webkit-box-shadow: 0 0 0 1px white inset;}
#random-posts li{float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:72px;height:72px;padding:6px;}
#random-posts li img:hover {background-color: #444444;color: white; font-weight: bold; text-decoration: initial;}
#random-posts li .rp_animation{position:absolute;width:250px;top:-200px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .rp_animation{right:0}
#random-posts li:hover .rp_animation{top:-90px;opacity:1;visibility:visible}
.rp_animation span{font-size:90%;color:#B30B0B}
.rp_animation p{font-size:90%;}
</style>
<ul id='random-posts'>
<h2>Random Posts...!!!</h2>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts = 8; //Number Of Random Posts
var rdp_snippet_length = 110; //Length Of Description Text, 0 To Hide
var rdp_datecomment = 'yes'; //Show Date And Comment 'yes/no'
var rdp_comment = 'Comments'; //Text For Comment Count
var rdp_disable = 'Comments Are Off Here...'; //Text If Comment Is Disabled On Post/Blog
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
function totalposts(a){rdp_total_posts=a.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 b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="rp_animation"><h5>'+m+"</h5>");if(rdp_datecomment=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");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 style='clear:both'/>
</b:if>
<!-- This Is A CopyRight Code Of EXEIdeas (www.exeideas.com).It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Customization:

1.) Change 8 To Show Your Desired Number Of Random Posts.
2.) Change 110 To Show Your Desired Length Of Description Text, Add To Hide Description.
3.) Change yes To no To Hide Date And Comment In Description.
4.) Change Comments To Your Desired Text For Comment Count.
5.) Change Comments Are Off Here… To Your Desired Text If Comment Is Disabled On Post/Blog.
6.) Change Random Posts…!!! With Your Desired Heading.
7.) Save And Done.