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.



135 Comments:
Hi Amanda!
great great post!
Spot on as usual!
good article, thanks
Hi Amanda
This is another amazing widget. Although I was able to add one before on my site but it kept my screen freezing and stops my sidebar to load. Do you know what could be wrong?
Thanks for your tips and help.
BTW I am now using your blue steel template. Please let me know what you think.
Thanks a lot for your widget from Italy :-D
this is great! but do u have the bird in pink color?
For Podxien and Tietyt: Thank you for your kind comments, I'm glad you have found this helpful :)
For MsPinkBiik:
I love how you've used the Blue Steel template! As far as I can tell the Twitter widget should work just fine. It may be that Twitter was acting up again (sometimes the server goes down in which case it takes AGES for my header section to load).
You could try adding this again, but do let me know if it still doesn't work for you and I'll check your blog to see what could be wrong.
For Massimiliano Forastieri:
Thank you for stopping by! It's great to know this widget has been useful for you too.
For Jean Chia:
I don't have a pink one to hand, but feel free to grab the image if you'd prefer to alter this in your favorite image editor :)
hi amanda! oh great! thanks for giving me the permission even tho' i doubt that i can turn the bird to pink color. thanks again, amanda! you are simply the best!
Thank you! Looks great.
Hi there,
Thanks for this, I have added it to my blog.
One thing: I don't want the image gif to be hosted by your server, I'd prefer it to be uploaded onto my website.
Do you know how to change the coding so I can upload a picture instead of pointing to a URL?
Is there any easy css coding to move this widget to the top right of my blog (similar positions to what you have)?
Thanks,
D
Thanks Amanda! This is awesome. The widget looks so much cleaner and more professional on my site now. Great tip!
This is great. Can you tell us how to create a "follow" me link with it?
Thank you so much, it was great help!
Thank you. All I needed was the border, and I didn't feel like relearning CSS again just for that.
Cheers,
-b
Thanks Amanda for another blogger.com resource. I have to say ditto about not pulling on your server with the image. I was feeling lazy about going into CSS to change anything. I'll figure out something.
Hi Amanda,
I am trying to put it in my blog header as that's an empty space I would like to utilize with twitter.
Do you have some CSS edit handy so that I can place it in header instead of the sidebar.
Thanks
I appreciate any help in this regard.
Thanks Amanda,
I was able to modify the twitter widget with your help.
I appreciate all your help.
You are really a Blogger BUSTER.
BTW, how is your back now? Hope you are doing good.
Take care...
Hmm, I'm running into trouble with my tweet's line spacing. It's all close together. I'm no code / CSS expert and have tried in futility for the past 45 minutes at least to fix it. Yours is the best link I've found, but I still couldn't get the lines to be unjumbled. Any help you can give would be greatly appreciated!!
The blog address is watchlistenshare.blogspot.com
I found this widget today and it fits perfecty in my blog. Thank you.
Hey that was awesome! The best little twitter widget I have seen, so simple too. Thank you for doing the hard work!
Thanks Amanda, I just search at Google for twitter follow code and come at your blog and got help!
I just discovered your blog!! You're amazing, thanks for this!
AWESOME!!
Thanks alot!Appreciate your post. Love it and added to all my blogs...
http://blissfulbodyoga.blogspot.com
http://dailygratitudeblog.blogspot.com
http://tealdesigns.blogspot.com
Thanks amanda.. now i can put my pic. beside my activity on twitter
Thanks for the article... but the twitter widget is showing up in my blogger account but no tweets are coming through.. help??
andrewalt@aol.com
Wow! This is really great stuff.
I have just discovered your site and now am you of your followers.
got it too work but the bird looks.... ....well rubbish???
Will try again, thanks for the info ;)
You are a dear and a luv for posting such easy directions. It worked! Thanks!
Hey everyone! Is there anyway to make my Tweets appear as Blogspot posts? I want them to appear to similar to the way they feed into Tumblr.
Hi Amanda. Dropping by to give you a big thank you for helping me out on this one. It certainly adds another human touch to any blog! Take Care, Peter
Awesome! Exactly what I was looking for - thanks ;)
great!! tanx amanda..
Very nice thank you
Amanda, I use your page all the time, it's the best. Is there any way to put multiple people's tweets on the same site. eatsalem.com
landed from google, thanks for the great info.
Information Review
thanks amanda..this is just the right post that i been looking for..now my blog http://www.efzec.com looks great.all thanks to most of your tutorials..cheers~~
I really do not like social networking but it represent a great tool for promoting. So thank you for help.
www.computorial.blogspot.com
Thanks! This is awesome, but there is a kink I haven't been able to fix. I have my background image for the Widget, but the heigth of it changes depending on how much I type into Twitter. Is there a code I can insert that will make the background image stay the same dimensions regardless of how many letters I type into Twitter? Please help! :-)
heather@espanaphotography.com
http://www.espanaphotographyblog.com
Thanks, very helpful :)
great thing
Thanks a lot
thanks this is great! but do you know how to limit the number of tweets it shows on the blog? it just keeps on going like the ever ready bunny pushing down all the other widgets into the wild deep... i'de rather it only post the last 5 or so... hmmm... any thoughts most appreciated.
thanks, And
Hi Amanda,
I'm having problems with trying to adjust line spacing and paragraph spacing. Would you help me out please? Thank you!
My site is: http://maitaiinjapan.blogspot.com/
Yippee! I did it - with your awesome help! Thanks so much!
thanxx amanda >> :)
Great!
but how can I show only one twitter message?
I thought that this could be done by the &count=1 variable, but 5 twitter messages continue to appear at my blog widget.
Can someone help?
Thank you very much.
http://webdoispontozeroplus.blogspot.com
This is great but how do i make the twitter updates go to the right?
I understand how to add another widget to the header but not make i go right.
hope you understand me and can help thanks
this is what I looking for. Great share!
Thanks much. It works nicely
Okay, COOL! As always! :)
nice info
Thanks for sharing these relevant information! However, have you ever heard that twitter is now breaking down the wall of separation between celebrities and their fans? Yes, that’s right! Twitter, the social networking site, and cyberspace phenomenon, has been utilized by personalities such as Ashton Kutcher and wife Demi Moore, the director Kevin Smith, singer Lily Allen, and LaVar Burton, the actor known for his role on Star Trek as Geordie the engineer, as well as host of the Reading Rainbow and his role in Alex Haley's Roots. Users post updates, whatever they want to say, questions and answers, in 140 word clips called Tweets. Membership is free, so you don't have to get installment loans to get onto Twitter.
manage twitter followers
The Completely Automated Twitter Growth & Money Making System for People that Want to Set Up A System ONCE, Forget About It, and Have it Grow and Make Money EVERY Day!
http://875f81xab56p9w8aqfx7183x0f.hop.clickbank.net
cool. is there any way you can turn it around and have your blogger blogs appear on twitter?
An excellent post....thanks for sharing your nice work.
Thanks a bunch for your tips. From Malaysia.
Really breathtaking further informative topic. Thank you seeing sharing this.
thaaaaanks
http://www.kh-girl.com
hi, thanks for this :)
love it!
Thanks ! But not work with me :D
http://nqhuy.net
I'm happy with the Twitter widget I have. What's the difference between this gadget and the one I already have on my blog?
Thanks for the twitter image URL
nice info
Muy bueno!
Really great!
Hi,
I have gone through ur post.You are imparting knowledge no doubt....Don't be so clever and cunning.Don't cheat reader.........In ur code,that is ur twitter page that will enhance ur website rank not person using ur mentioned code....
Is there a way to customize the Twitter badge on my Blogger page so that it doesn't include the Tweets I post in response to other people's Tweets (the ones that start with a @...)?
It seems like Twitter has changed its policy lately so that people don't see those Tweets on my Twitter page unless they're following both me and the person I'm responding to. Am I correct about that?
But those sorts of posts are still showing up in the Twitter badge on my blog. I think it's sort of confusing for people to say my responses to people there without seeing what I'm responding to, so I'd love to filter out those Tweets if possible.
I like your widgets there is another twitter widget but this one is more attractive. NIce desing
Love it!
uffh.. finally i found what i need .. thx alot
Thanks! ^_^ Helped a lot.
Cool stuffs ,thank you for the share.
Thanks for the useful information.
nice posting, thanks
Visit my page: http://itassist.blogspot.com - FREE Computer Assistance and Advisory
thank you so much for sharing...^^
Great
Te astept pe blogul meu: http://itassist.blogspot.com - Asistenta si Consultanta GRATUITA IT
Cheers, thanks for sharing
nice little widget. thanks.
Thank you.... I used your Blog's help to add a widget to my Blog and the little blue bird looks CUTE!
Thanks, again!
Thanks for the very clear instructions! Appreciate it tremendously.
Awesome! Thanks so much!
this is FABULOUS! thank you!
Did anyone answer @Robert Loerzel above because I want to know that answer too! How do we get direct messages and retweets out of the widget?
thanks for article very
Thanks for the tip.
I managed to embed the badge to my posts:
MobileSpoon
thank you very much
that's is really good article.. people always looking for easy way to get latest update with twitter..
Hi Amanda. Great post (I found you through Google). Do you know how I can format it just to bring through tweets and not replies?
It's awesome. I was in search of this scrip for long days. finally i got this scrip here.
Thanks thanks thanks
Thanks for the useful information.
thanx alot
I'm trying to install more than one twitter widget in my blogger blog but it doesn't work. It just load the first widget and the two others are out.
Can you help me please ?
Hello,Ma'am i have tried to place this widget in my blog,but the widget is not showing my recent updates.If possible would you please help,the link is http://bestsurfer.blogspot.com/2009/09/representative-post.html
It's a great idea to put that widget in a blog.
Thanks for the useful information.
It worked! Very helpful tip... Thanks a lot!
Thanks for the widget, i found you on google and working on my blog !!
Amazing widget!
thanks!
Great tip on the widgets and great technical advice.
Here's how to add tons of Twitter followers fast and effectively to you Twitter account: Take your Twitter account viral and add hundreds of followers overnight!
Thanks!
i've added to
www.hclmelaptop.blogspot.com
Thanks for sharing :)
This is great. Thanks for posting.
I noticed that after I put in the widget, whenever someone visits my page they are prompt of a twitter name and password. Is this because I chose to "protect" my tweets in my twitter account?
I'd appreciate you help :)
Hi! I'm using your widget on my blog now. Thanks!
Really a great tool. thanks
In your comment that says "Add style here", you forgot an ! to complete the HTML comment.
A friendly heads up just in case anyone was going to copy that html.
Cheers,
-Adam
Is there a way of filtering tweets by hashtag or keyword as well as by usedid? Thanks, Graham.
Great information Thanks
Thank you so so so so much for posting this! I've been looking all over for a simple way to add a self-stylized badge to my website without a lot of crazy extra features that I don't need.
Just wanted to know if there's anyway to remove the "days ago" link (for example "25 days ago") or stylize this in-line?
thank you so much. it works.
helloo how are you selam nasılsınız arkadaşlar
nice site with usefull tips, thanks
http://netbookspot.co.cc
Great tip! Thanks so much:)
I tried a number of pre-built twitter gadgets but just couldn't find one that blended in well with my blogs and did not take up too much space. As an alternative, I found some javascript code online and added some new features that delivers exactly what I wanted. You can see an example of it at http://onlinebrokerreview.blogspot.com/.
To add this code yourself, simply create a new gadget in blogger of type text/javascript, cut and paste the below code and replace my twitter user name (onlinebrokerrev) with your own. You then have a lot of configuration options. Get the full code at http://pastebin.com/f58a63cd3
Works great on my site...I just switch around the image to right...Let me know your thoughts everyone and leave comments at my site...www.wesleysoccerblog.com
Is there a way to filter the timeline so it will filter out all tweets with an @ symbol. I would like it so my blog will display things I say about me, not what I say to others
Hi,
thanks for the information. It worked, (:
awesome...its working...thanks
Thanks for shearing !
Nice info!!!
I would love to add in my sites
http://www.Getexaminfo.blogspot.com
http://www.indoexams.blogspot.com
Thanks so much for this! The twitter widget in the blogger library didn't show with the same style as the rest of my widgets, so this is very useful for me.
However, one thing I really liked about the one in the blogger library was the square bullet next to each tweet. I have tried to add it to your code myself but I can't get it right. Can you help me?
Another thing I am having trouble with is the width of the tweets - they are slightly too wide for my sidebar, so the words on the right are always cut off. Any help would be greatly appreciated! Thank you.
This is really great and informative article. thanks for it.
twitter follower adder
nice tips, very useful article. thanks
That Twitter widget is a good idea. Now if I can figure out how to install it on my site.
Great site, Thanks for the helpful tips.
I really enjoyed thank you!!!!!!!!
DUI Helps
I've lost count of how many times I've used your tips and widgets.
Many many thanks!
Thank you very much for sharing this. I was looking for this.
Thank you very much. I will sure use it and put a link back to this post , so that others can take benefit.
"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." -- Im sorry but I cant seem to find the form you were referring to. I would like to update the twitter widget in my blog. Please help me :)Thanks
myunpurethoughts.blogspot.com
Thank you very much for sharing this. I was looking for this.
This twitter widget is really helpful, I would surely like to add this.
Google PageRank value and the high / www.css3.info good continuation of the success of a site
Google PageRank value of a good site bloggerbuster.com have continued success
thank you so much
sesliyes
porno izle
sesli chat
sesli chat
kirkagac pansiyon
sesliyes
görüntülü chat
thank you very much
sesliyes
porno izle
sesli chat
sesli chat
kirkagac pansiyon
sesliyes
görüntülü chat
Great post, really helped, thanks.
Just wanted to point out you can also change the font of the text by adding bold or italic codes around the <[ul] id="twitter_update_list"><[/ul]> part (minus the [ ]'s).
I also wanted to know if there was a way of getting rid of the indent I seem to have on my Twitter widget - the first line of text is fine but the rest appears to move to the right by a couple of px. Why is this - and how can I stop it?!
My blog: http://bnjrmlle.blogspot.com
Thanks again.
Post a Comment