Online Tips: JavaScript Tutorial

How to add facebook comment to your blog

admin 0 Blog, facebook, JavaScript Tutorial, Website Saturday, August 24, 2013

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="font-size: large;">The comments plugin lets people comment on content on your site using their Facebook account. People can choose to share their comment activity with their friends (and friends of their friends) on Facebook as well. The comments plugin also includes built-in moderation tools and social relevance ranking.</span><br />
<span style="font-size: large;"> </span><br />
<span style="font-size: large;">Learn how to add Facebook comment to your blog. The process to add a comment box to blogger blog is very easy. No need to make id on Facebook.</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStRtA2TGlL-RIvqaUzX9UhyL2HRZiaKa2XRQWPu7WYR-URGEm1UMwED-9LPpGx-Vjrl_38TUSY7dDYES7Hij6Ie4MADoF7pMJMvTg5yWqH6hWs-FFUB8AU1yAgVwvg6xZtCCj7yenOPMH/s1600/fb+Comment-Box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to add facebook comment to your blog" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStRtA2TGlL-RIvqaUzX9UhyL2HRZiaKa2XRQWPu7WYR-URGEm1UMwED-9LPpGx-Vjrl_38TUSY7dDYES7Hij6Ie4MADoF7pMJMvTg5yWqH6hWs-FFUB8AU1yAgVwvg6xZtCCj7yenOPMH/s320/fb+Comment-Box.jpg" title="How to add facebook comment to your blog" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;">Just copy those code and</span><span style="font-size: large;"><span style="font-size: large;"> past to your website or blog.</span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;">Just </span> replace "<span style="color: red;">www.learn24bd.blogspot.com</span>" this codes with your </span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;">blog url.  </span></div>
<div style="text-align: center;">
<br /></div>
<code>
</code>
<br />
<div style="text-align: center;">
<code><br /></code></div>
<code>
</code>
<div style="text-align: center;">
<code><span style="font-size: large;"> </span><span style="font-size: large;"><br /></span>
<span style="font-size: large;"><textarea cols="54" name="textarea" rows="6" style="height: 259px; width: 606px;" wrap="off"><script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-comments" data-href="www.learn24bd.blogspot.com" data-num-posts="10" data-width="620">
</div>

Now Enjoy Your Facebook comment box in your blog.

How to add facebook comment to your blog

The comments plugin lets people comment on content on your site using their Facebook account. People can choose to share their comment act...

Trailing Clock Cursor Effect | javascript Tutorial

admin 0 Blog, JavaScript Tutorial, Website Tuesday, August 20, 2013

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;">How to Create a Trailing Mouse Cursor Effect .</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: large;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirG2gkNpcl0tX_ZxS7f308M8P6KYn3AHly87uzenAVh7ZzCLOnWY4LK6pFfOB8I-tur3FaD2b9oCatPdcSQeXaKoR12C0D3rOVVgHXiq_jznk7dE7I2Ts8Q2Qu7zD2hGzI8U6yx5uzZiz/s1600/Trailing+Clock+Cursor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirG2gkNpcl0tX_ZxS7f308M8P6KYn3AHly87uzenAVh7ZzCLOnWY4LK6pFfOB8I-tur3FaD2b9oCatPdcSQeXaKoR12C0D3rOVVgHXiq_jznk7dE7I2Ts8Q2Qu7zD2hGzI8U6yx5uzZiz/s320/Trailing+Clock+Cursor.jpg" width="320" /></a></span></div>
<br />
<br />
<span style="font-size: large;">Just copy those code and paste it into your site. </span><br />
<br />
<textarea style="height: 160px; width: 524px;"><script>
dCol='BLUE';//Change date colour.
fCol='RED';//Change face colour.
sCol='BLUE';//Change seconds colour.
mCol='BLUE';//Change minutes colour.
hCol='RED';//Change hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!

//Come to view and download free javascript at www.learn24bd.blogspot.com

d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTBOER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D2=TodaysDate.split('');
H2='...';
H2=H2.split('');
M2='....';
M2=M2.split('');
S2='.....';
S2=S2.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.getElementById);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><b>";
props2="<font face="+font+" size="+size+" color="+dCol+"><b>";
Split=360/n;
Dsplit=360/D2.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y_u=new Array();x_u=new Array();Y_u=new Array();X_u=new Array();
for (i=0; i < n; i++){y_u[i]=0;x_u[i]=0;Y_u[i]=0;X_u[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D2.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
 for (i=0; i < D2.length; i++)
 document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>
'+props2+D2[i]+'</font></center>
</layer>');
 for (i=0; i < n; i++)
 document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>
'+props+Face[i]+'</font></center>
</layer>');
 for (i=0; i < S2.length; i++)
 document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center>
<b>'+S2[i]+'</b></center>
</font></layer>');
 for (i=0; i < M2.length; i++)
 document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center>
<b>'+M2[i]+'</b></center>
</font></layer>');
 for (i=0; i < H2.length; i++)
 document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center>
<b>'+H2[i]+'</b></center>
</font></layer>');
}
if (ie){
 document.write('<div id="Od" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
');
 for (i=0; i < D2.length; i++)
 document.write('<div id="ieDate'+i+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center">'+props2+D2[i]+'</B></font></div>
');
 document.write('</div>
</div>
');
 document.write('<div id="Of" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
');
 for (i=0; i < n; i++)
 document.write('<div id="ieFace'+i+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center">'+props+Face[i]+'</B></font></div>
');
 document.write('</div>
</div>
');
 document.write('<div id="Oh" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
');
 for (i=0; i < H2.length; i++)
 document.write('<div id="ieHours'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:#'+hCol+';text-align:center;font-weight:bold">'+H2[i]+'</div>
');
 document.write('</div>
</div>
');
 document.write('<div id="Om" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
');
 for (i=0; i < M2.length; i++)
 document.write('<div id="ieMinutes'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:#'+mCol+';text-align:center;font-weight:bold">'+M2[i]+'</div>
');
 document.write('</div>
</div>
')
 document.write('<div id="Os" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
');
 for (i=0; i < S2.length; i++)
 document.write('<div id="ieSeconds'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:#'+sCol+';text-align:center;font-weight:bold">'+S2[i]+'</div>
');
 document.write('</div>
</div>
')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse2(e){
 set_scroll();
   y_n=(e)?e.pageY:event.y+sdown;
 ymouse = (e)?e.pageY+ClockFromMouseY:event.y+ClockFromMouseY+sdown;
 xmouse = (e)?e.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse2:document.onmousemove=Mouse2;
function ClockAndAssign(){
 time = new Date ();
 secs = time.getSeconds();
 sec = -1.57 + Math.PI * secs/30;
 mins = time.getMinutes();
 min = -1.57 + Math.PI * mins/30;
 hr = time.getHours();
 hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
 if (ie){
  document.getElementById('Od').style.top=window.document.documentElement.scrollTop+"px";
  document.getElementById('Of').style.top=window.document.documentElement.scrollTop+"px";
  document.getElementById('Oh').style.top=window.document.documentElement.scrollTop+"px";
  document.getElementById('Om').style.top=window.document.documentElement.scrollTop+"px";
  document.getElementById('Os').style.top=window.document.documentElement.scrollTop+"px";
 }
 for (i=0; i < n; i++){
  var F=(ns)?document.layers['nsFace'+i]:document.getElementById('ieFace'+i).style;
  F.top=y_u[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll+"px";
  F.left=x_u[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180)+"px";
 }
 for (i=0; i < H2.length; i++){
  var HL=(ns)?document.layers['nsHours'+i]:document.getElementById('ieHours'+i).style;
  HL.top=y_u[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll+"px";
  HL.left=x_u[i]+HandX+(i*HandWidth)*Math.cos(hrs)+"px";
 }
 for (i=0; i < M2.length; i++){
  var ML=(ns)?document.layers['nsMinutes'+i]:document.getElementById('ieMinutes'+i).style;
  ML.top=y_u[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll+"px";
  ML.left=x_u[i]+HandX+(i*HandWidth)*Math.cos(min)+"px";
 }
 for (i=0; i < S2.length; i++){
  var SL=(ns)?document.layers['nsSeconds'+i]:document.getElementById('ieSeconds'+i).style;
  SL.top=y_u[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll+"px";
  SL.left=x_u[i]+HandX+(i*HandWidth)*Math.cos(sec)+"px";
 }
 for (i=0; i < D2.length; i++){
  var DL=(ns)?document.layers['nsDate'+i]:document.getElementById('ieDate'+i).style;
  DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll+"px";
  DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180)+"px";
 }
 currStep-=step;
}

window.onload=Delay;
</SCRIPT>

Now enjoy Trailing Mouse Cursor Effect .

Trailing Clock Cursor Effect | javascript Tutorial

How to Create a Trailing Mouse Cursor Effect . Just copy those code and paste it into your site. Now enjoy Trailing Mouse Cur...

Create leaf effect | JavaScript Tutorial

admin 0 Blog, JavaScript Tutorial, Website Wednesday, December 12, 2012

<div dir="ltr" style="text-align: left;" trbidi="on">
 <span style="font-size: large;">You can easily Create leaf effect using JavaScript.</span><br />
<span style="font-size: large;"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQNWTgEAT2NgT6VuEU1_p8feklZGmB9BQQutZM5lrR042NcPUTKIMXjmHWRM-THKstoorMAcei877g3PW83hIcDIc5jce7q90Buy2zEs-LC7iX5eP9U77iDoNkrydBFV4hxkAn_1SOcjZ/s1600/leaf+effect.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create leaf effect | JavaScript Tutorial" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQNWTgEAT2NgT6VuEU1_p8feklZGmB9BQQutZM5lrR042NcPUTKIMXjmHWRM-THKstoorMAcei877g3PW83hIcDIc5jce7q90Buy2zEs-LC7iX5eP9U77iDoNkrydBFV4hxkAn_1SOcjZ/s1600/leaf+effect.JPG" title="Create leaf effect | JavaScript Tutorial" /></a></div>
<span style="font-size: large;"></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b style="color: purple;">Just Follow those step:-</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"> First copy those code.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;"><textarea cols="54" name="textarea" rows="6" style="height: 153px; width: 479px;" wrap="off"><script language="Javascript">
<br />
<script><br />if (typeof jQuery == 'undefined') {<br />document.write('<' + 'script');<br />document.write(' language="javascript"');<br />document.write(' type="text/javascript"');<br />document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');<br />document.write('</' + 'script' + '>')<br />}<br /></script><br /><script><br />if (!image_urls) {<br />var image_urls = Array()<br />}<br />if (!flash_urls) {<br />var flash_urls = Array()<br />}<br />image_urls['rain1'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29v_g4x-U2WnXZWmvMBW8OtbMJA_NhBX-Vul_8aulOwhsZIQpQB2YscKogv7u0v7YFW9UTxS7yNZ7XXpsLPnzD-hc1MsHMmbWLf__wvbRGfKo7SgrH1rBahiOGk8phC8nOTMP3KIG-0_E/s1600/Leaf1.png";<br />image_urls['rain2'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJf2WBMxq-SopJCxOzbmcoCOVCIY5IBsbqHGiDSoMHVEs-gTblpnXahufnVT3DlCgbK3RVFOYjYM0a6lqJ9KhkUBGL2fO6CQndd8ESV2XTs5syMqVgUaI71v29rg3NxZ5EHE0iK4YZmudj/s1600/Leaf2.png";<br />image_urls['rain3'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNluf2W_1zr_SNFMgi3Mr80tmZhBlCXuhIflPUf22sjH3e96jS4e23JEicuh0vnqT6nGPaFl9BFBPQc2-rdi9xLLSl_h6h907VVqXdJn6i3wKcYvEot0HyV8u05Lbb38OVzSyg6PT1APEn/s1600/Leaf6.png";<br />image_urls['rain4'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUMPe85sQfuy4zZIBtsIwWuodi6lD0FMZE02OJI7NMu6pYtF7lNObLIm7p_VftNv529BL7RaKthieaOMfhSkt65A3HWV89M3EnucU3AVVefgHaZTSgz1Fbmv9gisVVuW52AnM3YGC-nC2U/s1600/Leaf5.png";<br />$(document).ready(function () {<br />var c = $(window).width();<br />var d = $(window).height();<br />var e = function (a, b) {<br />return Math.round(a + (Math.random() * (b - a)))<br />};<br />var f = function (a) {<br />setTimeout(function () {<br />a.css({<br />left: e(0, c) + 'px',<br />top: '-30px',<br />display: 'block',<br />opacity: '0.' + e(10, 100)<br />}).animate({<br />top: (d - 10) + 'px'<br />}, e(7500, 8000), function () {<br />$(this).fadeOut('slow', function () {<br />f(a)<br />})<br />})<br />}, e(1, 8000))<br />};<br />$('<div>
</div>
').attr('id', 'rainDiv')<br />.css({<br />position: 'fixed',<br />width: (c - 20) + 'px',<br />height: '1px',<br />left: '0px',<br />top: '-5px',<br />display: 'block'<br />}).appendTo('body');<br />for (var i = 1; i <= 20; i++) {<br />var g = $('<img/>').attr('src', image_urls['rain' + e(1, 4)])<br />.css({<br />position: 'absolute',<br />left: e(0, c) + 'px',<br />top: '-30px',<br />display: 'block',<br />opacity: '0.' + e(10, 100),<br />'margin-left': 0<br />}).addClass('rainDrop').appendTo('#rainDiv');<br />f(g);<br />g = null<br />};<br />var h = 0;<br />var j = 0;<br />$(window).resize(function () {<br />c = $(window).width();<br />d = $(window).height()<br />})<br />});<br /></script><br /><script><br />if (typeof jQuery == 'undefined') {<br />document.write('<' + 'script');<br />document.write(' language="javascript"');<br />document.write(' type="text/javascript"');<br />document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');<br />document.write('</' + 'script' + '>')<br />}<br /></script>

Past those code into your website.

Now enjoy leaf effect in your website.

Create leaf effect | JavaScript Tutorial

You can easily Create leaf effect using JavaScript. Just Follow those step:- First copy those code. Past those code int...

Create Moving Title Text | javascript Tutorial

admin 0 Blog, JavaScript Tutorial, Website Wednesday, September 5, 2012

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;">You can easily create moving title text using JavaScript. You can use JavaScript to create a complex animation having, but not limited. You might be interested in existing JavaScript based animation library.</span><br />
<span style="font-size: large;"><br />This tutorial provides a basic understanding of how to use JavaScript to create an animation.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHm8os1coK0yaHWMMAcBL-aT01M9Tf59-ze5O4VMMcWR__tKlu-0P8wFPCemtYJ9qgTpSkQ93qLO6h8uJbqxxzqOp2F-WwHDGL2WTvr-VZzuEp9vIdILgHQLPHUYcxiUaxmj4GTk7M2AM/s1600/moving+title+bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Create Moving Title Text | javascript Tutorial" border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHm8os1coK0yaHWMMAcBL-aT01M9Tf59-ze5O4VMMcWR__tKlu-0P8wFPCemtYJ9qgTpSkQ93qLO6h8uJbqxxzqOp2F-WwHDGL2WTvr-VZzuEp9vIdILgHQLPHUYcxiUaxmj4GTk7M2AM/s320/moving+title+bar.jpg" title="Create Moving Title Text | javascript Tutorial" width="320" /></a></div>
<br />
<span style="font-size: large;"><b style="color: purple;">Just Follow those step:-</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"> First copy those code.</span><br />
<span style="font-size: large;"><br />
</span>
<code>
<span style="font-size: large;">
<textarea cols="54" name="textarea" rows="6" style="height: 158px; width: 650px;" wrap="off"><script language="Javascript">
var tit = document.title;
var c = 0;
function writetitle() {
if (document.all || document.getElementById) {
 document.title = tit.substring(0,c);
 if (c==tit.length) {
 c = 0;
 setTimeout("writetitle()", 400) // 
 }
 else {
 c++;
 setTimeout("writetitle()", 200) // 
 }
}
}
writetitle()

</script>

Past those code into your website.

Now enjoy moving title text in your website.

Create Moving Title Text | javascript Tutorial

You can easily create moving title text using JavaScript. You can use JavaScript to create a complex animation having, but not limited. Yo...

Add Flying Twitter Bird on website | javascript Tutorial

admin 0 Blog, JavaScript Tutorial, Web Developer, Website Wednesday, August 1, 2012

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="font-size: large;">You can easily add a Flying Twitter Bird  on website. Learn how to </span></div>
<div style="text-align: center;">
<span style="font-size: large;">create </span><span style="font-size: large;">Flying Twitter Bird using java script.  If you want to add Animated Flying Twitter Bird Widget to Blogger.</span></div>
<code>
</code>
<br />
<div style="text-align: center;">
<code><span style="font-size: large;">
<br />Don't forget to backup your existing Blogger template to your desktop before editing anything into it.<br />
<br />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.</span></code></div>
<code>
</code>
<div style="text-align: center;">
<code><br /></code></div>
<code>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span>
</div>
<div dir="ltr" style="text-align: center;" trbidi="on">
<div class="separator" style="clear: both;">
<span style="font-size: large;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7_ldPYW8vEobntFHL75m559xfHbyDmvvSMH0mtzr_WmI4jf0Pa1GXMohQ-3Ov80THWU5vVIhArPDHrWZpHQClecZWseE7gyt9xTxS2BYiZvKD17slKbS-8xK6ZsbL1ikG8Au7xDZ5mAJ/s1600/flying.twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Add Flying Twitter Bird " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7_ldPYW8vEobntFHL75m559xfHbyDmvvSMH0mtzr_WmI4jf0Pa1GXMohQ-3Ov80THWU5vVIhArPDHrWZpHQClecZWseE7gyt9xTxS2BYiZvKD17slKbS-8xK6ZsbL1ikG8Au7xDZ5mAJ/s1600/flying.twitter.png" title=" Add Flying Twitter Bird " /></a></span></div>
<span style="font-size: large;"><br /></span>
<br />
<span style="font-size: large;"><b style="color: purple;">Just Follow those step:- </b></span><br />
<br />
<span style="font-size: large;">1. First Copy those java Script code.</span><br />
<br />
<code>
<br />
<textarea cols="54" name="textarea" rows="6" style="font-size: 11px; height: 216px; width: 665px;" wrap="off"><script type="text/javascript">

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/AVvXsEix7_ldPYW8vEobntFHL75m559xfHbyDmvvSMH0mtzr_WmI4jf0Pa1GXMohQ-3Ov80THWU5vVIhArPDHrWZpHQClecZWseE7gyt9xTxS2BYiZvKD17slKbS-8xK6ZsbL1ikG8Au7xDZ5mAJ/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

</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.

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 An...

Online Tips

How to add facebook comment to your blog

Trailing Clock Cursor Effect | javascript Tutorial

Create leaf effect | JavaScript Tutorial

Create Moving Title Text | javascript Tutorial

Add Flying Twitter Bird on website | javascript Tutorial

Email Feed

Total Pageviews

Labels