How to show recent twitter tweets on your blogger

1. Log in to blogger and Go to Design >> Edit HTML

2 .Make sure u Click on "Expand Widget Templates"

3. Find this tag by using Ctrl+F </head>

4. Paste below code before  </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'), 'your twitter username', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxHZOrW2-YmLAJqlan58rvL16vvngWbP4ZqddvtWPqR9ViccMOvfajeeBq8jAhe9nvWZT3zgKFx1WY46k4wZyGjfMcOSgD__tqRYHUgyhYdsru7LpVySts7WDuZvB7eitGzJVS_-yyy4/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

5. Save your template.

6. Now Go to Design >> Page Element

7. Click  'Add a Gadget' and select 'HTML/Javascript'

8.Paste below code. 

<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/your twitter username">Follow me on twitter</a></li></ul>
</div>

9.Replace your twitter username with you twitter username

10. Save it . You are done.