Make a Recent Post widget (Thumbnail ready) on Blogger blog without external JavaScript file

I was just surfing the net, when I find this awesome Recent Post with thumbnailed picture at bloggertricks. But one of the biggest drawbacks of this was, that the JavaScript file needed to get attached using external links. So it means an increased time in page loading! So I worked around a trick to include the JavaScript file directly on blogger template. After reading this tutorial you shall know:

  • How to make a Recent Post widget with thumbnail preview and include the necessary JavaScript files directly on blogger template
  • Customize the codes according to the style of your blog and blend the widget color on your blog theme
  • Add as many number of widgets you want. Either Recent posts or posts from a particular category! (That is a particular label)

So read on to know how…

Preliminary works to fix your Blog’s Layout:

Fixing your blog layout Assuming that you are using any default blogger template, or at least that template having default blogger classes, here is what you need to do:

  • Go to Blogger Dashboard > Layout > Edit HTML.
  • Now Add the following lines of codes on your template before ]]></b:skin> (Just as shown on the image above)
    .sidebar .widget-content {

    overflow: hidden;

    word-wrap: break-word;

    }

  • This hack is to safe guard the layout of the table which we are going to make using the Recent Post JS. Now click on save template and you are done!

Including the JavaScript file on your Blogger Template:

This is as simple as explained previously in “Attaching jQuery directly on your blog” post. Just follow the steps below!

  • Again go to Blogger Dashboard > Layout > Edit HTML;
  • Now just before the closing </head> tag on your template add exactly the following lines of codes:
    <script type='text/javascript'>

    function removeHtmlTag(strx,chop){if(strx.indexOf(&quot;&lt;&quot;)!=-1){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length);}}strx=s.join(&quot;&quot;);}chop=(chop&lt;strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&amp;&amp;strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('&lt;table width=&quot;'+boxwidth+'&quot; border=0 bordercolor=&quot;#FF0000&quot; align=&quot;left&quot; cellspacing=&quot;'+cellspacing+'&quot; bgcolor=&quot;'+borderColor+'&quot;&gt;');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot; &quot;)[0];break;}}if(&quot;content&quot;in entry){var postcontent=entry.content.$t;}else if(&quot;summary&quot;in entry){var postcontent=entry.summary.$t;}else var postcontent=&quot;&quot;;postdate=entry.published.$t;if(j&gt;imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf(&quot;&lt;img&quot;);b=s.indexOf(&quot;src=\&quot;&quot;,a);c=s.indexOf(&quot;\&quot;&quot;,b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;))img[i]=d;cmtext=(text!='no')?'&lt;i&gt;&lt;font color=&quot;'+acolor+'&quot;&gt;('+pcm+' '+text+')&lt;/font&gt;&lt;/i&gt;':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'&lt;i&gt;&lt;font color=&quot;'+acolor+'&quot;&gt; - ('+day+' '+m+' '+y+')&lt;/font&gt;&lt;/i&gt;':&quot;&quot;;posttitle=(aBold)?&quot;&lt;b&gt;&quot;+posttitle+&quot;&lt;/b&gt;&quot;:posttitle;var trtd='&lt;tr&gt;&lt;td&gt;&lt;img src=&quot;'+img[i]+'&quot; width=&quot;'+thumbwidth+'&quot; height=&quot;'+thumbheight+'&quot;/&gt;&lt;/td&gt;&lt;td style=&quot;font-size:'+fntsize+'px;&quot;&gt;'+icon+'&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt; &lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;';if(summaryPost==0){trtd='&lt;tr&gt;&lt;td&gt;&lt;img src=&quot;'+img[i]+'&quot; width=&quot;'+thumbwidth+'&quot; height=&quot;'+thumbheight+'&quot;/&gt;&lt;/td&gt;&lt;td&gt;'+icon+'&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';}document.write(trtd);j++;}document.write('&lt;/table&gt;');document.write('&lt;p style=&quot;text-align: right; font-size: 10px;&quot;&gt;Widget by &lt;a href=&quot;http://greentechspot.blogspot.com&quot;&gt;greenTechspot&lt;/a&gt; via &lt;a href=&quot;http://www.bloggertricks.com/2009/05/recent-posts-with-thumbnails-widget-for.html&quot;&gt;Bloggertricks&lt;/a&gt;&lt;/p&gt;');}

    </script>

    If you are having trouble copying this, then you may download it from here! (ZIP File: 2.8KB) Copy exactly the same code before the </head> found on the recentpostwiththumbnail.txt file (As shown on the image below)Pasting the javascript code

  • Now Hit the Save button and you are done!

Now the JavaScript powering the Recent Post is on your blogger template! We just need to call the JavaScript function accordingly! Read below to know how…

Making a Recent Post Widget from your Blogger Layout:

Now the final work…

  • Go to Blogger Dashboard > Layout > Page Elements;
  • Now on the sidebar (or anywhere you like) create a new HTML/JavaScript Gadget;
  • Now paste the following code exactly on the gadget. (If you are having trouble copying then check the what to paste inside htmljavascript gadget.txt file on the ZIP folder you have downloaded)
    <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 = "100%";

     

    cellspacing = "8";

     

    borderColor = "#ffffff";

     

    bgTD = "#000000";

     

    thumbwidth = "48";

     

    thumbheight = "48";

     

    fntsize = "13";

     

    acolor = "#000099";

     

    aBold = true;

     

    icon = " ";

     

    text = "comments";

     

    showPostDate = false;

     

    summaryPost = 40;

     

    summaryFontsize = 10;

     

    summaryColor = "#666";

     

    icon2 = " ";

     

    numposts = 10;

     

    </script>

    <script src="http://greentechspot.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>

  • Replace greentechspot.blogspot.com with the URL of your blog! Also change the max-results=10 to any value corresponding to the number of posts you wish to show! Like max-results=5 for 5 posts.
  • Save the Widget and see your blog! Quite cool isn’t it?

Further tweaking the JavaScript code to blend with your blog theme:

Here are a few options which you can do!

  • boxwidth = "100%"; Change the 100% to a fixed value like "300px"; Make sure that you have wrapped it side a quote and give a proper unit! Else the JS may not work.
  • borderColor = "#ffffff"; Change the hex color code to any value in order to blend into your template. For getting color scheme generators have a look here;
  • thumbwidth = "48"; & thumbheight = "48"; Change it to any numerical value to make thumbnail of that size in pixel.
  • fntsize = "13"; Change the font size of the post heading! (It was not working on the original bloggertricks code, but I have fixed it!)
  • acolor = "#000099"; Change the color of the Post Title link.
  • aBold = true; True for bold fonts false for normal fonts.

Making a Particular Label posts using this script:

The same method can be used to display posts from a particular topic. All the method are same! You need to add a new HTML/JavaScript gadget in the following manner:

  • Go to Blogger Dashboard > Layout > Page Elements and add a HTML/JavaScript Gadget;
  • Now paste the following code inside the gadget:

    <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 = "100%";

    cellspacing = "8";

    borderColor = "#ffffff";

    bgTD = "#000000";

    thumbwidth = "48";

    thumbheight = "48";

    fntsize = "13";

    acolor = "#000099";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = false;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 10;

    </script>

    <script src="http://yourblogname.blogspot.com/feeds/posts/default/-/%LABELNAME%?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>

  • Obviously you need to change yourblogname.blogspot.com with the blogspot address of your blog and %LABELNAME% with the label name! Rest modifications are same as stated above.
  • Note that if your label name contains a space in between then you need to replace that with a “%20” character. Like the label feed URL is

    http://greentechspot.blogspot.com/feeds/posts/default/-/Google%20Products

    not

    http://greentechspot.blogspot.com/feeds/posts/default/-/Google Products

  • Hit Save and you are done

Well that’s all to make a good looking Recent Post in your blogger blog with a Thumbnail. Feel free to modify the code as per your need! And if you are a JS programmer then do what ever you want! Also if you face any problem regarding this feel free to ask through your comments. Also contact me if you wish me to do several tweaks on your blog!

19 comments

  1. vinoth

    I have already used another version of this thing…but this thing looks good because in other versions,the fonts are not in bold..this one has fonts in bold..plus the background is customisable for our blog backgrounds……..

  2. vinoth

    You can add this to the post..

    When we don't have images in the posts ..it shows the image .."the image not available".

    Instead of the five image links you have given,they can change the images depending upon their blog theme …so even if the image is not available..some nice image will be there…so it gives confidence among the people to click the link…

    Make sure that they change all the image links….

    Many people may feel difficult in doing that…so instead of asking them to change….you can change the image links with blogger logo or something like that…

  3. Swashata

    Yaa dats true! Actually I am using a little bit modified version of the same JavaScript to make my sitemap. On the post editor you can just add the callback script and that particular post will start acting as a sitemap (or whatever you want to make).
    The random image was a good idea! I will soon update the post with as many random icons I can 🙂 Thanks for your feedback!

  4. vinoth

    no problem..it would be nice ..if u have free time ..u can create related posts widget..with images..
    I know there is linkwithin widget..but it shows a empty photo if we don't have images..i didn't like it.. hope u create one..no hurry..if you have time u can do that..

  5. vinoth

    thank you for giving bloggerbuster link…
    1)intensebebate
    ya..i agree it has style….but is not working sometimes…i don't want to lose a precious comment from my user..there is not a option for importing my old comments..

    2)js-kit
    It is good,i can import comments..but i install it…the comments of blogger and jskit are shown..first jskit comments is shown..then blogger at the bottom …there is a error ..

    3)disqus …i didn't like it..

    no problem buddy..i will use the blogger itself..

  6. vinoth

    now many people are having one problem…followers widget not working..u can write about it….

    u will get more traffic…

  7. Swashata

    btw, How about having a look on this Recent Post widget for your blog! This is AJAX based and very much easy to use! https://www.intechgrity.com/2009/08/jquery-recent-

    Also when you have included thejQuery framework, then you can use this related post widget! http://www.devilsworkshop.org/best-related-posts-… I have made this guest post at devilsworkshop! You can follow this without any problem! If you are having trouble inserting the jQuery framework, then have a look on this: https://www.intechgrity.com/2009/07/complete-faq-r

  8. Vinod

    I tried installing the widget, it works fine and looks good. The problem is, I want the Post title to appear on top of the thumbnail, it will help me to increase the size of the thumbnail. Kindly help.

    Thanks

  9. Jeny

    hi, I tried to copy the code but there is an ad running on it and when I try to copy the ad start to run. Please fix that in your post. THanks for the post . I hope I will run on my blog. as soon as you fix it I can use it.

    Kind Regards, jeny JOSE.

  10. Saturday Update

    Do you happen to have a simple widget that is easily configurated? I dont want to mess with my html because I don’t know how to do things with it.

    • Swashata Post author

      I have left blogger long before. I think the recent post widget is a standard now in blogger. You might want to check the widget section.

Comments are closed.