Customized twitter widget for blogger blogs

Twitter is definitely one of the most successful social networking sites which almost all the bloggers use. As I've seen many bloggers using the original twitter widget available in the official twitter website. Now In this tutorial you can stylize your twitter widget like this and make your blog look more beautiful. LIKE the one below


Simple Customized twitter widget for blogger blogs.

There are few steps to be followed you just need 5 minutes to design a customized twitter widget for blogger.

Step1. Visit the twitter page and get the code for twitter here.

Step2. Your code will look something like the one below

<div id="twitter_div">
<h2 class="sidebar-title">Updates Via Twitter</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/cheth">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/cheth.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

Step 3. Now to add the twitter bird you can see in the code

div id="twitter_div"

You have to insert the style part between

<div style="background: url(http://i385.photobucket.com/albums/oo295/chethstudios/tweet_cheth.gif) top left no-repeat; padding-left: 50px;" id="twitter_div">

This will add the twitter bird from twitterific.

Step 4. Now if you want to insert a background color like I've used orange here you have to: add hte code below before your url

style="background: #EC4705;"

Step 5. Now your final code will look like this.

<div style="background: #EC4705;"url(http://i385.photobucket.com/albums/oo295/chethstudios/tweet_cheth.gif) top left no-repeat; padding-left: 50px;"id="twitter_div">
<h2 class="sidebar-title">Updates Via Twitter</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/cheth">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/cheth.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

That's it your new awesome twitter widget is ready to be added to your blog. Go to your Edit Layout >> Add a Gadget >> HTML / Javascript.

Here I've used #EC4705 as the background color you can change the codes and add any background color you like. ( for yellow use #FBF807, you can find the codes on internet)

Here, for demonstration I've used my username as cheth . For any assistance you can comment here or direct message on twitter here.

Follow me on twitter for any help twitter profile

I promise to be back with more useful blogger widgets and hacks.
posted in twitter hacks for blogger.