27 de mar de 2013

Como eu coloco aquelas estrelinhas que caem do mouse no Blog???

 
Hi marinheiros!!!
Talvez vocês fiquem se perguntando sempre que eu escrevo que
 isso se trata de um navio, que vocês são marinheiros, que eu sou a Capitã. Bom,
acho que isso deve ter um sentido sim, na época em que eu criei o Blog eu gostava
muito de ouvir uma musiquinha do grupo Paralamas do Sucesso, a música era assim:

Melô do Marinheiro
 
 
Bom pessoal, voltando ao Tutorial. Hoje vim ensinar como colocar
aquelas estrelinhas que ficam caindo do mouse. É muito fácil e ainda mais facil
 sabendo daquela nossa Paletinha de Cores!!!
 
Primeiro Passo
 
Chegue até a página Modelo do Blog.
Clique em "Editar HTML"
 
Agora aperte Ctrl + F e digite naquela barrinha que vai aparecer
ali em cima esse código:
 
</body>
 
 
Segundo Passo
 
Antes do Código acima cole o seguinte código
 (Sim ele é Gigantesco, mas não se preocupem):
 
<script type='text/javascript'>
// <![CDATA[
var colour="#FFD700";
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>
No primeiro código que eu destaquei, Aquela parte Laranja é a cor
que você vai usar nas estrelinhas das estrelinhas.
Nesse caso, para trocar a cor tem que acessar a Tabela de Cores no link abaixo:
 
 
 Escolha a cor que você quer e copie o código dela, depois apague aquele
FFD700 e cole pelo código que quiser!!
*Obs.: Não apague o # viu, pelo amor de deus não apague!!!!!
 
 No segundo destaque em Amarelo, no caso aquele número 50,
você pode escolher o número de estrelinhas quer que caiam do mouse.
 
Terceiro Passo
 
Depois de tudo ajeitado, clique em "Salvar Modelo" e depois Clique em "Fechar"
e Visualize o Seu blog para ver se funcionou!!!
 
Era isso pessoal,
e aqui vou deixando o meu 'Tchau"!!!
Até o próximo Post
 
 

 

2 comentários:

Aqui Nos comentários não é permitido

- Ofensas contra as outras pessoas.

*Obs. Seria agradável se os comentários fossem sobre o Post feito!!

Obrigada, e bom proveito de nossas dicas!!!