SEO Search

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Sunday, 11 March 2012

Add Random Posts Widget to Blogger

Posted on 15:12 by Unknown
The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

How to add Random Posts Widget to Blogger

Step 1. Log in to Blogger Dashboard, and select Template > Edit HTML (click on Proceed button if needed)



Step 2. Select "Expand Widget Templates"

Step 3. Find (CTRL + F) the following tag:

]]></b:skin>

Step 4. Just above it, paste the code below :

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Step 5. Save Template.

Step 6. Go to Layout, click on Add a Gadget 

random posts widget, random blogger

Step 7. Add a new HTML/JavaScript Gadget
random posts blogger

Step 8. Paste the following code in the empy HTML box:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
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>
<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/AVvXsEiKUuLO8UYZ28nozaJShbYwgUvNIAIxxJmhZqBI3P62hRcvwzxokRXNiH6SFFhvDaIaybNjJPFEf88onEkWxiUgSBlFoQIPAfRpq87I9Gvfj1Wd1EFYU5DZf5xdb4yRHuJ8TsMO9AVZpDo/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" 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>

Note: Replace no. 5 with the number of posts you want to be show.

Step 9. Press Save and Enjoy!
Email ThisBlogThis!Share to XShare to Facebook
Posted in Blog Design, blogger, blogger posts, posts, Widgets | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • How to change Blogger "Post A Comment" Message
    In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I...
  • CSS Basics. How to Apply Rounded Corners On Images #1
    This tutorial will explain how to change the outside border of any image using some simple CSS rules to make it round, but this is so easy t...
  • CSS Basics. How to Apply Rounded Corners On Images #2
    In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program...
  • How to Replace Older Posts and Newer Posts Links with Blogger Post Titles
    If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not ju...
  • Making a gadget visible only to the blog administrator
    And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Sur...
  • Expandable Recent Comments Widget for Blogger/Blogspot
    This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don...
  • How to Add a Widget Below First Post in Blogger
    This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post. First, you must understand that the usu...
  • Google adsense optimization tips
    What is Google Ad S ense?  Google AdSense is a free program run by Google that allows you to display Google adverts on your blog/website and...
  • How to Burn Blogger RSS Feeds at Feedburner
    What is RSS? A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have ...
  • How To Remove Blogger Attribution Gadget
    The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may o...

Categories

  • adsense
  • adsense optimization
  • adsense tips
  • Auto Video Template
  • avatars
  • blockquotes
  • Blog Design
  • blogger
  • blogger posts
  • color code generator
  • Comments
  • comments tricks
  • css
  • emoticons
  • Emoticons/Smileys
  • Facebook
  • feedburner
  • forum
  • Hacks
  • how to
  • how to make a blog
  • Image Effects
  • internet
  • jQuery
  • labels
  • menus
  • Navigation
  • navigation menu
  • popular posts
  • posts
  • read more
  • recent comments
  • recent posts
  • related posts
  • RSS
  • SEO
  • sitemaps
  • slideshows
  • social media
  • social media plugins
  • static pages
  • Templates
  • threaded comments
  • titles
  • tools
  • translating
  • webbligi
  • Widgets

Blog Archive

  • ►  2013 (57)
    • ►  November (4)
    • ►  October (16)
    • ►  September (13)
    • ►  June (3)
    • ►  May (4)
    • ►  April (5)
    • ►  March (12)
  • ▼  2012 (73)
    • ►  July (1)
    • ►  June (3)
    • ►  May (9)
    • ►  April (23)
    • ▼  March (30)
      • How To Add Related Posts Widget To Blogger with Th...
      • How to change Blogger "Post A Comment" Message
      • How to optimize Images and Increase Blog Traffic
      • How To SEO Optimize Your Blogger Blog Titles For H...
      • How To Remove Blogger Attribution Gadget
      • How to add a gadget/widget inside your Blogger Blo...
      • How to Burn Blogger RSS Feeds at Feedburner
      • Add Facebook Like Button Below Post Titles
      • Auto Read More with thumbnail for Blogger/Blogspot...
      • Adsense Ad Code Converter
      • How to put Adsense ads on Blogger/Blogspot
      • How To Remove Blogger Threaded Comments
      • Add Videos/Images in Blogger/Blogspot Comments
      • How to add Facebook Like/Fan Box to Blogger
      • Add Recent Comments Widget with Avatars To Blogger
      • Add Random Posts Widget to Blogger
      • Remove - Subscribe to: Posts (Atom) from Blogger
      • Add Multi-Colored Popular Posts to Blogger
      • Recent Comments Widget For Blogger
      • Hide/Show Widgets/Gadgets in Home/post/static/arch...
      • How to create Google Adsense Account
      • How to create a Facebook Fan Page for your Blog
      • How to remove/hide or add a Peek A Boo Effect to y...
      • Awesome Slide Open Heart Bookmarking Gadget For Bl...
      • Add Css/Jquery fixed horizontal menu to blogger blog
      • What is blogger and how you can create a blogger b...
      • Google adsense optimization tips
      • Add Social Bookmarking Buttons near Adsense Ads
      • AdSense optimization tips straight from Google
      • Wrap text around Adsense block in left or right co...
    • ►  February (7)
Powered by Blogger.

About Me

Unknown
View my complete profile