How To Add Style to Mouse Cursor in Blogger

Posted by Lasantha Bandara on December 4th, 2009 File Under : background, java script14 Comments

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language="javascript">

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='ENTER 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 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);

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>

You are done.Refresh your site to see effect.

Style Mouse cursor

File Under : background, java script

14 Responses to “How To Add Style to Mouse Cursor in Blogger”

  1. Aakash says:

    Great Post
    Thaknzzz A Lot

  2. Syed Ommer Amer says:

    Well this is awesome I applied it on my blog

    do visit it . It looks awesome

    www.full-time-entertainment.blogspot.com

  3. Nextgen says:

    Awesome πŸ™‚

  4. saya lieya says:

    macam mneyh nux buadd ?

  5. Shazlin says:

    macam mne nk buad ??

  6. amyra azwany says:

    cm na nk buat ?

  7. Paez ジェラルド says:

    how to change the colour of the text ?

  8. mfsbux says:

    thnxzzzzzzzzzzz a lot
    www.einfoplus.blogspot.com

  9. Bayan Lepas,P.Pinang says:

    mcm mana nk tukar warna dia..???

  10. XueWen Sin says:

    welcome to my blog

  11. momocori says:

    x pandai lhaa..anyone tolong please

  12. eyzchaa says:

    please help .
    i dont know .

  13. Zack Lim says:

    Can u please send me a done javascript,I'm a newbie for those things~Thanks!

  14. Tira_98 says:

    Thank you so much ! It works πŸ˜€

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.