Horizontal Random Post Widget for Blogger

Posted On / 14 comments
Do you want to have a random post that looks like a featured post slider? If yes, then you should check this widget out.

It appears just like the image shown below


Horizontal Random Post Widget for Blogger

Features for this widget
  • Easy to install. 
  • Horizontal appearance that looks like a feature post slider
  • Easy to customize
  • Thumbnail ready
  • Doesn't affect loading speed

Install this widget

1. Go to blogger.com account
2. Dashboard then click "layout"
3. Add gadget and select "HTML/Javascript" then copy and paste the following code below
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #random-posts li{width:125px;height:150px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:125px;height:150px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px 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 .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 5; var rdp_snippet_length = 150; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; 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"> 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://4.bp.blogspot.com/-b9kfnZlObjc/UGxyCcbigjI/AAAAAAAAFd4/xPPqLCo9uCA/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="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></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script> </b:if>

4. After copying and pasting the code, put it below header or just above the footer just like shown on the image.

Customize

  • If you want to change the width and height just change this width:125px;height:150px.
  • To change the number of posts just replace this number 5;
  • To change the snippet just replace the value 150;

Troubleshooting

At first I have some trouble using this widget when I put it below header or just above the footer. The snippet is messing with the widget near it and it looks ugly. I tried reducing the snippet value to zero, it helps, but there are still some letters left.

My solution was putting a gap using an image that will blend between this widget and the widget above or below it. In my case, my template is white, so I downloaded a 728x90 pure white image and place it in between. Now it doesn't mess with the design.


[code source: www.growtechinfo.com]

Do you liked it? Got questions? Let me read your thought


Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


14 comments:

  1. @Blog Okulu

    Yes its kinda fuzzy, so that why you need to edit the widget not just copy and paste it the way it were

    ReplyDelete
    Replies
    1. Could you tell what i need to edit to make the thumbs not fuzzy ?

      btw great widget, the best i found so far.

      Delete
  2. probably the best widget out there if you know how to use to right thank you so much my friend

    ReplyDelete
  3. Let`s write that letter we thought of writing "one of these days Tibia Gold, just because someone doesn't love you the way you want them to, doesn't mean they don't love you with all they have Tibia coins, don't waste your time on a man/woman, who isn't willing to waste their time on you sro gold.

    ReplyDelete
  4. If you lose your way, your forever friend guides you and cheers you on Diablo iii Gold, if you turn and walk away, your forever friend follows Buy Diablo iii Gold, your forever friend gets you through the hard times, the sad times, and the confused times Cheap Diablo iii Gold.

    ReplyDelete
  5. Thanks for the post! I was really wondering if we can make money from blogspot blogs and I found your site, which is inspiring enough to start my first blog.

    ReplyDelete
    Replies
    1. Thanks!

      Yes you can actually make money using blogspot blogs, its better than wordpress.com because u can put ads on your blogs. And Blogger is continually improving which is great for us bloggers

      Delete
  6. there's only one problem with the thumbnails...they are out of focus, why?

    ReplyDelete
  7. Nice I am now using in my blog- DEMO really thanks

    ReplyDelete

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

x
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks