Corações com Links a Flutuar pelo Blog

Templates exclusivos e profissionais, instalação de hacks e domínios e utilização técnicas de SEO. Conheça o ProBlogs, onde fazemos tudo isso a preços relativamente baixos!

Já faltam poucos dias para se celebrar o dia de São Valentim e o romance já se sente no ar. E já que andamos com a paixão e o amor na cabeça e no coração porque não decorar-mos os nossos blogs com uns corações a flutuar pela página e que cada um tenha um link para uma rede social ou talvez para o feed do site/blog, para que apesar de andarem pela página tenham alguma utilidade.

Pode ver este corações neste blog de provas.

Este efeito não funciona no Internet Explorer.

Para adicionar este efeito ao seu blog entre no Blogger e dirija-se à aba Design e de seguida à sub-aba Editar HTML.

Procure pela tag:

</head>

Acima dela cole o código abaixo:

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function pagestart(){
//Aqui adicionamos os IDs às imagens
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
//Aqui indicamos quantas imagens já programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4"); }
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

Agora procure pela tag:

<body>

Se usa um template do Designer de Modelos do Blogger, então deverá colocar pela linha abaixo:

<body expr:class='"loading" + data:blog.mobileClass'>

Abaixo de uma delas cole:

<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47; height:68;'>
<a href='URL_FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5J0Jl10u7hJJyhbgcJzm4Gf5AVyA7xxSaVeIDiU06iubJz3BkYeQbrMguLRChxDroeWAaS9hnqH-6QaRmQryz70sSkIGrbGbPSSHHwbuKhNlApTvR8pJGkaPn6gPA1K4rngXqnnHIDSY/'/></a>
</div>
<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47; height:68;'>
<a href='URL_TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTFWEZFSm482uR3De-BogNt8OnvzKEAf2N8NhrSVZbwk2lVp2IhjX16DBZlOTUon2HeWzko9EkI_tcbwAIopXV9Y_cZ-maWj15EGvwWbQ1vJoauYtfMTHsNFKkTV7F029Rm-KpckmjTe4/'/></a>
</div>
<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47; height:68;'>
<a href='URL_FEED'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8oC6VeFEmAaG6cTlUGRJCb4F2AugFGcWu_VS-UZ-1U9y5IzXDWDnUNh_9s8i3kZfE_cTKz3laL_k8g3rK2AT93dkbMWm7Dda5RxBE9ZVR-I-xZv9_Fj-w7uNEp5bDCf5gtqRljA1jTA/'/></a>
</div>
<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47; height:68;'>
<a href='URL_LINK_QUALQUER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4vy-Mc3sNJouqgFbIDPGuWmCpPcZylELPd8CAgtrceFw77kCuWbXTWba8lJzljJvyLAZVKXcKpeN6GCJneXh4Yrias4FMHASgUV8Kyg5iMMbHksHGlTOEnB4k8wKXn0eLR1egC2XzoM/'/></a>
</div>

Substitua as palavras a amarelo alaranjado pelo link do seu Facebook, Twitter, Feed, respectivamente e no último caso por um url à escolha.

Se deseja adicionar mais corações ou imagens procure por esta parte do código adicione as linhas a verde como é indicado:

//Aqui adicionamos os IDs às imagens
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
corazon5=new Chip("corazon5",47,68);
corazon6=new Chip("corazon6",47,68);
corazon7=new Chip("corazon7",47,68); //Aqui indicamos quantas imagens já programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4"); movechip("corazon5");
movechip("corazon6");
movechip("corazon7");

Se prestar atenção ao código acima notará que, em todas as linhas, foram alterados os números de maneira consecutiva, pelo que se adicionar mais linhas também deverá seguir a ordem dos números.

Na outra parte do código também serão adicionados os códigos das imagens também tomando em conta o ID com o número consecutivo:

<div id='corazon5' style='position:absolute; z-index:83; left: -500px; width:47; height:68;'>
<a href='URL_DO_LINK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4vy-Mc3sNJouqgFbIDPGuWmCpPcZylELPd8CAgtrceFw77kCuWbXTWba8lJzljJvyLAZVKXcKpeN6GCJneXh4Yrias4FMHASgUV8Kyg5iMMbHksHGlTOEnB4k8wKXn0eLR1egC2XzoM/'/></a>
</div>

TUTORIAL CHEFE

Corações com Links a Flutuar pelo Blog