Membuat Wiget Burung Twitter Beterbangan di Blog

Sebelumnya saya berterima kasih dulu sama System of Blog selaku sumber dari tutorial ini. membuat Burung Twitter Berterbangan di Blog contohnya pada halaman ini, terlihat keren bukan? jika burung itu di klik maka akan mengarah pada akun twitter anda.. Jika kalian Mengubah posisi cursor/scrolling maka burung inipun akan terbang berubah posisi.

Keren Kan? Gimana cara membuatnya? Sebenernya gampang...

1. Login Ke Blogger >> Rancangan >> Tambah Widget >> HTML/Javascript
2. Lalu masukkan Kode ini :
   

   <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/techgyo";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
   </script>
   <a id="theBird" href="http://twitter.com/akuntwittersobat" 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/techgyo" 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>

    
3. Ganti tulisan Biru-Biru (akuntwittersobat) menjadi ID twitter anda
   Simpan deh... Burung mu (eh.. bukan burung yang itu..) Jadi dehh.... 

Artikel Terkait: