.

sexta-feira

Textual description of firstImageUrl

Widget Parceiros VIP Com Efeito Balançando

ACESSOS:
Deixe seu comentário


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.






Para colocar em seu blog é bem fácil.

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="http://2.bp.blogspot.com/-4btrHGas74M/VaAXRjw8zEI/AAAAAAAAFP8/kLExFQ_Ev8Y/s1600/DicasHot%2Bbanner%2B300x200.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.

Saiba mais sobre nossa comunidade: https://www.youtube.com/watch?v=xqseQwdSVzA


RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}