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.
Save as PDF
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 73 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