How To Make a Jumping Text Effect in Blogger

In this post , you will be able to make a text jumping,it's a beautiful effect to add it in your blog or website let me show you a preview of this effect first :

Preview 

So if you like this effect let start our tutorials:
Step 1 : Got to Blogger.com >> Layout >> Add HTML/JavaScript - or any place you want
copy paste the code bellow

<div id="jumping_letters" style="padding-left: 35px;font-size:25px;"></div>
<script type="text/javascript">
message="Widgets4Free";
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";

function jump0()
{
if (message.length > 6)
{
for(i=0; i!=message.length; i++)
{
txt = txt + "<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
}
jump = document.getElementById("jumping_letters");
jump.innerHTML = txt;
txt = "";
jump1a();
}
}

function jump1a()
{
nfinal = document.getElementById("n0");
nfinal.style.left = (-num2).toString() + "px";
if (num2 != 9)
{
num2 = num2 + 3;
setTimeout("jump1a()", 50);
}
else
{
jump1b();
}
}

function jump1b()
{
nfinal = document.getElementById("n0");
nfinal.style.left = (-num2).toString() + "px";
if (num2 != 0)
{
num2 = num2-3;
setTimeout("jump1b()",50);
}
else
{
jump2();
}
}

function jump2()
{
txt = "";
for(i=0;i != message.length; i++)
{
if (i+num > -1 && i+num < 7)
{
txt = txt + "<span style='position:relative;top:" + mes[i+num] + "px'>" + message.charAt(i) + "</span>";
}
else
{
txt = txt + "<span>" + message.charAt(i) + "</span>";
}
}
jump = document.getElementById("jumping_letters");
jump.innerHTML = txt;
txt = "";
if (num != (-message.length))
{
num--;
setTimeout("jump2()",50);
}
else
{
num=0;
setTimeout("jump0()",50);
}
}
jump0();

</script>

change The Red with your text.
That's all, if you have any question just put it in comment form *_*.