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/AVvXsEh04gUIreBHDjCU8yV3uPBzO4PQF7sz5EUnpnNbp9gSKFWJyD_XnOGMmm2oWUrcyj9bWZ7AFAYjFYnj-ttG3FYuYaZxJZcc1UEJL5S9GqcdImNyNahHgOZBUfZIDXYStks-ULyQdESyScQ/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.
0 comments:
Post a Comment