Esqueceu
da criança
CURSO COMPLETO ONLINE
CRIE SEUS PRÓPRIOS DESENHOS ANIMADOS
Barata Tonta
Links da Semana
Bizolhando pela NET, encontrei sites
Um melhor do que o outro - (+18)

Banner Rotativo com Imagens para Blog


Neste artigo, mostrarei como criar um banner rotativo de imagens, onde você pode colocar imagens ou textos que deslizam automaticamente pela tela, ocupando pequeno espaço em seu blog. Normalmente, esse tipo de banner é utilizado para exibir selos recebidos, artigos de seu blog ou outras imagens desejadas.





                                                                 

A vantagem do banner rotativo é de poder utilizar uma área relativamente pequena para mostrar um grande número de imagens que, da forma tradicional, ocupariam grande espaço na tela.

Veja um exemplo do código abaixo:









Esse código a baixo será o nosso banner rotativo, e vou destacar o código aí pra você entender melhor. Agora copie esse código e em seguida no painel do seu Blog clique em Design depois clique em Adicionar um Gadget e escolha a opção HTML/JavaScripts, e cole o código a seguir lá em conteúdo:

<marquee direction="left" scrollamount="2" width="500" height="130" behavior="Scroll" onmouseover="this.stop()" onmouseout="this.start()">


<a href="LINK DO SITE AQUI" target="_blank"> 
<img 
src="http://i.imgur.com/ZnKIF.gif
title="TITULO"
height="80" width="200"/>
</a>


<a href="LINK DO SITE AQUI" target="_blank">
<img
src="
http://i.imgur.com/ZnKIF.gif
title="TITULO
height="80" width="200"/> 
</a>

<a href="LINK DO SITE AQUI" target="_blank">
<img
src="
http://i.imgur.com/ZnKIF.gif
title="TITULO
height="80" width="200" /> 
</a>

<a href="LINK DO SITE AQUI" target="_blank">
<img
src="
http://i.imgur.com/ZnKIF.gif
title="TITULO
height="80" width="200" /> 
</a>

<a href="LINK DO SITE AQUI" target="_blank">
<img
src="
http://i.imgur.com/ZnKIF.gif
title="TITULO
height="80" width="200" 
</a>
</marquee>



Se quiser usar este código e colocar um banner é simples, basta colocar o seguinte código:


<marquee direction="left" scrollamount="2" width="500" height="130" behavior="Scroll" onmouseover="this.stop()" onmouseout="this.start()"> 
Aqui você vai colar o código do seu anúncio 
</marquee>

E você terá o seguinte efeito:





Cursos 24 Horas

Cursos Online


Em direction você alterará a direção em que o banner será movimentado:

Para cima: up
Para Baixo: down
Para esquerda: left
Para Direita: right

Em width="400" : altere a largura de onde ficará aparecendo a animação; Em height="130" a altura de onde ficará aparecendo a animação.



Cursos 24 Horas

Cursos Online
Banner Rotativo com Imagens para Blog Banner Rotativo com Imagens para Blog Reviewed by Muca on 8/27/2013 11:35:00 AM Rating: 5