Welcome visitor! Please wait till I load my blog page...

.......

Recent Posts with Thumbnails Widget for Blogger (blogspot)

Displaying small thumbnail images adjacent to post titles in the recent post widget on blogs not only looks nice, but also entice visitors to click on your posts. So how to do it in Blogger? This post explains how to add Recent Posts widget in Blogger with image thumbnails.this Gadget will help you to display the most Recent Posts on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs.

So, let's see how to install this cool widget in your blog..


  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial


  • 1. Sign into Blogger dashboard
    2. Go to Design » Add a gadget » html/javascript

    3. Just copy and paste this code..


    <div id="24work">
    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">
    imgr = new Array();

    imgr[0] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[1] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[2] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[3] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[4] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";


    showRandomImg = true;

    tablewidth = 298;
    cellspacing = 8;
    borderColor = "#ffffff";
    bgTD = "#ffffff";

    imgwidth = 80;
    imgheight = 80;

    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";

    text = "no";

    showPostDate = false;

    summaryPost = 50;
    summaryFontsize = 11;
    summaryColor = "#666";
    icon2 = " ";

    numposts = 5;

    home_page = "http://24works.blogspot.com/";

    </script>
    <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>
    <span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span></div>





    Explanation:


    (Edit the values to fit your blog)

    tablewidth - Width of the widget
    cellspacing - Space between cells (default one is good)
    borderColor - Border color (add the background color of your template to perfectly blend it in the template)
    thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)
    fntsize - Font size of the title
    acolor - Color of the titleaBold - you want bold titles? (true or false)
    numposts How many posts you want to show?
    home_page : http://24works.blogspot.com/ (change this to your blog url)


    Now Click Save



    this widget was made by [ http://www.instantfundas.com ]









    you might like the Recent Posts with Thumbnails Widget 2 



    This post explains how to add Recent Posts widget in Blogger with image thumbnails:

    well they are many hacks up there on the net for RECENT POSTS BLOGGER !

    and actually i have tried many of them ! and while i was surfing the net than i found this amazing hack !

    finally i have got what i want ! this widget was made by the legend “bloggertricks”we thanks him for this amazing widget ,very simple recent posts …bravo for the great job !




    So, let's see how to install this cool widget 2  in your blog..

    1. Sign into Blogger dashboard
    2. Go to Design » Add a gadget » html/javascript

    3. Just copy and paste this code..



    <div id="24work">
    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">

    imgr = new Array();


    imgr[0] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[1] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[2] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[3] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[4] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
    showRandomImg = true;

    boxwidth = 298;

    cellspacing = 8;

    borderColor = "#ffffff";

    bgTD = "#000000";

    thumbwidth = 80;

    thumbheight = 80;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = false;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 5;

    home_page = "http://24works.blogspot.com/";

    </script>

    <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-2.js" type="text/javascript"></script>
    <span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span></div>




    There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.


    4. In the code, look for the line…

    home_page = "http://24works.blogspot.com/";

    and replace the blog address with your own blog address


    5. How to change the number of posts
    By default, this widget is set to display a maximum of 5 recent posts. To change this number,
    numposts = 5;
    edit line in the code and replace the number 5 with the number of posts desired:

    6. How to change thumbwidth & thumbheight
    thumbwidth = 80;

    thumbheight = 80;

    Width and Height of the thumbnail (default are good)


    Now Click Save













    Recent Posts Widget with Thumbnails for Blogger 



    You are surely familiar with the Recent posts widget for blogger and you can integrate easily into blogger in few steps.But now, Its time to show recent posts widget with image thumbnails in blogger as it will shows your post images with the recent posts in your blog sidebar.Its so easy to implement it into your blogger templates just like the typical recent posts widget.Thansk to Aneesh for this awesome widget! The main features of this widget are:

    *It shows the latest posts with tiny thumbnails images (size 75 x 75).
    *It shows a bold title of the posts with summary.
    *It shows the number of comments, date and ofcourse, a Read more link.
    *And its highly customizable (don't worry, i will tell you how to customize).

    This widget can be seen live in my blog sidebar.Anyways step ahead to know how to add it in your blogspot blogs.

    How to Add Recent Posts Widget with Thumbnails to blogger:

    Step 1.Login to your blogger dashboard and go to layout.
    Step 2.Now click "Add a Gadget" on your desired sidebar and select "HTML/ Javascript".
    Step 3.Now copy the below code and paste it in the "HTML/ Javascript" box:


    <div id="24work">
    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;



    float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>



    <script style='text/javascript' src='http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentpostswiththumbnailsv3.js'></script>



    <script style='text/javascript'>



    var numposts = 5;

    var showpostthumbnails = true;

    var displaymore = true;

    var displayseparator = true;

    var showcommentnum = true;

    var showpostdate = true;

    var showpostsummary = true;

    var numchars = 100;</script>



    <script src='http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>



    <a href='http://24work.blogspot.com'><img style="border: 0" alt="Blogger Widgets" src="http://1.bp.blogspot.com/-OwxOIoWDn-0/Tu8jhJCQjwI/AAAAAAAAAVw/PlrwjLKxb30/s1600/blogger-widgets-recent-posts.png" /></a><span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span></div>



    Step 4.Now Replace 24works.blogspot.com with you desired blog URL and save the widget and you are done.

    Customization:

    Now its easy to customize this widget, just have a glimpse on the above code and you will see some code colored in "Red".You can play with this code to customize it.You can change the number of posts to show or you can change other options to True/ False to customize it!






    UPDATE:  I updated some of my posts, this post I update Recent Posts with Thumbnails Widget for Blogger / Blogspot........







    10 comments:

    1. i put last 3rd code but not work maximum number of post please reply or mail razaqemail@gmail.com

      ReplyDelete
    2. show only maximum number 25 post

      ReplyDelete
    3. I have just tried this on my blog and it did not work. Have gone through all the coding and can't find anything wrong. Do know of any other gadget that I can try?

      ReplyDelete
    4. This is great and now working on my blogpage. thank you so much!

      I have one question if possible. I am wondering if I could change the image of "no image" to my logo picture. I thought it would be nice to have my logo appear as "no image" picture when I do not have any picture on articles.

      Thank you so much!

      ReplyDelete
    5. your site is too cool men u r rockin

      hi admin
      how can i put my recent posts on slider like moving and dynamic

      ReplyDelete
    6. Good Tut, How would I implement this into my website homepage. Thanks

      ReplyDelete
    7. This is great. Is there a way to make the recent posts list horizontally? I'm adding it to the top of my blog. Also is there a way to not display the post title. I just want to display the image. Thank you!

      ReplyDelete
    8. it would be great if the images are in dynamic with the recent post that is posted and not static.

      ReplyDelete
    9. Thank you very much!!!! It is working

      ReplyDelete