Thayane Azevedo ♥: Tutoriais ♥

Click com efeitos no cursor !

Deixe o cursor do blog animado com estrelinhas

que explodem na tela sempre que clicar. Confira o resultado no link abaixo.
[clic na área branca do Pop-Up].

Veja o exemplo

-------------------------------------------------------------------------------------
Copie o código abaixo e cole antes de </Head>

thay onde fica </Head>?

Na Nova interface do blog, clic em Modelo, Editar Html, Prosseguir.
Pressione a tecla Ctrl + F no seu teclado ou pressione o botão F3, na barrinha que surgiu escreva </Head>

Observe que o código foi localizado agora copie o código abaixo cole antes de </Head>
e salve.

-----------------------------------------------------------------------

// <![CDATA[

var sparks=75; // how many sparks per clicksplosion

var speed=33; // how fast - smaller is faster

var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)

var colours=new Array('#FFAEB9', '#FF1493', '#D8BFD8');

// aqui as cores

/****************************

* Clicksplosion Effect *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var intensity=new Array();

var Xpos=new Array();

var Ypos=new Array();

var dX=new Array();

var dY=new Array();

var stars=new Array();

var decay=new Array();

var timers=new Array();

var swide=800;

var shigh=600;

var sleft=sdown=0;

var count=0;

function addLoadEvent(funky) {

var oldonload=window.onload;

if (typeof(oldonload)!='function') window.onload=funky;

else window.onload=function() {

if (oldonload) oldonload();

funky();

}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {

var i, j;

window.onscroll=set_scroll;

window.onresize=set_width;

document.onclick=eksplode;

set_width();

set_scroll();

for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {

stars[j]=createDiv('*', 13);

document.body.appendChild(stars[j]);

}

}}

function createDiv(char, size) {

var div, sty;

div=document.createElement('div');

sty=div.style;

sty.font=size+'px monospace';

sty.position='absolute';

sty.backgroundColor='transparent';

sty.visibility='hidden';

sty.zIndex='101';

div.appendChild(document.createTextNode(char));

return (div);

}

function bang(N) {

var i, Z, A=0;

for (i=sparks*N; i<sparks*(N+1); i++) {

if (decay[i]) {

Z=stars[i].style;

Xpos[i]+=dX[i];

Ypos[i]+=(dY[i]+=1.25/intensity[N]);

if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;

else {

Z.left=Xpos[i]+'px';

Z.top=Ypos[i]+'px';

}

if (decay[i]==15) Z.fontSize='7px';

else if (decay[i]==7) Z.fontSize='2px';

else if (decay[i]==1) Z.visibility='hidden';

decay[i]--;

}

else A++;

}

if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);

}

function eksplode(e) {

var x, y, i, M, Z, N;

set_scroll();

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

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

N=++count%bangs;

M=Math.floor(Math.random()*3*colours.length);

intensity[N]=5+Math.random()*4;

for (i=N*sparks; i<(N+1)*sparks; i++) {

Xpos[i]=x;

Ypos[i]=y-5;

dY[i]=(Math.random()-0.5)*intensity[N];

dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;

decay[i]=16+Math.floor(Math.random()*16);

Z=stars[i].style;

if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];

else if (M<2*colours.length) Z.color=colours[count%colours.length];

else Z.color=colours[i%colours.length];

Z.fontSize='13px';

Z.visibility='visible';

}

clearTimeout(timers[N]);

bang(N);

}

function set_width() {

var sw_min=999999;

var sh_min=999999;

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

if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

}

if (typeof(self.innerWidth)=='number' && self.innerWidth) {

if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;

if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;

}

if (document.body.clientWidth) {

if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

}

if (sw_min==999999 || sh_min==999999) {

sw_min=800;

sh_min=600;

}

swide=sw_min-7;

shigh=sh_min-7;

}

function set_scroll() {

if (typeof(self.pageYOffset)=='number') {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body && (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;

}

// ]]>

</script>

-----------------------------------------------------------------------

BeijosdaThay ♥

Efeito Cores Múltiplas no Link

ANTES

DEPOIS

---------------------------------------------------------------------
Copie o código abaixo, cole antes de ]]></b:skin> e salve.

THAY onde fica ]]></b:skin>?

Na Nova interface do blog, clic em Modelo, Editar Html, Prosseguir. Pressione a tecla
Ctrl + F no seu teclado ou pressione o botão F3,
na barrinha que surgiu escreva ]]></b:skin>

Observe que o código foi localizado agora copie o código abaixo cole antes de ]]></b:skin> e salve.

a{
letter-spacing:2px;
-webkit-transition-duration: .50s;
text-shadow:1px #fff;
}
a:hover {
color:#000;
text-shadow: 2px 7px 1px #b8d935,
-10px 1px 1px #fc5d77,
4px -7px 1px #5dcdfc;
-webkit-transition-duration: .50s;
}

FIM

Postagem Popular Personalizada no Blog ♥

Veja o exemplo abaixo

Copie o código abaixo

cole antes de ]]></b:skin> e salve.

Thay onde fica ]]></b:skin>?

Na Nova interface do blog, clic em Modelo, Editar Html, Prosseguir.
Pressione a tecla Ctrl + F no seu teclado ou pressione o botão F3, na barrinha que surgiu escreva ]]></b:skin>

Observe que o código foi localizado agora copie o código a baixo cole antes de ]]></b:skin> em seguida clic em salvar modelo..

#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #FF3E96;background: -webkit-gradient(linear, left top, left bottom, from(#FF3E96), color-stop(0.5, #FF3E96), c#4F94CDolor-stop(0.5, #FF3E96), to(#aaa));background: -moz-linear-gradient(top, #ffffff, #ddd 50%, #FF3E96 50%, #ffffff);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Ainda na Nova interface do blog, clic em Modelo, Layout em seguida
Adicionar um Gadget.
Escolha a opção Postagens Populares e Salve.

Nenhum comentário:

Postar um comentário

Regras da Thay *-*

- Não xingar , e nem falar mal.
-Deixe o link do seu blog para retribuição.
-De sua opinião sobre oque poderia ser melhor.
-Falar sobre o post .
- Não é obrigatório comentar.
- NÃO é proibido fazer perguntas não!
-Seu comentário terá resposta , então volte para olhar.
Beijoooos ♥

Páginas

Tutoriais ♥