teste novo marih: maio 2012

Tutorial: Efeito de estrelinhas caindo do mouse

Minha mãe viu esse efeito de estrelinhas no mouse de um blog e achou lindo, ai eu fiz pro blog dela hehe... ela ficou tão feliz, ai resolvi ensinar aqui pra vocês como faz pra colocar no blog de vocês também.
Primeiro podem ver como ficou no blog dela: http://siltrico.blogspot.com.br/.

Bem vamos começar, você vai em Design - Editar HTML dá um Control F para procurar e procure por <head> ok?
Agora você cola o codigo abaixo imediatamente depois dessa tag <head> que você encontrou

<script type="text/javascript">
// <![CDATA[
var colour="#FF1493"; /* Cor das primeiras estrelinhas que caem do mouse */
var colour3="#FF69B4"; /* Cor das últimas estrelinhas */
var sparkles=70;

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);
var rats=createDiv3(5, 5);

rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rlef=createDiv3(1, 5);
var rdow=createDiv(5, 1);
var rdow=createDiv3(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);
}

function createDiv3(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=colour3;
return (div);
}
// ]]>
</script>

Para editar você vai lá em cima logo no primeiro paragráfo de codigo:

<script type="text/javascript">
// <![CDATA[
var colour="#FF1493"; /* Cor das primeiras estrelinhas que caem do mouse */
var colour3="#FF69B4"; /* Cor das últimas estrelinhas */
var sparkles=70;

E ali onde estiver de outrar cor é onde você vai fazer as alterações, mudando a cor das estrelinhas, substituindo o código da cor que esta ai pelo código da cor que deseja, para saber o código das cores basta acessar esse link.

E onde esta " var sparkles=70;" é a quantidade de estrelinhas que caem do mouse.

E ai gostaram da dica ?
Espero que sim .... Até a proxima ....

Outra dica sobre botões de compartilhamento

Bem pessoal percebi que tem algumas pessoas que não conseguiram colocar os botões de compartilhamento usando a dica que eu coloquei no outro post - nesse link, então hoje vou dar uma outra dica se aquela não funcionou com você:

Ai vai:

Vá em Painel de controle > Design > Editar HTML > Clique em expandir modelos de widgets e procure (control + F) por <p class='post-footer-line post-footer-line-3'> ou <div class='post-footer-line post-footer-line-3'> e cole imediantamente após o código abaixo:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>