.....

18 Add Floating Hover Text - Which Trails Mouse Cursor

If you want to show any text like "Welcome Here" or "Sign My Guestbook"or "Your Text Here", which follows the mouse cursor (trail text effect), like the one displayed in the image


STEP #1 Log in to Blogger, go to Layout





page-elements

Add a Gadget of HTML/JavaScript type. 



image
Then add this code in to it:.



<script language="javascript">





// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text='YOUR TEXT HERE...';



var delay=40; // SPEED OF TRAIL

var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.



//********** NO NEED TO EDIT BELOW HERE **********\\



ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';



for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);



function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}



function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}



function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}



function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}



function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}



function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}



window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

</script>



Now click Save 

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

18 Responses So Far:

Anonymous said...

INFO interesting thanks

Sognografica said...

Hello thanks for your visit to my site and you enter your banner on my plugboard reciprocate your visit and I hope you enjoyed my site:good Sunday and by early Sognografica

LynSire said...

Kool effect!
Thanks for sharing! ;)

яσѕαℓуи
LynSire.blogspot.com

webhostingindia said...

Thanks for sharing such an informative post with us.

Miya said...

excuse me, but why does my text doesn't follow the mouse ?

Gee said...

thanks . . .
nice info

admin said...

@Miya

thanks for comment but i dont understand what you say

Unknown said...

@admin i mean that, the the text did appear,but it doesn't trails over the cursor.

qielaqistina said...

@Miya BieberGendott me too .:(

සංහිඳ පාමුළ said...

what a great article, thanks dude. so fantastic.

Ar3y0n6 said...

thank you so much.. so awesome!

Kim Tyee Ra said...

why its not working?

Anonymous said...

thanks admin.

Michael Scofield said...

Nice tutorial, thanks a lot for helping us.

Anonymous said...

Hello there. I discovered your web site by way of Google at the same time as searching for a comparable subject, your site got here up. It appears great. I've bookmarked it in my google bookmarks to come back later.

nazim said...

HELLO BROTHER

THAT TEXT IS FAR FROM MOUSE
PLEASE I NEED NEAR TO MOUSE
THANKS VERYU BEST SITE THIS ONE

Narinder Sharma said...

2500+backlinks instantly
must visit

www.niktricks.blogspot.com

Unknown said...

Yes.A very nice blog here.I always love it to come back.Thanks for bringing such a joy.

Visit - Brother Printer Technical support

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger