Get New Twitter Widget With Special Latest Tweet Bubble

With this awesome widget all of you are able to add twitter widget to your blog and also able to add latest tweet widget which appears like a bubble above the twitter bird widget.It provides a really clean a nice look to your blog.Today here i'll tell you how to add this Twitter latest tweet widget bubble with Twitter bird in a very neat and clean mode in your blog.

This widget allows your readers to know about your latest tweet on your twitter account and they are able to join you on twitter very easily.

So now i don't waste time and tell you the all necessary steps, if you want to see a demo of this widget then click on the image below and check this widget yourself.

Adding The Latest Tweet Twitter Bird Widget To Your Blog

As we always say you have to remember to backup your template before editing or make any changes in your blogs HTML.

Step:1.) In your Blogger Dashboard > Click On Template designer > Then Click On Advanced > Click On Add Css

Step.2)Just Copy and paste the following Css code into the Css section (As seen in the image 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.) That's the Css added now return to the design page and click on Add A Gadget > Choose HTMl/Javascript widget

Step 4.)Copy and paste the following HTML 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/tekleisure" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj77a7cO8gmj49DW9BZFrWbBlQ2xrDpGNZpluj1BPjh_nScAKZnRqS9WxuqTdqPWIA-jCrwyjifILIAvbPt7icj63NsPscBXXbIrgfCjy91E3BbbnjigERgQpvP-8BQgb5QgBR3kPj6XFQJ/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/tekleisure.json?callback=twitterCallback2&count=1"></script>

Note:Change my twitter name Tekleisure with your twitter name to show your latest tweet.

Now save your gadget and check this awesome Twitter bird widget with latest tweet bubble its yet simple but stylish make your comments about this widget.