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.
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
HOHOHO!! very cute n funny!! love this, Paul!
ReplyDelete
thanks for this great post 😀
i use most of your tips on my blog
ReplyDelete
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
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
@ Ishah – Just change the image URL for the bird with another and your set.
ReplyDelete
thanks !!
ReplyDelete
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
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
thankuuuuuuuuuuuuu
ReplyDelete
What if I want to change the dialog box itself to an image. How do I do that?
ReplyDelete
This article is pretty good, I have learned so much.
ReplyDelete
I am speechless.
Thanks a lot.
ReplyDelete
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
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
I super love it… thank you so much….
ReplyDelete
Thanks Paul. Great
ReplyDelete
nice and usefull…
ReplyDelete
very nice.. thanks..
ReplyDelete
Love it! Thanks 😀
ReplyDelete
I followed the instructions and it just says “loading tweets” and nothing ever loads. Any idea what I’m doing wrong?
ReplyDelete
thanks a lot !!!!!!!!!!!!!
ReplyDelete
My tweets are showing, however not in a speech bubble…how do I fix it so they show in the bubble?
ReplyDelete
My tweet bird bubble is not showing what should i do
ReplyDelete
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
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
This awesome, thanks 😀
ReplyDelete
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
Hi Paul, is nice but now I want to remove … how to remove the css code???
ReplyDelete
Search “]]>” and copy&paste the css-code there!
ReplyDelete