Home
Blogger

Add Random Post widget with Large wide Image thumbnail

Random Post widget with Large wide Image thumbnail for Blogger
random posts

Random Post widget is one of the most significant widget which can bring more page views daily. A random post widget means visitors will see different post after refresh of each page. If you add this widget then it will able to display your all post randomly which create a change to get click by visitors. Suppose your blog has more than 500 post but don’t think visitors will go through all of your posts. Because older post always ignore by blog visitors, even those are very important and higher quality content. So random post widget only the way to display your old and new posts randomly. Where your older post also get priority.

I have designed this random post widget not like older widget that you would get over the net. Most of them are having small image thumbnail or text only. But this random post widget will able to display large thumbnail with post title and summary which is rare. Those blogger are using wide screen blogger template this is the perfect widget for them. If you use this widget in blog sidebar then it will make your blog beautiful. You would see that wide image thumbnail holding post title and summary by a transparent background. You may have seen this widget in Wordpress blog but rare in Google blog.


Live Demo


Features of random post widget

  • Built with pure CSS
  • Fast loading
  • Large Image thumbnails
  • Able to display post title with image
  • Post summary within the image thumbnail
  • Colored title and description


So if you want to install this widget then follow the simple steps from below

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then Select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<center>
<style>
#BloggerSpiceRandomPost {background-color:transparent;width: 300px;}
#BloggerSpiceRandomPostHolder {position: relative;height: 140px;width: 295px;font-family:Georgia;}
#BloggerSpiceRandomPost li {margin-left: -28px;margin-bottom: 10px;width: 295px;height: 140px;overflow: hidden;margin-top: 10px;padding: 0;list-style: none;}
#BloggerSpiceRandomPost li:first-child {margin-top: 5px;}
.BloggerSpiceRandomPostBS h2 {display: block;font-size:14px;margin: 5px 0px;}
.BloggerSpiceRandomPostBS {background: transparent url(http://1.bp.blogspot.com/-iLkwGbH1i6U/UiL32PyuSpI/AAAAAAAAEgs/1eWFbeG7YR4/s1600/BS+transparent+BG.png) repeat scroll 0 0;color: #04BDFA;padding: 2px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;font-size:12px;}
</style>
<div id='BloggerSpiceRandomPost'>
<script style='text/javascript'>
//<![CDATA[
/*
Large Thumbnail Random Post Widget
by  www.bloggerspice.com.
*/
function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_BloggerSpice>numPosts){numposts_BloggerSpice=numPosts}for(i=0;i<numposts_BloggerSpice;++i){var entry_BloggerSpice=json.feed.entry[indexPosts[i]];var posttitle_BloggerSpice=entry_BloggerSpice.title.$t;for(var k=0;k<entry_BloggerSpice.link.length;k++){if(entry_BloggerSpice.link[k].rel=='alternate'){posturl_BloggerSpice=entry_BloggerSpice.link[k].href;break}}if("content"in entry_BloggerSpice){var postcontent_BloggerSpice=entry_BloggerSpice.content.$t}s=postcontent_BloggerSpice;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl_BloggerSpice=d}else var thumburl_BloggerSpice='http://1.bp.blogspot.com/-ndayGrJ6g-4/UiL3zwHKcfI/AAAAAAAAEgk/2egWhJgnr3Y/s320/BS+No+Image+Dark.jpg';document.write('<a href="'+posturl_BloggerSpice+'"><li><div id="BloggerSpiceRandomPostHolder"><span class="BloggerSpiceRandomPostBS"><h2>');document.write(posttitle_BloggerSpice+'</h2>');var re=/<\S[^>]*>/g;postcontent_BloggerSpice=postcontent_BloggerSpice.replace(re,"");if(showpostsummary_BloggerSpice==true){if(postcontent_BloggerSpice.length<numchars_BloggerSpice){document.write(postcontent_BloggerSpice);document.write('</span>')}else{postcontent_BloggerSpice=postcontent_BloggerSpice.substring(0,numchars_BloggerSpice);var quoteEnd_BloggerSpice=postcontent_BloggerSpice.lastIndexOf(" ");postcontent_BloggerSpice=postcontent_BloggerSpice.substring(0,quoteEnd_BloggerSpice);document.write(postcontent_BloggerSpice+'');document.write('</span>')}}document.write('<img src="'+thumburl_BloggerSpice+'" width="'+post_image_width+'" height="'+post_image_height+'"/></div>');document.write('</li></a>')}document.write('</ul>')}
//]]>
</script>
<script style='text/javascript'>
var showpostthumbnails_BloggerSpice = true;
var showpostsummary_BloggerSpice = true;
var random_posts = true;
var numchars_BloggerSpice= 100;
var numposts_BloggerSpice= 4;var post_image_width= 295;var post_image_height = 140;</script>
<script src='http://www.bloggerspice.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=999999'></script>
</div>
</center>


Customization

  • Change var numposts_BloggerSpice= 4; value for the number of posts for display
  • Change var post_image_width= 295; the value for image width
  • Change var post_image_height = 140;  the value for image width
  • Alter www.bloggerspice.com with your blog address

23 comments

  1. What A Widget! Really Loving It And Surely Add This In My Blog Thanks For This Bro Keep It Up
    • thanks Samad your comments is really motivating. thanks again for your continuous review about my different tutorials.
  2. article is amazing,,, the words are easy to understand me ...
    • thanks iwan
  3. Hi Mohammed

    I tried to add image title as below but it is showing only the first word... can you help me to show the full "entry_BloggerSpice.title.$t" img title or alt attribute ..

    document.write('|img title='+ posttitle_BloggerSpice +' src="'+thumburl_BloggerSpice+'" width="'+post_image_width+'" height="'+post_image_height+'"/>|/div>');

    Please replace "!" with "<"

    eg. if the title is "This is the Title" , it will show only "This" as title the rest "is the Title" is not showing.

    or if not in img title then make it for link title "|a title='+ posttitle_BloggerSpice +'

    Thank you
    • please send me the (image) screen shot of the problem after adding the widget code. Then I can find out the problem.Thanks
  4. Hi, is it possible to show only the images/thumbnail? If so, what should I change in this code? Thanks for your time.
    • Hi Bia chan Yeh you can show image only. Just make a little change.. find the below code from above script--

      var showpostsummary_BloggerSpice = true;

      Now replace true with false...just like below

      var showpostsummary_BloggerSpice = false;

      Let me know if it work for you. Thanks.
  5. Ive copied and pasted the code into a widget on my side bar and nothing has happened, what am i missing?
    • I just check it is working fine.. you can add below JS file above closing head

      < script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>

      it should work now. Let me know...
  6. Thank you for Random Post Widget Post. I need this and I have added in my blog to view random post.
    • Welcome Karl. Thanks for using this widget.
  7. Hello can i make the posts recent???
  8. Please can i make the posts recent posts instead of Random www.sharewebvideos.blogspot.com
    • Hi Ogunoh.. Yes you can use this widget as Recent Post widget. Just you have to change a line. Just find

      var random_posts = true;

      and change the above code by

      var random_posts = false;

      Thanks
  9. wonderful, thanks
    computer innovations
  10. wonderful, thanks
    computer innovations
  11. its not working on my blog. doesnt appear, how can i fix this?
    • I just tested this widget.but this widget has stopped working with different Blog URL. You have to use same Blog URL for displaying the widget. For example.. you want to display widget in abcd.com so in this case you have to use same Blog URL just like below. then it will display the widget. but if you use other Blog URL then it won't display. :wr

      <script src='http://www.abcd.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=999999'></script>
  12. অসাধারন, সত্যি অসাধারন ভাই। আচ্ছা ভাই আমি এই ডিজাইনের recent post কোড চাই একেবারে same কোনভাবে এটাকে rendom post থেকে recent post করা যাবে? বা এরকম recent post কোড আছে?
    • Hi RealTipsBD,
      yes you can show recent post only thorough this widget. Just replace

      var random_posts = true;

      with

      var random_posts = false;

      now you will see widget is displaying recent posts. :dn
  13. after watching this video you will get large thumbnail in facebook.

    https://www.youtube.com/watch?v=6y5vnlKOxSI
    • Hi Roni, tutorial was good. but simply you can use large image for large thumbnail. For getting large thumbnail image should use 1200px X 720px.
Go Up