Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger

| 29 comments

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 Paulund.co.uk 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{
list-style:none;
}
#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;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}

#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>
</ul>
<a title=”Follow Me” href=”http://www.twitter.com/paulcrowepro” target=”_blank”><img src=”http://2.bp.blogspot.com/-4AGdDmbmgME/TlaB48rCL6I/AAAAAAAAE8M/LGVBmA81n2E/s1600/twitter-bird-gadget.png” /></a>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/paulcrowepro.json?callback=twitterCallback2&count=1″></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 Paulund.co.uk

29 comments:

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

    ReplyDelete

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

    ReplyDelete

  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
    x

    ReplyDelete

  4. Ishah @ Beauty MamasAugust 28, 2011 at 4:45 PM

    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?

    ReplyDelete

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

    ReplyDelete

  6. thanks !!

    ReplyDelete

  7. 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?

    ReplyDelete

  8. 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?

    ReplyDelete

  9. ഷാനു തഴവാSeptember 3, 2011 at 8:52 PM

    thankuuuuuuuuuuuuu

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  12. I am speechless.
    Thanks a lot.

    ReplyDelete

  13. 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

    ReplyDelete

  14. 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!

    ReplyDelete

  15. I super love it… thank you so much….

    ReplyDelete

  16. Thanks Paul. Great

    ReplyDelete

  17. nice and usefull…

    ReplyDelete

  18. very nice.. thanks..

    ReplyDelete

  19. Love it! Thanks 😀

    ReplyDelete

  20. I followed the instructions and it just says “loading tweets” and nothing ever loads. Any idea what I’m doing wrong?

    ReplyDelete

  21. thanks a lot !!!!!!!!!!!!!

    ReplyDelete

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

    ReplyDelete

  23. MY LOVE LETTER TO YOU ALL 🙂October 30, 2011 at 5:29 PM

    My tweet bird bubble is not showing what should i do

    ReplyDelete

  24. 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.

    ReplyDelete

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

    ReplyDelete

  26. This awesome, thanks 😀

    ReplyDelete

  27. 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.

    ReplyDelete

  28. Ανδρέας ΖαχαρόπουλοςApril 28, 2012 at 8:55 PM

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

    ReplyDelete

  29. Search “]]>” and copy&paste the css-code there!

    ReplyDelete