Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

How to Add Flying Text Following Mouse Cursor in Blogger

1 83

Get real time updates directly on you device, subscribe now.

Well you might have seen low priority blogs using this kind of script that shows text flying, wobbling and following the mouse cursor position, so where ever the mouse goes the text follows in dancing way, well if you have seen that effect and you have wished to have that on your blog then on you can add that effect to your blog too.

Cursor Trail

Read This Also
1 of 7

So it basically done using JavaScript, so I have enabled this effect right here so you might be able to see it working, you might be able to see a huge gap between mouse & text but when you will apply it right inside your template it will not have this much gap. So follow below steps to add it to your blogger blog, and add that awesome dancing text to your mouse cursor.

READ  What is Page level Ads in Adsense? What is QuickStart Ads? How to Implement This?
  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for </body> tag & paste below code above it.[sociallocker]
    <script type='text/javascript'>var text='FreeSV Is An Tech Blog'</script>
    <script type='text/javascript'>//<![CDATA[function moveid(e,t,n){if(ns4)e.moveTo(t,n)
    ;else{e.style.left=t+"px";e.style.top=n+"px"}}function animate(e){x1=Xoff+
    (ie4||ie5?event.clientX+document.body.scrollLeft:e.pageX);y1=Yoff+(ie4||ie5?event.
    clientY+document.body.scrollTop:e.pageY)}function getidleft(e){if(ns4)return e.left;
    else return parseInt(e.style.left)}function getidtop(e){if(ns4)return e.top;else 
    return parseInt(e.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,-1e3);moveid(txtA[i],0,-1e3)}else moveid(txtA[i]
    ,getidleft(txtA[i-1])+txtw,getidtop(txtA[i-1]))}moveid(txtA[1],x1,y1)}var delay=40;
    var Xoff=20;var Yoff=20;var txtw=14;var beghtml='<font color="#0056e3"><b>';var 
    endhtml="</b></font>";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=-1e3;var t="";for(i=1;i<=text.length;i++){t+=ns4?'<layer left="0" top="-100"
     width="'+txtw+'" name="txt'+i+'" 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);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>
    

    [/sociallocker]

  3. Now just change the Blue Colored text to your desired text.
  4. You can even change the color of the text by changing that code in Purple color.
  5. Speeds and other stuff is also customizable just change the Orange codes.

So that’s it now the test will be live on your blog following your cursor in a dancing way, do comment about how you liked this tutorial.

Get real time updates directly on you device, subscribe now.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More