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

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

  </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)

• 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!