Tutoriais de coisas caindo do cursor no blog

Holá gente hoje trouxe uma maratona de tutorias vamos lá?

Abaixo, colocarei vários links para vocês selecionarem o preferido ok?

                                                   Bolhas saindo do mouse

<script type="text/javascript">

// <![CDATA[

var colours=new Array("#FF69B4", "#FF69B4", "#FF69B4", "#FF69B4", "#FF69B4"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=66; // maximum number of bubbles on screen

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

  var rats, div;

  for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");

 rats.style.visibility="hidden";

 div=createDiv("auto", "auto");

    rats.appendChild(div);

 div=div.style;

    div.top="1px";

    div.left="0px";

 div.bottom="1px";

 div.right="0px";

 div.borderLeft="1px solid "+colours[3];

 div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");

 rats.appendChild(div);

 div=div.style;

    div.top="0px";

    div.left="1px";

 div.right="1px";

 div.bottom="0px"

 div.borderTop="1px solid "+colours[0];

 div.borderBottom="1px solid "+colours[2];

 div=createDiv("auto", "auto");

 rats.appendChild(div);

 div=div.style;

 div.left="1px";

 div.right="1px";

    div.bottom="1px";

 div.top="1px";

 div.backgroundColor=colours[4];

 div.opacity=0.5;

 if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);

 bubb[i]=rats.style;

  }

  set_scroll();

  set_width();

  bubble();

}}

function bubble() {

  var c;

  if (x!=ox || y!=oy) {

    ox=x;

    oy=y;

    for (c=0; c<bubbles; c++) if (!bubby[c]) {

      bubb[c].left=(bubbx[c]=x)+"px";

      bubb[c].top=(bubby[c]=y)+"px";

      bubb[c].width="3px";

   bubb[c].height="3px"

   bubb[c].visibility="visible";

   bubbs[c]=3;

      break;

 }

  }

  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

  setTimeout("bubble()", 40);

}

function update_bubb(i) {

  if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    bubbx[i]+=(i%5-2)/5;

    if (bubby[i]>sdown && bubbx[i]>0) {

   if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

  bubb[i].width=bubbs[i]+"px";

  bubb[i].height=bubbs[i]+"px";

   }

      bubb[i].top=bubby[i]+"px";

      bubb[i].left=bubbx[i]+"px";

    }

    else {

      bubb[i].visibility="hidden";

      bubby[i]=0;

      return;

    }

  }

}

document.onmousemove=mouse;

function mouse(e) {

  set_scroll();

  y=(e)?e.pageY:event.y+sleft;

  x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

  if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

  }

  else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

  }

  else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

  }

  else {

    swide=800;

 shigh=600;

  }

}

window.onscroll=set_scroll;

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;

  }

}

function createDiv(height, width) {

  var div=document.createElement("div");

  div.style.position="absolute";

  div.style.height=height;

  div.style.width=width;

  div.style.overflow="hidden";

  return (div);

}

// ]]>

</script>

Corações saindo do mouse:

<script type='text/javascript'>

// <![CDATA[

var colour=" #666666 ";

var sparkles=40;

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(5, 5);

var rdow=createDiv(5, 5);

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()*5;

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+"49px";

div.style.width=width+"50px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

Se você escolheu algum desses links acima então preste atenção ao tutorial...

se você usa o modelo antigo do blogger, vá até Desing Adicionar um gadgetHTML/Java Script

Se você usa o novo modelo do blog, vá até Modelo LayoutAdicionar um gadgetHTML/Java Script

E cole o código escolhido.

Agora vamos à mais dois links e outro tutorial:

Estrelinhas caindo do cursor uma única cor:

<script type='text/javascript'>// <![CDATA[var colour="#FF1493";var sparkles=50;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>

Estrelinhas caindo do cursor com efeito arco-íris

<script type='text/javascript'>
// <![CDATA[
function initCursor() {
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();
}}

var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
var sparkles = 35;

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();

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");
rainbow="#"+hex[r]+hex[g]+hex[b]
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.zIndex="10";
div.style.backgroundColor=rainbow;
return (div);
}
window.onload=function()
{
initCursor()
initImage()
startTime()
}

function initImage() {
imageId = 'menu'
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

function changeNav(id) {
document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
document.getElementById('rabbit').style.top="275px"
document.getElementById('penguin').style.top="532px"
}

function hidestatus(){
window.status=""
return true
}
// ]]>
</script>

<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
function showRelatedContent(args) {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
document.onclick = showRelatedContent.prevOnClick;
return;
}

var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);
if (match !== null) {
document.getElementById('related-loading').style.left = match[1] + 'px';
el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';
}
el.src = "http://www.blogger.com"
+ '/related-content.g?q='
+ window.location.href
+ '&id=' + "7792698363959436653";
el.parentNode.style.display = 'block';
showRelatedContent.prevOnClick = document.onclick;

// Hide related-content dropdown when clicking anywhere but on it.
document.onclick = function() {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
}
document.onclick = showRelatedContent.prevOnClick;
};
}
</script></div></div>

Agora, se você escolheu um desses dois últimos links sigas as instruções abaixo:

click nas imagens para ampliar:

bjiin espero que tenham entendido, essa tabela vai ajudar a entender as cores ~clika! comentem!

Créditos~{x}