Showing newest 3 of 30 posts from 05.2009. Show older posts
Showing newest 3 of 30 posts from 05.2009. Show older posts
  • Thursday, May 28, 2009 Recent Posts Widget With Post Thumbnails & Comments Count Recent Posts WidgetHave you ever thought of having a list of Recent post on your blog sidebar. Blogger allows us to do this through feeds, but that is limited to a maximum of 5 items. There are numerous scripts to hack this and list any number of recent posts in your blog. A good approach is to use the Feedburner BuzzBoost, to show either the Recent posts or Recent Comments in your blog and is pretty much useful, runs without any issues too.

    Recently, Bloggertricks.com released a post telling us how to add a Recent Posts widget in your blog, with thumbnails of images ( yes, pictures ) that were included in your blog post. If you don't have any pictures included in your post, the script will add a "No Image" thumbnail automatically. This is a cool widget and you can see I am actually using it in my blog, in the sidebar under the header "Recent Waves"

    So here is how you do it.

    Log into your Blogger account, and go to Layout >> Page Elements
    (click Edit Layout in the Blogger Dashboard >> click Layout tab >> click Page Elements). Add a new HTML/JavaScript gadget into your sidebar by clicking "Add Gadget".
    Now when you have the Gadget Editor popped up in front of you, copy the below given code and paste it inside it.

    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
    showRandomImg = true;
    boxwidth = 298;
    cellspacing = 8;
    borderColor = "#ffffff";
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 5;
    home_page = "HTTP://WWW.TECHFLAPS.COM/;
    </script>
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js"
    type="text/javascript"></script>


    Now edit the code, ( the variable which are shown in different colors, in bold - as they control the appearence of the widget) to get a widget of your preference and to show what you want to show.

    Recent Posts Widget
    • boxwidth : This handles the width of the widget. Change this to make the widget adjustable in your sidebar.

    • cellspacing : Space between cells ( Space between individual post entries )

    • borderColor : This handles the border as well as BACKGROUND color of the widget. Change this to make the widget more appealing and blend it to your blog background.

    • thumbwidth & thumbheight : Width and Height of the thumbnail (default are good)

    • fntsize : Change this to increase / decrease font size of the title

    • acolor : This will change the color of the title.

    • aBold : Make this to false if you don't want bold titles.

    • numposts : How many posts you want to show?

    • home_page : HTTP://WWW.TECHFLAPS.COM/(Change this to your blog URL)


    The script which picks the recent posts and the comments count is hosted by Bloggertricks.com. It will be better if you download the script and host it by your own, to handle accidental deletes, delay in execution and so on. A better option will be to use Google Pages ( we are currently using this).

    Save the widget and now you are ready to go. Please let us know your comments and feedback's too.Happy Blogging!!!!

    1 Comment | Read More...


Subscribe to: Posts (Atom)

Recent Waves

Recent Comments