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

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.

29 comments:

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

    ReplyDelete
  2. thanks for this great post :D
    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. 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. 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
  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?

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

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

    ReplyDelete
  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

    ReplyDelete
  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!

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

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

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

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

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

    ReplyDelete
  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!

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

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

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

    ReplyDelete



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