Twitter Bird!!

 

I know I have other stories to be shared first with you guys,but this little Twitter Bird is really interesting and cute!

 

As you can see,the Twitter Bird will fly happily across your blog and if you click on it,you will be directed to my Twitter page!

Isn’t that cute?It will be even cuter if the bird chirps upon clicks :)

 

Now,how do you get your OWN Twitter Bird?

 

1. Go to your Dashboard.

2.There,click on Design.

3.Then,click on EDIT HTML.You can see coding in the box.

4.Search for the word </body> in the coding sequence.Difficult? Use CTRL + F to make your life easy.

5.Next, copy the code below to paste before the </body>. Don’t forget to insert your Twitter Username to replace the word USERNAME on the code.

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/USERNAME";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
   </script>
<a id="theBird" href="http://twitter.com/USERNAME" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/USERNAME" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

*Having problem to copy and paste the code?Click HERE to get the code.

6.Done? Save the template and Voila!! You have your own Twitter Bird on your blog.

 

Thank you Noor Fatin for your tutorial.

 

Till then~