Widget Parceiros VIP Com Efeito Balançando
Nesta postagem compartilho mais um dos códigos que eu uso e recomendo. Se trata de um Widget com banners de parceiros, e esses banners balançam de 5 em 5 minutos.
Saiba como colocar esse efeito em qualquer imagem do seu blog: Efeito Imagens Balançando.
Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole os seguinte código
<style>
.swing{
-webkit-animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
animation:swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
}
@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -moz-transform: rotate(0); }
}
@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}
</style>
<script language="javascript">
var
MNews = new Array();
MNews[0]= '<a href="http://dicashot.blogspot.com.br/" target="_blank"><img class="swing" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSp2vH4SQs5CFH8711PJrcZPBA58ASF1Un-vSji8zZxkgLRX_8xx1G6zjqyI22kHF3td03pQnLFG9vqT_8H9TqjV0lHLeYEM0i8PnZHAiqRTyFiTwQpv_M5qMIdhb8N2OIjUqYdnwzQL4/s1600/DicasHot+banner+300x200.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[1]= '<a href="http://www.atoananet.com.br/" target="_blank"><img class="swing" src="http://www.atoananet.com.br/uploads/300x300.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[2]= '<a href="http://www.madrugalinks.com/" target="_blank"><img class="swing" src="http://www.madrugalinks.com/arquivos_upload/selos/13.png" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[3]= '<a href="http://loucurasdanet.com" target="_blank"><img class="swing" src="http://loucurasdanet.com/arquivos_upload/selos/11.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[4]= '<a href="http://mestrecharlieharper.com.br/" target="_blank"><img class="swing" src="http://mestrecharlieharper.com.br/arquivos_upload/selos/12.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[5]= '<a href="http://linkslegais.blog.br/" target="_blank"><img class="swing" src="http://linkslegais.blog.br/uploads/wp-admin/banner300.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[6]= '<a href="http://www.minutodesign.com.br/" target="_blank"><img class="swing" src="http://minutodesign.com.br/img/banners/300x250.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[7]= '<a href="http://agregadordelinks.net/" target="_blank"><img class="swing" src="http://agregadordelinks.net/wp-content/uploads/2014/04/336x280.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[8]= '<a href="http://fake-true.com/" target="_blank"><img class="swing" src="http://www.fake-true.com/img/banners-parceiros/banner-fake-batman-250x250.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[9]= '<a href="http://br.beruby.com/promocode/uu_hJN" target="_blank"><img class="swing" src="http://br1.beruby.com/images/banner/banner-beruby-300x250-pt-BR.gif?1432729488" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[10]= '<a href="http://4blogs.info/d1125" target="_blank"><img class="swing" src="http://4blogs.info/Imagens/250por250.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[11]= '<a href="http://www.dohits.com.br/" target="_blank"><img class="swing" src="http://www.dohits.com.br/Imagens/120por60.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[12]= '<a href="http://sodalinks.com.br/" target="_blank"><img class="swing" src="http://sodalinks.com.br/arquivos_upload/selos/15.jpg" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[13]= '<a href="http://googlulinks.net/" target="_blank"><img class="swing" src="http://googlulinks.net/arquivos_upload/selos/31.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
MNews[14]= '<a href="http://www.muitosacessos.com.br/?ref=64786" target="_blank"><img class="swing" src="http://www.muitosacessos.com.br/promo/banner_300_250.gif" alt="" name="ddddd_r3_c2" width="300" height="250" border="0" id="ddddd_r3_c2" /></a>'
var Numero = Math.floor(Math.random()*14);
document.write(MNews[Numero]);
</script>
Tendo colado o código, basta salvar e pronto!!!
Nas partes destacadas de azul do código, coloque o link e o URL do seu banner. O "href=" refere-se ao link; e o "src=" refere-se ao URL da imagem do banner.
Qualquer duvida, não deixe de perguntar. Há! E se você tiver alguma sugestão de postagem, alguma duvida ou queira deixar sua opinião sobre o blog DicasHot, entre no nossa comunidade e faça a sua sua pergunta.
