Monday, October 10, 2011

Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger

/ Monday, October 10, 2011 /
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

***Important Remember Always Back Up Your Template Before You Make Changes 

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.
Thanks again to


Post a Comment

Copyright © 2010 Note Life Blogger, All rights reserved