Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger


Using the latest Twitter API it's become easy to create a neat latest tweets gadget.In this post i will show you how to add a Twitter bird with a speech bubble containing your latest tweet to your blog.The idea comes from and all that's needed is some Css and a few lines of script.

View Demo Button

Add The Latest Tweet Twitter Bird To Your Blog

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Template Designer, Then Advanced > Add Css

Step 2. Copy and Paste the following code into the Css section (See Paste Code Here Above)

#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;

#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;

Step 3. Thats the Css added now return to the design page and click Add A Gadget > Choose Html / Javascript

Step 4. Copy and Paste the following code into the Html/Javascript gadget

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
<a title="Follow Me" href="" target="_blank"><img src="" /></a>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

Important - Change my Twitter username paulcrowepro x2 with yours.

Step 5. Click Save and check out your new Twitter gadget.

That's it a very simple yet stylish latest tweet gadget, make sure to check out more of our Twitter Gadgets And Tutorials.Thanks again to

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. HOHOHO!! very cute n funny!! love this, Paul!

  2. thanks for this great post :D
    i use most of your tips on my blog

  3. unfortunately i don't have the speech bubble appearing on my tweetbird, any ideas what this maybe?

    Thanks for such a high res and quality tweetbird though

  4. If I wanted to use a different pic (say.. one of myself?) would I just have to replace the tweetbird image? Or is there coding I would have to replace as well?

  5. @ Ishah - Just change the image URL for the bird with another and your set.

  6. This is awesome, thank you! The text in my bubble is coming out light grey and is hard to read against the white background of the bubble. Can I change the text color?

  7. Thanks for this tut Paul. Hm a few days back I followed the instructions and everything was ok. Today I checked and the speech bubble disappeared! what has happened and how can I get that speech bubble back?

  8. What if I want to change the dialog box itself to an image. How do I do that?

  9. This article is pretty good, I have learned so much.

  10. Hi Paul, can you give me the link to your tutorials, i want to know how to put Sharing Bookmarking at the side of my page like yours whenever i clicked on a post. Thanks

  11. Your tips are extremely useful. Can you tell me how to add the side slider that appears on your site for bookmarking and sharing? Thx!

  12. I super love it... thank you so much....

  13. I followed the instructions and it just says "loading tweets" and nothing ever loads. Any idea what I'm doing wrong?

  14. My tweets are showing, however not in a speech do I fix it so they show in the bubble?

  15. My tweet bird bubble is not showing what should i do

  16. Mine say's loading tweets and does not load them also it say's target="_blank">

    I copied and pasted and just changed to my twitter name. Not sure why thsi sin't working.

  17. Nevermind I figured out what I did wrong, I didn't open the butoon for html. Thank you so much for helping out others!

  18. Hey Thanks for this tutorial. I was just wondering though is it possible to display tweets from people I'm following on Twitter. Been hunting around for an api that lets me do that. It'd be a dream if you knew how.

    Thanks again for the great tool.

  19. Hi Paul, is nice but now I want to remove ... how to remove the css code???

  20. Search "]]>" and copy&paste the css-code there!


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us