Como criar banner rotativo para blog

16 de janeiro de 2014 22 comentários
Bom dia!

Hoje venho dá uma super dica para quem gosta de inovar nos blogs. Vou te ensinar a criar o banner rotativo que você pode usar para listar seus parceiros ou os blogs amigos e o que mais sua imaginação desejar. Veja como é fácil!

Primeiramente, você irá precisar das imagens escolhidas e o mais importante, todas precisam estar no mesmo tamanho. Para isso você pode usar o photoscape ou qualquer outro programa de edição e assim redimensioná-las para o tamanho que a lateral do seu blog aceitar.

Veja como é fácil redimensiona-las.



Depois que você estiver com todas as imagens do mesmo tamanho é o momento de você copiar esse código no gadget HTML no seu blog. 

* Você poderá trocar a direction (up = para cima/ down= para baixo)
* Você pode mudar a altura em height
* Você pode mudar o align (a forma que será alinhado)
* Sempre respeite as aspas.

<div class="widget-content">
<marquee onmouseout="this.star()" direction="up" on scrollamount="3" with="400" height="200">
<div align="center">

<a href="LINK PARA QUAL O BANNER SERÁ REDIRECIONADO"_blank">
<img src="LINK DA IMAGEM HOSPEDADA" border="0" alt="Image and video hosting by TinyPic" /></a>

<a href="LINK PARA QUAL O BANNER SERÁ REDIRECIONADO/"_blank">
<img src="LINK DA IMAGEM HOSPEDADA" border="0" alt="Image and video hosting by TinyPic" /></a>

<a href="LINK PARA QUAL O BANNER SERÁ REDIRECIONADO"_blank">
<img src="LINK DA IMAGEM HOSPEDADA" border="0" alt="Image and video hosting by TinyPic" /></a></div></marquee></div>

Note que você poderá colocar quantas imagens desejar, basta ir apenas copiando e colando o código. Importante: Copie e cole o código, mas sempre deixando a última combinação por último. 
Onde está em maiúsculo LINK PARA QUAL O BANNER SERÁ REDIRECIONADO, você deve colocar o link do site que deseja.
Onde está LINK DA IMAGEM HOSPEDADA, você terá que copiar o link direto da imagem, para isso terá que hospeda-la, existe vários sites que hospedam gratuitamente, eu uso o imgur  que é super fácil e rápido, veja como hospeda-la nesse site.





Veja agora como ficará o código usando o link da minha imagem já hospedada e o link do site que desejo redireciona-lo, no caso o Mamães em Rede.

<div class="widget-content">
<marquee onmouseout="this.star()" direction="up" on scrollamount="3" with="400" height="200">
<div align="center">

<a href="www.mamaesemrede"_blank">
<img src="http://i.imgur.com/SL1E54z.jpg" border="0" alt="Image and video hosting by TinyPic" /></a>

<a href="www.mamaesemrede.com/"_blank">
<img src="http://i.imgur.com/ktQKkYj.jpg" border="0" alt="Image and video hosting by TinyPic" /></a>

<a href="www.maeparasempre.com
<img src="http://i.imgur.com/rPKKCYF.jpg" border="0" alt="Image and video hosting by TinyPic" /></a></div></marquee></div>

Depois de ter feito as mudanças necessárias, basta salvar o gadget e arrastá-lo para onde desejar que o banner rotativo fique.

Espero que gostem da dica e usem em seus blogs. Se tiver dúvidas, deixe nos comentários que responderei.


22 comentários:

  • Ana Carolina disse...

    O gadget é adicionado, mas, não aparece a imagem. :/ do blog parceiro, etc. Será que hospedei errado? Aparece apenas um icone que quando clico vai para o site desejado, mas, não aparece nenhuma imagem. o.O

Postar um comentário

Quando você comenta, também participa do Mamães em Rede! Comente, participe, pergunte. Obrigada!

 

©Copyright 2012 - Todos os Direitos Reservados - Mamães em Rede | Design By Arte Design