Showing posts with label cursors. Show all posts
Showing posts with label cursors. Show all posts

August 13, 2011

How To Add Snow Effect On The Blogger Mouse Cursor Area


Hi! guys`how are you? here is the cool simple snow effect to your blog mouse cursor area. many snow effects gadget use images to this. but this gadget do not use images to this. so this is very fast. i've tested this effect on internet explorer, mozzilla firefox & many other web browsers. this simple non-image based widget works just fine!! I hope you enjoy using this very cool snow effect gadget. please add your comments, installetion trouble or opinions below comment box.. and thank you visiting my website. and subscribe our news letter to get latest blogger tricks fast.

1.Login to your blogger Dashboard and go to Design --> Page Elements.

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

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













<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

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="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
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>

4. Now Click On Save 'JavaScript' You are done....

Picture From http://www.galaxygoo.org/blogs/galaxygoo/flashathon_20072008/

August 12, 2011

How To Add Cool Green Mouse For Blogger


How To Add Cool Green Mouse For Blogger


1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </body> tag.

4.Copy and Paste below code immediately before </body> tag.







<style type='text/css'>body, a, a:hover {cursor: url(https://sites.google.com/site/bloggertricksandtoolz/bloggertricksandtoolz.com_GREEN.cur), progress;}</style>


4.Click on "Save Templates" You are done.

Cheers.

How To Animated Blue Mouse Cursor For Blogger


How To Animated Blue Mouse Cursor For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </body> tag.

4.Copy and Paste below code immediately before </body> tag.







<style type='text/css'>body, a, a:hover {cursor: url(https://sites.google.com/site/bloggertricksandtoolz/bloggertricksandtoolz.comblueanimate.cur), progress;}</style>


4.Click on "Save Templates" You are done.

Cheers.

How To Add Michael Jackson Mouse Cursor For Blogger


How To Add Michael Jackson Mouse Cursor For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </body> tag.

4.Copy and Paste below code immediately before </body> tag.








<style type='text/css'>body, a, a:hover {cursor: url(https://sites.google.com/site/bloggertricksandtoolz/bloggertricksandtoolz.commichaeljackson.cur), progress;}</style>


4.Click on "Save Templates" You are done.

How To Add Purple Mouse Cursor For Blogger


How To Add Purple Mouse Cursor For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </body> tag.

4.Copy and Paste below code immediately before </body> tag.







<style type='text/css'>body, a, a:hover {cursor: url(https://sites.google.com/site/bloggertricksandtoolz/bloggertricksandtoolz.com_Purple_.cur), progress;}</style>


4.Click on "Save Templates" You are done.

August 11, 2011


How To Add Purple Mouse Cursor For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </body> tag.

4.Copy and Paste below code immediately before </body> tag.







<style type='text/css'>body, a, a:hover {cursor: url(https://sites.google.com/site/bloggertricksandtoolz/bloggertricksandtoolz.com_Purple_.cur), progress;}</style>


4.Click on "Save Templates" You are done.