como criar Banner Rotativo com imagens

Neste Tutorial ensinarei a organizar os Banners de parceria de forma mais fácil, e que não ocupa muito espaço em seu Blog...

Bom pessoal, vamos agora criar o nosso banner rotativo
Veja o seguinte Exemplo de um banner rotativo, observe que o efeito esta em direção a direita, que eu mesmo coloquei, e você pode também escolher a direção desejada também...

















Primeiro:
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 em Clique em Adicionar um Gadget e escolha a opção HTML/JavaScripts, e cole o código lá em conteúdo.

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

<a href=" LINK DO SITE AQUI " target="_blank"> 
<img 
src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png " 
title="TITULO"
height="80" width="200"/>
</a>

<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png" 
title=" TITULO " 
height="80" width="200"/> 
</a>

<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png" 
title="  TITULO  " 
height="80" width="200" /> 
</a>

<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png" 
title="  TITULO  " 
height="80" width="200" /> 
</a>

<a href="LINK DO SITE AQUI" target="_blank">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png" 
title="  TITULO  " 
height="80" width="200" > 
</a>

</marquee>

Segundo:
Vamos agora pra a alteração do código
com forme o destacado, essa parte em vermelho é a onde fica os efeitos:

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

Altere o efeito:

Direção

em direction você alterará a direção em que o banner será movimentado, para cima: up ,  para Baixo: down , para esquerda:  left ou para Direita: right

nesses seguintes valores você colocará entre aspas direction="left"

Velocidade:

em scrollamount você altera aquele valor que estar perto dele, pois aquele valor significa a velocidade, quanto maior o numero mais rápido ficará.

Altere tamanho onde a animação do banner ficará:

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

behavior : significa o tipo de animação que será mostrada, tem três tipos de valore que você pode usar, e são:

• Scroll a rotação dele passa direto

• Slide a e o slide ele só se movimenta uma vez e depois para

• Alternate a fica alternando de um lado pra outro, ou seja, indo de um lado pra outro

Agora em relação a parte que eu destaquei em Azul, é a parque em que ficará o Banner

<a href=" LINK DO SITE AQUI " target="_blank"> 

<img 

src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png " 

title="TITULO"
height="80" width="200"/>
</a>

Essa segunda parte destacada, você vai ajustar a imagem, em  href=" LINK DO SITE AQUI "  que você vai colocar o link do site: 

E  src=" Você vai colocar a URL da sua imagem, vaia trocar pela sua URL:

src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWethrPlTO93PJwdcuUOcv2VczwjxF-1_U_bFCpgbGDZC7-_h66aBNEYmHx6Ko5HzNygvD3offDsvfHPSnuEO5X6y2mO-vJoxE_qHG3GNAERHj-atuohGHjOGWSc-0lqZbbWfxX8qAkWc/s1600/uyygf.png " 

Agora aqui você vai alterar o titulo da imagem, pra quando passar o mouse sobre a imagem aparecerá o titulo que você dará a imagem.

em:  title="TITULO"  em Anuncie: Clique aqui você colocara o seu titulo.

Você pode também ajustar a imagem de acordo com o tamanho que fique adequado com o seu site:

height="80" o valor representa a altura, é só você alterar o número 80

width="200" o valor representa a largura, é só substituir  o número 200

Pronto pessoal é só isto, espero ter lhe ajudado. queria pedir que comentem sobre essa dica
e também participem seguindo o meu Blog. Obrigado