Add Flying Twitter Bird on website | javascript Tutorial

You can easily add a Flying Twitter Bird  on website. Learn how to 

create Flying Twitter Bird using java script.  If you want to add Animated Flying Twitter Bird Widget to Blogger.

Don't forget to backup your existing Blogger template to your desktop before editing anything into it.

Go to your Blogger dashboard => Select your blog => Template => Edit HTML => Click anywhere in the code section and press Ctrl + F to find out </body>. Copy the following code and paste it just above to </body> this code.

Just Follow those step:- 

1. First Copy those java Script code.


<script type="text/javascript"> <!-- Change TwitterAccount="your username" -->var twitterAccount = "learn24bd";function tripleflapInit(a){if(typeof a=="undefined"){window.setTimeout("tripleflapInit(1)",250);return}if(!showOnMobile&&typeof navigator.userAgent=="string"&&is_mobile(navigator.userAgent)){return}if(!is_utf8(tweetThisText))tweetThisText=utf8_encode(tweetThisText);var b="http://twitter.com/home?status="+escape(tweetThisText);if(twitterAccount=="")showTweet=false;var c=twitterAccount!=""?"http://twitter.com/"+twitterAccount:otherPageOrFeed!=false?otherPageOrFeed:"http://twitter.com/";var d=document.createElement("a");d.setAttribute("id","tBird");d.setAttribute("href",c);d.setAttribute("target","_blank");d.style.display="block";d.style.position="absolute";d.style.left=birdPosX+"px";d.style.top=birdPosY+"px";d.style.width=spriteWidth+"px";d.style.height=spriteHeight+"px";d.style.background="url('"+birdSprite+"') no-repeat transparent";d.style.backgroundPosition="-0px -0px";d.style.zIndex="947";d.onmouseover=function(){scareTheBird();showButtonsTimeout=window.setTimeout("showButtons(0,"+windowWidth+","+windowHeight+")",400);window.clearTimeout(hideButtonsTimeout)};d.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(d);var e=document.createElement("a");e.setAttribute("id","tBirdLtweet");e.setAttribute("href",b);e.setAttribute("target","_blank");e.setAttribute("title","tweet this");e.style.display="none";e.style.position="absolute";e.style.left="0px";e.style.top="-100px";e.style.background="url('"+birdSprite+"') no-repeat transparent";e.style.opacity="0";e.style.filter="alpha(opacity=0)";e.style.backgroundPosition="-64px -0px";e.style.width="58px";e.style.height="30px";e.style.zIndex="951";e.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};e.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(e);var f=e.cloneNode(false);f.setAttribute("id","tBirdLfollow");f.setAttribute("href",c);f.setAttribute("title","follow "+(twitterAccount?"@"+twitterAccount:"me"));f.style.backgroundPosition="-64px -30px";f.style.width="58px";f.style.height="20px";f.style.zIndex="952";f.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};f.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(f);if(showTweet==true){var g=document.createElement("div");g.setAttribute("id","tBirdStatxLow");g.style.display="none";g.style.position="absolute";g.style.left="0px";g.style.top="-100px";g.style.background="transparent";g.style.opacity="0";g.style.filter="alpha(opacity=0)";g.style.width="192px";g.style.zIndex="955";g.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};g.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};var h=g.cloneNode(false);h.setAttribute("id","tBirdStatxUpr");h.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};h.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};var i=document.createElement("div");i.setAttribute("id","tBirdStatxArrLow");i.style.background="url('"+birdSprite+"') no-repeat transparent";i.style.backgroundPosition="-64px -50px";i.style.width="32px";i.style.height="9px";i.style.margin="0 0 -1px 56px";i.style.position="relative";i.style.zIndex="957";var j=i.cloneNode(false);j.setAttribute("id","tBirdStatxArrUpr");j.style.backgroundPosition="-96px -50px";j.style.margin="-1px 0 0 60px";var k=document.createElement("div");k.setAttribute("id","tBirdStatxInLow");k.style.background="#fbfcfc";k.style.border="1px solid #555";k.style.MozBorderRadius="6px";k.style.borderRadius="6px";k.style.padding="3px 5px";k.style.fontSize="11px";k.style.fontFamily="Arial";k.style.textAlign="left";k.style.position="relative";k.style.zIndex="956";k.innerHTML="loading...";var l=k.cloneNode(false);l.setAttribute("id","tBirdStatxInUpr");l.innerHTML="loading...";g.appendChild(i);g.appendChild(k);h.appendChild(l);h.appendChild(j);document.body.appendChild(g);document.body.appendChild(h)}var m=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);window.onscroll=recheckposition;if(showTweet==true)loadStatusText();recheckposition()}function animateSprite(a,b,c,d,e,f){if(typeof d!="number"||d>c-b)d=0;document.getElementById("tBird").style.backgroundPosition="-"+Math.round((b+d)*spriteWidth)+"px -"+spriteHeight*a+"px";if(f==true)return;if(typeof e!="number")e=spriteAniSpeed;timeoutAnimation=window.setTimeout("animateSprite("+a+","+b+","+c+","+(d+1)+","+e+")",e)}function animateSpriteAbort(){window.clearTimeout(timeoutAnimation)}function recheckposition(a){if(a!=true)a=false;if(birdIsFlying)return false;windowHeight=getWindowHeight();windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;if(typeof window.pageYOffset=="number")scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;birdPosY=parseInt(document.getElementById("tBird").style.top);birdPosX=parseInt(document.getElementById("tBird").style.left);if(scrollPos+birdSpaceVertical>=birdPosY||scrollPos+windowHeight-spriteHeight<birdPosY||a){hideButtons();elemPosis=chooseNewTarget();if(elemPosis.length<1){elemType=null;elemNr=null;elemTop=scrollPos+Math.round(Math.random()*(windowHeight-spriteHeight));elemLeft=Math.round(Math.random()*(windowWidth-spriteWidth));elemWidth=0}else{newTarget=elemPosis[Math.round(Math.random()*(elemPosis.length-1))];elemType=newTarget[0];elemNr=newTarget[1];elemTop=newTarget[2];elemLeft=newTarget[3];elemWidth=newTarget[4]}targetTop=elemTop-spriteHeight;targetLeft=Math.round(elemLeft-spriteWidth/2+Math.random()*elemWidth);if(targetLeft>windowWidth-spriteWidth-24)targetLeft=windowWidth-spriteWidth-24;else if(targetLeft<0)targetLeft=0;birdIsFlying=true;flyFromTo(birdPosX,birdPosY,targetLeft,targetTop,0)}}function chooseNewTarget(){var a=new Array;var b=scrollPos+spriteHeight+birdSpaceVertical;var c=scrollPos+windowHeight-birdSpaceVertical;for(var d=0;d<targetElems.length;d++){var e=targetElems[d];var f=document.getElementsByTagName(e).length;for(var g=0;g<f;g++){var h=document.getElementsByTagName(e)[g].offsetTop;var i=document.getElementsByTagName(e)[g].offsetLeft;var j=document.getElementsByTagName(e)[g].offsetWidth;if(h<=b||h>=c||j<minElemWidth||i<0){continue}a[a.length]=new Array(e,g,h,i,j);if(a.length>=neededElems4random)return a}}return a}function flyFromTo(a,b,c,d,e,f){justStarted=e==0;e+=e>birdSpeed/2?birdSpeed:Math.round(e==0?birdSpeed/4:birdSpeed/2);solvedFuture=e+(e>birdSpeed/2?birdSpeed:Math.round(birdSpeed/2));distanceX=c-a;distanceY=d-b;distance=Math.sqrt(distanceX*distanceX+distanceY*distanceY);solvPerc=Math.abs(1/distance*e);solvDistX=Math.round(distanceX*solvPerc);solvDistY=Math.round(distanceY*solvPerc);solvPercFuture=Math.abs(1/distance*solvedFuture);solvDistXFuture=Math.round(distanceX*solvPercFuture);solvDistYFuture=Math.round(distanceY*solvPercFuture);if(typeof f!="string"){f=null;angle=(distanceX!=0?Math.atan(-distanceY/distanceX)/Math.PI*180:90)+(distanceX<0?180:0);if(angle<0)angle+=360;if(angle<45)f="o";else if(angle<135)f="n";else if(angle<202.5)f="w";else if(angle<247.5)f="sw";else if(angle<292.5)f="s";else if(angle<337.5)f="so";else f="o"}if(Math.abs(solvDistXFuture)>=Math.abs(distanceX)&&Math.abs(solvDistYFuture)>=Math.abs(distanceY)){animateSpriteAbort();switch(f){case"so":animateSprite(1,0,0,0,null,true);break;case"sw":animateSprite(1,2,2,0,null,true);break;case"s":animateSprite(0,2,2,0,null,true);break;case"n":animateSprite(4,0,0,0,null,true);break;case"o":animateSprite(1,0,0,0,null,true);break;case"w":animateSprite(1,2,2,0,null,true);break;default:animateSprite(0,0,0,0,null,true)}timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed)}if(Math.abs(solvDistX)>=Math.abs(distanceX)&&Math.abs(solvDistY)>=Math.abs(distanceY)){solvDistX=distanceX;solvDistY=distanceY;birdIsFlying=false;window.setTimeout("recheckposition()",500)}else{if(justStarted){animateSpriteAbort();switch(f){case"so":animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,1,1,0,null,true)",spriteAniSpeed);break;case"sw":animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,3,3,0,null,true)",spriteAniSpeed);break;case"s":animateSprite(0,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(0,3,3,0,null,true)",spriteAniSpeed);break;case"n":timeoutAnimation=window.setTimeout("animateSprite(4,0,3,0,"+spriteAniSpeedSlow+")",1);break;case"o":animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(2,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;case"w":animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(3,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;default:animateSprite(0,0,0,0,null,true)}}timeoutFlight=window.setTimeout("flyFromTo("+a+","+b+","+c+","+d+","+e+",'"+f+"')",50)}hideButtons();document.getElementById("tBird").style.left=a+solvDistX+"px";document.getElementById("tBird").style.top=b+solvDistY+birdSetUp+"px"}function scareTheBird(a){newTS=(new Date).getTime();if(scareTheBirdLastTime<newTS-scareTheBirdTime){scareTheBirdCount=1;scareTheBirdLastTime=newTS}else{scareTheBirdCount++;if(scareTheBirdCount>=scareTheBirdMouseOverTimes){scareTheBirdCount=0;scareTheBirdLastTime=0;recheckposition(true)}}}function showButtons(a,b,c){birdPosY=parseInt(document.getElementById("tBird").style.top);birdPosX=parseInt(document.getElementById("tBird").style.left);if(a==0&&document.getElementById("tBirdLtweet").style.display=="block")a=100;if(birdIsFlying)a=0;opacity=Math.round(a*15);if(opacity<0)opacity=0;if(opacity>100)opacity=100;if(birdPosX<b-300||birdPosX<b/2){buttonPosX1=birdPosX+spriteWidth-15;buttonPosX2=birdPosX+spriteWidth-10}else{buttonPosX1=birdPosX+16-parseInt(document.getElementById("tBirdLtweet").style.width);buttonPosX2=birdPosX+11-parseInt(document.getElementById("tBirdLfollow").style.width)}buttonPosY1=birdPosY-0;buttonPosY2=birdPosY-0+parseInt(document.getElementById("tBirdLtweet").style.height);document.getElementById("tBirdLtweet").style.left=buttonPosX1+"px";document.getElementById("tBirdLtweet").style.top=buttonPosY1+"px";document.getElementById("tBirdLtweet").style.display="block";document.getElementById("tBirdLtweet").style.opacity=opacity/100;document.getElementById("tBirdLtweet").style.filter="alpha(opacity="+opacity+")";document.getElementById("tBirdLfollow").style.left=buttonPosX2+"px";document.getElementById("tBirdLfollow").style.top=buttonPosY2+"px";document.getElementById("tBirdLfollow").style.display="block";document.getElementById("tBirdLfollow").style.opacity=opacity/100;document.getElementById("tBirdLfollow").style.filter="alpha(opacity="+opacity+")";if(showTweet==true){if(typeof window.pageYOffset=="number")scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;if(birdPosX<64)boxMoveX=64-birdPosX;else if(birdPosX>b-64)boxMoveX=b-birdPosX-64;else boxMoveX=0;txtBoxPosX=Math.round(birdPosX+spriteWidth/2-parseInt(document.getElementById("tBirdStatxLow").style.width)/2+boxMoveX);if(birdPosY<c/2+scrollPos){txtBoxPosY=birdPosY+spriteHeight;document.getElementById("tBirdStatxLow").style.left=txtBoxPosX+"px";document.getElementById("tBirdStatxLow").style.top=txtBoxPosY+"px";document.getElementById("tBirdStatxLow").style.display="block";document.getElementById("tBirdStatxLow").style.opacity=opacity/100;document.getElementById("tBirdStatxLow").style.filter="alpha(opacity="+opacity+")"}else{txtBoxPosY=birdPosY-document.getElementById("tBirdStatxUpr").offsetHeight;document.getElementById("tBirdStatxUpr").style.left=txtBoxPosX+"px";document.getElementById("tBirdStatxUpr").style.top=txtBoxPosY+"px";document.getElementById("tBirdStatxUpr").style.display="block";document.getElementById("tBirdStatxUpr").style.opacity=opacity/100;document.getElementById("tBirdStatxUpr").style.filter="alpha(opacity="+opacity+")"}}if(opacity>=100)return;a++;showButtonsTimeout=window.setTimeout("showButtons("+a+","+b+","+c+")",60)}function hideButtons(){window.clearTimeout(showButtonsTimeout);document.getElementById("tBirdLtweet").style.display="none";document.getElementById("tBirdLtweet").style.opacity="0";document.getElementById("tBirdLtweet").style.filter="alpha(opacity=0)";document.getElementById("tBirdLfollow").style.display="none";document.getElementById("tBirdLfollow").style.opacity="0";document.getElementById("tBirdLfollow").style.filter="alpha(opacity=0)";if(showTweet==true){document.getElementById("tBirdStatxLow").style.display="none";document.getElementById("tBirdStatxLow").style.opacity="0";document.getElementById("tBirdStatxLow").style.filter="alpha(opacity=0)";document.getElementById("tBirdStatxUpr").style.display="none";document.getElementById("tBirdStatxUpr").style.opacity="0";document.getElementById("tBirdStatxUpr").style.filter="alpha(opacity=0)"}}function loadStatusText(){param="tuac="+twitterAccount;var a=window.XMLHttpRequest?new XMLHttpRequest:window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):false;if(!a){document.getElementById("tBirdStatxInLow").innerHTML="Error: could not create Ajax-request"}a.open("POST",twitterfeedreader,true);a.setRequestHeader("Content-Type","application/x-www-form-urlencoded");a.setRequestHeader("Content-Length",param.length);a.setRequestHeader("Connection","close");a.onreadystatechange=function(){if(a.readyState==4){resp=a.status==200?a.responseText:"Error: Ajax-request failed,HTTP-Code "+a.status;resp=resp.replace(/<a /g,'<a style="'+hyperlinkStyle+'" ');document.getElementById("tBirdStatxInLow").innerHTML=resp;document.getElementById("tBirdStatxInUpr").innerHTML=resp}};a.send(param)}function getWindowWidth(){if(typeof window.innerWidth=="number")ww=window.innerWidth;else if(document.documentElement&&document.documentElement.clientWidth)ww=document.documentElement.clientWidth;else if(document.body&&document.body.clientWidth)ww=document.body.clientWidth;else ww=800;return ww}function getWindowHeight(){if(typeof window.innerHeight=="number")wh=window.innerHeight;else if(document.documentElement&&document.documentElement.clientHeight)wh=document.documentElement.clientHeight;else if(document.body&&document.body.clientHeight)wh=document.body.clientHeight;else wh=450;return wh}function is_mobile(a){return a.toLowerCase().search(/(iphone|ipod|opera mini|windows ce|windows phone|palm|blackberry|android|symbian|series60|samsung|nokia|playstation portable|htc[\-_]|up\.browser|profile\/midp|[1-4][0-9]{2}x[1-4][0-9]{2})/)>-1}function utf8_encode(a){a=a.replace(/\r\n/g,"\n");utf8str="";for(n=0;n<a.length;n++){c=a.charCodeAt(n);if(c<128){utf8str+=String.fromCharCode(c)}else if(c>127&&c<2048){utf8str+=String.fromCharCode(c>>6|192);utf8str+=String.fromCharCode(c&63|128)}else{utf8str+=String.fromCharCode(c>>12|224);utf8str+=String.fromCharCode(c>>6&63|128);utf8str+=String.fromCharCode(c&63|128)}}return utf8str}function is_utf8(a){strlen=a.length;for(i=0;i<strlen;i++){ord=a.charCodeAt(i);if(ord<128)continue;else if((ord&224)===192&&ord>193)n=1;else if((ord&240)===224)n=2;else if((ord&248)===240&&ord<245)n=3;else return false;for(c=0;c<n;c++)if(++i===strlen||(a.charCodeAt(i)&192)!==128)return false}return true}if(typeof twitterAccount!="string")var twitterAccount="";if(typeof tweetThisText!="string"||tweetThisText=="")var tweetThisText=document.title+" "+document.URL;if(typeof showTweet!="boolean")var showTweet=false;var tweetthislink=null;if(typeof otherPageOrFeed!="string"||otherPageOrFeed=="")var otherPageOrFeed=false;var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qtz3fjm8tyT8VpLoiJt1DaxaAJU4I_OxZMNlE3GThK-XqLfMItKldPLQ3XMRBchyGvGYf8VtkxZD8t7HMDGjmcQWrrfkuHtxWkGziieexA7GRdR4Kv3zgpjnd8CwIiN5sfh9GrqVAYV3/s1600/flying.twitter.png";var twitterfeedreader="";var hyperlinkStyle="color:#27b;text-decoration:none;";var birdSpeed=12;var birdSpaceVertical=16;var birdSetUp=2;var spriteWidth=64;var spriteHeight=64;var spriteAniSpeed=72;var spriteAniSpeedSlow=Math.round(spriteAniSpeed*1.75);var targetElems=new Array("img","hr","input","textarea","button","select","table","td","div","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");var neededElems4random=10;var minElemWidth=Math.round(spriteWidth/3);var scareTheBirdMouseOverTimes=4;var scareTheBirdTime=1e3;var showOnMobile=false;var birdIsFlying=false;var scrollPos=0;var windowHeight=getWindowHeight();var windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;var birdPosX=Math.round(Math.random()*(windowWidth-spriteWidth+200)-200);var birdPosY=-2*spriteHeight;var timeoutAnimation=false;var timeoutFlight=false;var showButtonsTimeout=null;var hideButtonsTimeout=null;var scareTheBirdLastTime=0;var scareTheBirdCount=0 <!--Www.learn24bd.blogspot.com --></script> <!--Use this code external sheet --> <script type="text/javascript"> var title = document.title; var url = document.URL; var tweetThisText = title + " " + url; tripleflapInit(); </script>

2. Then change the Twitter Account user name.

3. Now past the code into your Website.

Note:-
Don't forget to write your Twitter username instead of Write Your Twitter User Name in the above code. For example, let your twitter profile URL is "http://twitter.com/xyz", your Twitter username is xyz.

4. Now, finally click on 'Save template'.

Now Visit your blog, you'll see animated flying Twitter bird on all of your blog pages.

Now enjoy  Flying Twitter Bird.