333 Add a Customized Twitter Widget to your Blogger Blog April 22, 2008 /

Twitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".

Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.

Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.

If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.

The widget code for your Twitter badge will most likely appear like this:

<div <--Add Style Here --> id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">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/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.

Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

<div id="twitter_div"

and add your styling code to this section.

Here is an example of the Twitter widget code with style declarations added in red:

<div style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">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/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Add a Twitter Widget using this Widget Installer

For those of you who would prefer a simple method of adding a stylized Twitter widget to your Blogger powered blog, here is a widget installer which will add a widget with an easily recognizable "Twitterific" icon, like this:

The colors and fonts of this widget will blend with other elements of your blog, while the Twitterific icon will be easily recognized and help your readers associate this widget with Twitter.

To add this widget to your blog, simply fill in the details in the form below. Your Twitter username is the one which you have chosen to represent you on Twitter. For example, my username us "amandafazani" and my Twitter URL is http://twitter.com/amandafazani. Add this username into the appropriate box, then change the title and number of tweets to display as suited to your needs.

I hope this post has been informative in explaining how you can add style to your Twitter badge/widget in your Blogger blog. Please let me know what you think by leaving your comments below.