Olá meus amores, como tinha dito para vocês, vou começar a postar alguns tutoriais simples de coisas fofas para dá um up no blog de vocês, espero que todos gostem *-* (Não sou expert no assunto, mas tenho aprendido muitas coisas nesse quase um ano de blog, a cada post, vou deixar o link do site onde aprendi o tutorial - dos que eu lembrar, ou estiver salvo aqui - tudo para vocês, seus lindos), VAMOS LÁ.
Lembrando que você deve fazer um backup do seu template antes de começar a modificar o html, apenas por precaução.
Primeiramente entre no menu do seu blog, vá em editar HTML, clique em CTRL+F ou F3 e procure por </body> e cole o código abaixo ANTES de ''body''.
<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>
Ok, após fazer isso, você poderá também modificar a cor das estrelinhas, basta procurar por var colour="#FFD700"; Para escolher a cor desejada, basta clicar na Tabela de Cores HTML. Outra modificação bem legal, é a quantidade de estrelinhas que vão cair, para mudar basta procurar por var sparkles=50 E trocar o "50" por um número maior, ou menor.
Ok, agora existem também outras formas de adicionar Bolhas e Corações saindo do mouse, vamos aprender?
Vá em Layout depois em Adicionar um gadget e escolha o gadget HTML/Java Script, após escolher basta copiar um dos códigos abaixo e salvar.
Código 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>
Bolhas Caindo 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>
Bom gente, por hoje foi só isso, espero que tenha ajudado vocês, principalmente aqueles que haviam me perguntado como fazia esse efeito, semana que vem pretendo trazer outro tutorial desse estilo. Esse tutorial eu aprendi no site: http://www.dicasparablogs.com.br
Como eu disse, não são tutoriais ensinando a criar um template (Afinal não sei rs) mas tenho certeza que vocês, principalmente as meninas, vão gostar dos próximos posts, afinal nós amamos essas frescurinhas, né?
Olá Kéziah,
ResponderExcluirParabéns pela inciativa, muitas pessoas não desconhecem esses efeitos pra incrementar seu o blog.
é super fofo!
Beijos
Deise^^
Fofo mesmo, né? Obrigada querida!
ExcluirBeijocas
Olá Keziah,
ResponderExcluirtudo bem ?
Adorei a postagem, quem sabe mais pra frente eu faça algo em meu blog.
Abraços
Parabéns pelo Blog, ótimo Conteúdo.
http://www.vibradosemlivros.blogspot.com
Gabriel Lima!
Opa, obrigada Gabriel... Precisando de ajuda :D
ExcluirAmaaamooooos mesmo, frescurinhas é com a gente mesmo!!! kkkk Adorei!
ResponderExcluirBeijos,
Celle
bestherapy.blogspot.com
Cê sabe bem né? kkkkkkkk
ExcluirNossa eu adoro esses efeitos. Acho que eu vou fazer no meu blog!
ResponderExcluirQuero mais tutoriais, viu?
Beijos,
Yasmin
deitadosnagrama.blogspot.com.br
Pode deixar Yasmin, qualquer dúvida me avise *-* Beijocas!
ExcluirTutorial muuuito bem explicado :) Gostei muito!
ResponderExcluirBeijo
Mariana | Sem querer me intrometer
Que bom que você gostou *---*
ExcluirOiii,
ResponderExcluirEu sou pessima com códigos..hehe.
Mas eu vou tentar, é tão fofo!!!
Beijoos!
hahaha'
ExcluirBoa sorte, se precisar de ajuda =)
Eu acho a ideia excelente...Amo tutoriais, mas os mais simples kkkk Devo confessar: a palavra "editar HTML" me apavoraaa, não mexo com isso nem mortaaaa, vou fazer bobagem na certa rsrsrsrsrs
ResponderExcluirUma pena, fica muito lindo mesmo..mas eu não tenho coragem de tentar, sou horrenda com essas coisas *_*
Bjinhos marcados
http://omarcapaginas.blogspot.com.br
Não tem erro Ci, mas se você quiser, depois te ajudo a colocar hahaha'
ExcluirBeijocas!
Obrigada Fran *-* semana que vem, mais frescuras rs
ResponderExcluirOpa vou tentar aqui, amei as dicas e na verdade não fazia nem ideia de como fazer isso.
ResponderExcluirSério preciso de um manualzinho ahahaha
Vou ficar super de olho nos tutoriais..
Beijos
http://vdsweetlove.blogspot.com.br/
Fica de olho sim Naah, são coisinhas bem fáceis de fazer.
ExcluirBeijocas!
O meu blog é bem simples... Queria tanto ter talento e criatividade para isso... rsrsrs
ResponderExcluirMas, é ótimo vc passar isso a diate!
Beijos
http://plantaoonline.blogspot.com.br
Ah, nem precisa de talento Paola, é bem fácil rs
ExcluirAchei sua ideia genial Kéziah, eu adoro essas coisinhas fofas, embora eu lute pra não embonecar demais o RR, pois um blog literário não precisa ser muito chamativo. Mas eu sou perua, preciso me policiar mesmo...rsrsrs
ResponderExcluirMas sua ideia foi show, amei e estarei aqui aprendendo a mexer nas coisinhas, pode ter certeza, parabéns pela iniciativa amore.
Beijão
Vivi
Razão e Resenhas
Obrigada Vivi, fico feliz que tenhas gostado!
ExcluirMuito charmoso! Bjs
ResponderExcluirObrigada, linda!
ExcluirAmei o tuto, ficou muito legal, vou tentar fazer depois, mas é melhor seguir seu conselho primeiro e fazer um backup rsrs, não sou nada boa nessas coisas, ficou 10 seu post linda. Beijos.
ResponderExcluirhttp://loucurasedevaneiosbyliza.blogspot.com.br/
É sempre mais seguro Liz *-* haha'
ExcluirFeliz que tenhas gostado.
Beijocas
Olá legal o tutorial mas não posso colocar no meu blog se não eu só iria ficar brincando com o mouse o tempo todo hehe
ResponderExcluirbjos
hahahahha'
ExcluirSei bem como é
Essas dicas são super legais, ainda mais para mim que não sei absolutamente NADA de html... você salva a minha vida *-*
ResponderExcluirUm selinho do meu blog para o seu *-* http://www.encantoemfolhas.com/2012/11/selo-premio-dardos.html
Ahh que linda Jaque, é simples, basta prestar atenção *-* Beijocas e obrigada pelo selinho!
ExcluirAdorei o tutorial Keziah!! Você explicou direitinho e facilitou para quem deseja esses corações/bolhas!
ResponderExcluirBeijos,
http://pitadadecultura.blogspot.com.br
Obrigada Gabriela, fica de olho no próximo!
ExcluirAdooooooro ler tutoriais de html, já que sou uma negação dessa parte D: ahsiudhaiusdhasiudhisuahdiuhas
ResponderExcluirBenzitcho, tem um meme pra você lá no meu blog *.* espero que possa respondê-lo. http://linguadoslivros.blogspot.com.br/2012/11/meme-laco-de-incentivo-leitura.html
Beeeeeeeeeeeeeeijinhos :* <3
Eu não sou tão bom com html Rafa! hahaha'
ExcluirMas dá pro gasto.
Obrigada pelo meme *-*
Beijocas
que lindooooooooooooooooo, adorei...esses corações...fofos...bjs
ResponderExcluirhahahah'
ExcluirFico feliz Marli <3
Aii que fofo, roubei pro meuu *-----------*
ResponderExcluirbjoo
http://leitorapaixonada19.blogspot.com.br/
Oi flor, obrigada viu? Vou passar lá sim!
ResponderExcluirOi Fran, vou passar lá sim *-* obrigada, beijos
ResponderExcluirQue bom Juh *-* obrigada!
ResponderExcluirlegal o tutorial que vc tostou sera que vc podia segir o meu blog
ResponderExcluirlik
http://winxepisodiosparabaixart.blogspot.com.br/
sera que vc pode fazer esse tutorial de como colocar para que as pessoas link me
Excluircomo que si fais um link me forvavor poste esse totorial
Acho muito fofo, mas fico distraída tentando fazer desenhos e escrever palavras com as coisinhas caindo... hahaha
ResponderExcluirOie,td bom?
ResponderExcluiradorei seu blog,muito legal xD
vc gostaria de visitar,comentar e seguir meu blog?é sobre o meu mangá que estou criando.
te espero lá!
http://gliter-lovely.blogspot.com.br/
ps. ja estou seguindo vc ^^
bjooos ♥
aahh que pena,eu coloquei o código mas não de certo :(
ResponderExcluireu consegui meu blog ficou lindo coloquei corações e mudei a cor dele para vermelho : #FF0000
ResponderExcluirvisite meu blog : http://jogosstardollestmj.blogspot.com.br/ :)
FICOU D MAIS VISITE MEU BLOG COM RADIO ONLINE http://maniatekdeser.blogspot.com.br/
ResponderExcluirah que lindos! testei os 3 e fica difícil escolher entre eles! por enquanto estou usando as estrelinhas
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirObrigada!
ResponderExcluirO meu ficou muito bonito...
Como eu posso colocar o coração com cores?
Quando eu coloquei ficou preto.