How to manually add a customizable Twitter stream widget to Blogger

From this tutorial, you will be able to add your Twitter updates to your website.

PREVIEW see it in action

You will need these file(s) for this tutorial:

	twitterexample.png
	twitterstream.zip

To add a customizable Twitter stream widget:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Click “Add a Gadget” and select “HTML/JavaScript” and copy/paste the following section code inside the textbox.

<div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="<a href="view-source:http://twitter.com/javascripts/blogger.js">http://twitter.com/javascripts/blogger.js</a>"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<strong><font color="#ff0000">YOU-TWITTER-ID</font></strong>.json?callback=twitterCallback2&count=10"></script></div>

3. In the above code, you will need to add you Twitter ID and select save.

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right after: ]]></b:skin>

<style> #twitter_div { position: absolute; left: 136px; top: 154px; width: 345px; height: 370px; overflow: auto; } ul#twitter_update_list { list-style: decimal; font-size: 14px; } ul#twitter_update_list li { margin-bottom: 10px; padding: 10px; color: #444444;; font-weight:bold; } a { color: #06F; } body { background-image: url(.../twitterexample.png); background-repeat: no-repeat; } </style>

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.