Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Related Posts » Awesome Horizontal Random Post With Thumbnail Widget For Blogger

Awesome Horizontal Random Post With Thumbnail Widget For Blogger

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.

Recommended For You:
How To Optimize And Rank Good Your Video on YouTube – Part 2

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.


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.

Recommended For You:
Simple JavaScript Text + Image Slider For Blog And Website

How To Add In Blogspot?

1.) Go To Your
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 ( 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%;}
<ul id='random-posts'>
<h2>Random Posts...!!!</h2>
<script type='text/javaScript'>
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 type='text/javaScript'>
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<;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if([e].rel=="alternate"){var[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var$thumbnail.url}else{c=""}}}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>')};
<div style='clear:both'/>
<!-- This Is A CopyRight Code Of EXEIdeas ( Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->


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.

Recommended For You:
How To Remove/Hide Blogger Official CSS In Your Custom Template?

You Like It, Please Share This Recipe With Your Friends Using...

30 Responses to “Awesome Horizontal Random Post With Thumbnail Widget For Blogger”

  1. Fojnicij says:

    Very nice, thanks a lot. But for my blog its too width. How can i change it?

    • EXEIdeas says:

      Nice Blog. Can You Send Us The ScreenShoot About From Where Till Where On Your Blog? Because We Can’t Get Now What You Want Because There Is No Borders Around Your Main Post.

  2. Bro you are the real coder.Just love your work,simple but eye catching.great….

  3. Fojnicij says:

    Thanks. I just want to resize widget to 500px widht. You can see on right side “popular posts”, it must be on top of sidebar but now this widget pount it down. I looking in script but still cant find.

  4. nubentay uno says:

    oh my…… this is the best code for random post!…. i love it!!!!!!!! see it working here!

    • EXEIdeas says:

      Welcome Here And Thanks For Giving It A Try, It’s Looking Beautiful On Your Blog. Be With US To Get More Like This…

  5. Temptations2 says:

    Thanks for this amazing “random Post” widget. It’s one of the best.

    Many many kudos to you.

  6. Esther Paul says:

    Is there any similar widget available for blogger?
    I have tried this in one of my blog and its working really well. I need this for my Blogger account too.

  7. Ram V says:

    really i want this for particular label does it possible ?

  8. Saransh Kapoor says:

    hey brother please tell me how to show this widget only on main page bcoz i gonna place it below header

  9. maT Joe says:

    Thankssss… this is awesome

  10. Kenneth Clutario Agudo says:

    Thank you for this very easy and clear tutorialyou are such a great help. Any, can you help me shorten the shadow-box on “related post” it was a little bit long in my homepage. Please look at this if you have them, I really need help 🙂

  11. RoFilmeOnline says:

    Great widget, i was looking for this. Thank’s

  12. Marc says:

    Can you tell me how to get the same from a specific Label Category?

    • EXEIdeas says:

      Yes, You can. Just change /feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts to /feeds/posts/default/-/LABEL?alt=json-in-script&max-results=0&callback=totalposts in the upper code

  13. Kajal says:

    Thank you for the post. Its very helpful for me and i think all beginner bloggers
    keep posting good techniques and tutorials.
    i will come back often to visit the page
    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *