Fairy Dust Blogger Instructions
Link: mf2fm Look for MOUSE EFFECTS to the left.
Resource: Funky’s Blog
THANK YOU SO MUCH FUNKY! YOU TOTALLY ROCK!
Request by: Doris at Scraps Dimensions
Adding a Fairy Dust mouse trail to your blog.
Step 1 – Decide on color of your mouse trail.
Click here to get the color of your choice COLOR CHART save that color code. The color in the sample given is SILVER. You can see the Fairy Dust Mouse Trail in action on my test blog HERE.
Step 2 – Backup your blog template.
You can find directions to do that here.
Step 3 – Change your HTML code.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and look in the top of your HTML code for the word <head>
You will place this code directly behind the word <head>
<script type='text/javascript'>
// <![CDATA[
var colour="#D9D9D9";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Step 4 – PREVIEW
Give your blog time to load and you should be able to preview the mouse trail. You may want to add more “sparkles” by increasing the number in the top of the code.
Step 5 – SAVE
If you like what you see, then save your HTML template.
Now you have a fairy dust mouse trail.
Click HERE for the Word Document Instructions.
Here’s to happy scrapping, and
Hugs from the heart,
Jeanette
Scraps Dimensions
ReplyDeleteThank you so much for this tutorial...I just got back from bein away for a few weeks...I am going to change my blog layout and can't wait to start this...you are an angel. Hugs and kisses.
I'm finally getting around to some of the fun things I've wanted to add, so THANKS for all your amazing work. My blog would not be anywhere near what it is today without you. I'm still waiting on my CT to make the scrolling list for them, but you can check out some of the other things I'm doing! I hope you are having a relaxing summer.
ReplyDeleteAwesome! Worked like a charm! I posted about it on my blog: http://bubblykori.blogspot.com/2009/08/fairy-dust-mouse-sparkles.html
ReplyDeleteBy the way, if you like any of my designs, let me know and I'll get you a free kit! :) My terms allow web usage.
Thanks for the great blog tips!
Wow this is awesome! Thanks so much for the tut! I added it and it matched my header that a friend made for me :) Here is my blog Lady Yuna Creations
ReplyDeleteIt worked ..it worked,,it worked!!! Thank you Thank you Thank you!!!
ReplyDeleteLove your tuts...keep them coming!!!
Huggs
Tanya
Thanks for this tutorial! It worked for me too! However, it works best when you mouver the top of the page and the sides but not on the middle part of the page. I wonder why. Hopw you can help me out on this. You can also take a look at my blog http://theseekergirl.blogspot.com
ReplyDeleteHey Jeanette, I love this, but again your page won't let me copy the code..
ReplyDeleteHey Cat, click on the Word Document instruction at the bottom of the post!
ReplyDeleteHi Jeanette love your blog !! Where would I find the 'snow effect' that you have on your blog ? Its really cute !
ReplyDeleteMy blog is http://wendyb5724.blogspot.ca/