- Login your blogger account.
- Go to Blogger Dashboard > choose Customize.
- Choose Layout then click Edit HTML.
- Copy and Paste the following code below before (above) </head>:
<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 found on the recent post with thumbnail script file
5. Now the Save button and you are done!
Take a breaks first.. And please make me some tea.. haha.. just kidding.. Now the JavaScript powering the Recent Post is on your blogger template! We just need to call the JavaScript function accordingly! Please follow instruction below how to put on widget.
Making a Recent Post Widget from your Blogger Layout:
1. Go to Blogger Dashboard > choose Customize.
2. Choose Layout then Page Element.
3. Then click Add A Gadget at sidebar or anywhere you like. Choose HTML/JavaScript Gadgets. Copy and paste following code below exactly on 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://greentechspot.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>
4. 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.
5. Save the Widget and finish.
Further tweaking the JavaScript code to blend with your blog theme:
- 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!
- acolor = "#000099"; Change the color of the Post Title link.
- aBold = true; True for bold fonts false for normal fonts.
No comments:
Post a Comment