.

terça-feira

Banner Rotativo com Imagens para Blog

ACESSOS:
Deixe seu comentário

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