![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZSplNIOjTD33N32KPP-btYAMOM3PREclQQ8PSbunQ1OXlr7ikugyLUPpij3GFiH5e_zdDxlUlaZEo9Hb4mrxhj-8LVL_jk-yeYFXEkycb6DfLz2Vl0j41hJIpuE1ZapTBe1knOzkHJi3/s200/twitter-bird-gadget.png)
![View Demo Button](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUvqoKr6rdjXLONwu5f7s-kd17xYtzvGgHJmoEmXWmwri-RRu8oKekvc0KRrz8fBrZSw39fqstu1Cx3dx1QVFTyD1xHBxWqvUiyC-JBe_GTLMcPmtgEWJcHgQjkP96CEA2UimdLeeFEbn/s1600/view-blogger-tutorial-demo.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Sj6ZeXVERI0MJuI6GRrdxz4q-ojq8kTO4heYJb_9eFZZFNpuNBn7vtXllFbvCm6r4vS9tLOX4wmfqHiKGDfRVBF2amO5ESSQZImnndgP3edRoVBBKyifZtm-elWNs_KADVx7TOIYhP07/s1600/template-designer-button-blogger.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYA3-T8pKSyt0CDz6ck8WYg2epIkNTlvMXtGJ20UKAt6rkkdo3ukArUBq4A30oEyhKqNhqs5pM35QhWCm7H-IQMzf6U9MyEW4kes5U8UYCR53Cg7YT-EeU04M2ARfFhG3ZqLFw3zDRg8h3/s400/advanced-css-code-here-blogger.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrpOJ-q-VIRitawfwOef3wQR-MFoW2SxVT74l677cbqRcbSHRUJnoZR8RbWMTtA5WCq2XRnPooBFMvaHmgmj0OwtdUURtvFhuQ9gas5wylMdujrjXlZ5mEkt8tYnojJNWcOF7MB9fmPia/s1600/add+a+gadget.bmp)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwV5W8zl5f7-GpV52-ibrMeYK8eM8fIHps6UUMKATgL4JpV3kp0Ur3Q5od5ri_vkt6iejF_ml-vhWyTrvk_3bnroB00s13Vfy0UBn0PtxXGM0tNFau6McD9MYhJhSjIKSPaYyko3OkmB8/s1600/htmljavascript.bmp)
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEildYHIS71t4bOvsDw9OrMNW59NQJ-J4T4-CAPxpoY1k5NppGyejZOCG-X_-ZQaCPymbnRyuQXdTtzgWKN-YdoDU0032eVRyVHIo72MexJDJaec8XC3t8S8Ccdbuu0d5cF33j6b_fprl88q/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.