1.Login to your blogger dashboard--> Design - -> Edit HTML.
2.Scroll down to where you see </head> tag .
3.Copy below Code and paste it just before the </head> tag .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function showTweets(elem, username, number)
{
var html = '<ul>';
var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{
$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";
elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}
$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'bloggertoolz', 5)
});
</script>
<style type="text/css">
#preload {display: none;}
#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('http://4.bp.blogspot.com/_HJvXUqHmf9Y/TGISCT-W4yI/AAAAAAAAABI/VdnChTmVqUs/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>
NOTE : Replace bloggertoolz with your twitter username.
4.Now save your template.
5.Go to Layout --> Page Elements.
6.Click on 'Add a Gadget'.
7.Select 'HTML/Javascript' and add the code given below:
<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/bloggertoolz">Follow me on twitter</a></li></ul>
</div>
8.Now Save YourTemplate and you are done.
This post first appeared on Blogger Toolz And Tricks | Latest Tips For Bloggers | Best Blogger Templates, please read the originial post: here