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.

                                                                 Seguir @DicashotBlogger

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:

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.