Tweet Twitter Bird With Speech Bubble Widget for Blogger

Well Tweet Twitter bird is an Awesome widget. here an impressive bird will be added t your blogger with a speech bubble over it.And also Our tweets are visible on the Speech Bubble.Add this widget and make your blog more impressive.Especially this widget is attracted by many of the Visitors of blog.ill show you how to add this Twitter bird widget with a Speech bubble containing a Latest tweets of you.The widget looks like in the Below image :.

Add a Latest Twitter tweet bird:.

Step 1: Login to your Blogger then Go to Design < Template Designer then Click                       Advanced and Hit on Add Css button.

Now Copy and paste the Below Code into the Css Section.

#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;
}

Now After adding the Css code just Return to the Design page and go to Page elements .


Now Click on add gadget choose Html/Javascript and paste the Below code in it.

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/saikiransama" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFnDvfQDL92MHTxOxwn6m-XifXdsd1vxVVBsThn__80VtwC_oaZqTpt7v925NOjLQgrv_l-ErY780RYtiUyBzuVUNqkedqu-Rsh96-Pzo74JaFyl9KyZ2vjV7myAoujYD_f8sOOeP9ti4/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/saikiransama.json?callback=twitterCallback2&count=1"></script>

Note :- Change my twitter username  Saikiransama  With yours

After Replacing just save and Check out your Twitter Gadget.that's it Enjoy!