Caso a explicação acima não tenha sido suficiente para entender o que é um banner rotativo, abaixo está um exemplo, feito a partir de imagens de artigos aqui do Gerenciando Blog:
Algumas características do banner rotativo que criei:
- Neste exemplo, as imagens estão “deslizando” no sentido horizontal. Também é possível fazê-lo no sentido vertical.
- Ao passar o mouse sobre a figura, a animação pára. Ao retirá-lo, ela reinicia.
- Cada figura é um link para um artigo. Ao clicar nela, será aberta outra página com o artigo correspondente.
- Aqui, as imagens estão animadas num movimento de “vai e volta”. É possível também fazê-lo num sentido contínuo.
Onde utilizar o banner rotativo?
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. Pensando nisso, há algumas situações em que já é comum a utilização do banner rotativo. Algumas delas:
- Exibição de selos ou prêmios recebidos.
- Exibição de artigos do blog para os quais se quer chamar a atenção.
- Exibição de banners de parceria.
Particularmente, não gosto muito do último uso, o de exibição de banners de parceria. No banner rotativo, não são exibidas todas as imagens simultaneamente, o que pode fazer com que o visitante não veja todos os links de parceiros naquele momento. Por outro lado, um banner rotativo costuma chamar mais a atenção. Mas, isso fica a critério de cada um.
Como criar um banner rotativo?
Criar um banner rotativo é bem mais simples do que parece. A “mágica” é feita com a tag “marquee” do HTML, que possibilita a animação de textos ou imagens.
Por exemplo, o banner que mostrei acima, com os artigos do Gerenciando Blog, foi criado com o código abaixo:
<marquee direction=”left” scrollamount=”2″ width=”400″ height=”130″ behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>
<a href=”http://www.gerenciandoblog.com.br/2010/01/skribit-como-utiliza-lo-melhor.html” target=”_blank”>
<img
src=”http://lh4.ggpht.com/_XibsBbZTGuE/S2DrlUI20MI/AAAAAAAABzw/37WBMgd4CgE/Skribit200_thumb[4][1]_thumb.png”
title=”Skribit: Como Utilizá-lo Melhor”
height=”130″ width=”130″/>
</a><a href=”http://www.gerenciandoblog.com.br/2010/02/google-apps-e-mail-gratis-para-seu.html” target=”_blank”>
<img
src=”http://lh4.ggpht.com/_XibsBbZTGuE/S23jVFAqV6I/AAAAAAAAB2A/qvIK-ytVMeM/email_thumb3.jpg”
title=”Google Apps: E-mail Grátis para seu Domínio”
height=”130″ width=”130″/>
</a><a href=”http://www.gerenciandoblog.com.br/2010/02/1-ano-do-gerenciando-blog.html” target=”_blank”>
<img
src=”http://lh6.ggpht.com/_XibsBbZTGuE/S3bMqvp1AuI/AAAAAAAAB40/FTNXrTsmaoQ/aniversario_thumb.jpg”
title=”1 ano do Gerenciando Blog”
height=”130″ width=”130″/>
</a><a href=”http://www.gerenciandoblog.com.br/2010/02/tynt-insight-quem-esta-copiando-seus.html” target=”_blank”>
<img
src=”http://lh5.ggpht.com/_XibsBbZTGuE/S3ggXCOQH4I/AAAAAAAAB48/EDM7HHpukcA/Tynt200_thumb.jpg”
title=”Tynt Insight: Quem Está Copiando seus Artigos?”
height=”130″ width=”130″/>
</a><a href=”http://www.gerenciandoblog.com.br/2010/02/guest-post-no-gravata-solta.html” target=”_blank”>
<img
src=”http://lh5.ggpht.com/_XibsBbZTGuE/S3s668AmrYI/AAAAAAAAB68/dddkPA0KXGE/autor_thumb[3][1]_thumb[2][1]_thumb.jpg”
title=”Guest Post no Gravata Solta”
height=”130″ width=”130″/>
</a></marquee>
Ainda parece complicado? Vou então quebrar cada parte dele, destacada com cores diferentes, para mostrar que não é.
A primeira linha é a que inicia a animação e deve ser colocada apenas uma vez:
<marquee direction=”left” scrollamount=”2” width=”400” height=”130” behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>
Em negrito estão os itens que você pode alterar de acordo com sua necessidade:
- direction: direção em que a animação será feita. Os valores possíveis são left ou right(para banners horizontais, movimentando para a esquerda ou da direita) e up ou down(para banners verticais, movimentando para cima ou baixo).
- scrollamount: determina a velocidade da animação. Quanto maior o número, mais rápida a animação será.
- width: largura da área onde a animação aparecerá.
- height: altura da área onde a animação aparecerá.
- behavior: tipo da animação que será mostrada. Há 3 valores possíveis: scroll, slide oualternate. Abaixo eu mostro o efeito de cada uma.
Scroll
Slide (nesta opção, a animação ocorre apenas uma vez e para)
Alternate
Depois da linha com o “marquee”, são colocadas as imagens desejadas, com seu respectivo link, se for o caso. Deve existir uma instrução desta para cada imagem que fará parte do seu banner:
<a href=”http://www.gerenciandoblog.com.br” target=”_blank”>
<img src=”http://gerenciandoblog.webs.com/Gerenciando.gif”
title=”Gerenciando Blog”
height=”130” width=”130“/>
</a>
- href: endereço do link, se existir. Se não houver um link, esta linha inteira não é necessária. Também deve ser removida a última linha.
- src: endereço da imagem que será exibida.
- title: título que aparecerá ao parar o mouse sobre a imagem.
- height: altura da imagem. Só precisa ser colocada em banners horizontais e deve ser igual à altura do marquee.
- width: largura da imagem. Só precisa ser colocada em banners verticais e deve ser igual à largura do marquee.
OBS: Não é recomendado preencher as duas informações (height e width) ao mesmo tempo, pois as figuras podem perder sua proporção original e ficar distorcidas.
Ao final, é só colocar o fechamento da tag, uma única vez:
</marquee>
Há uma forma mais fácil?
Para facilitar a geração do código do banner rotativo, criei uma planilha em Excel que gera o HTML automaticamente a partir da digitação dos dados. Basta preencher as informações dos campos que estão em fundo branco e o código será gerado no campo com fundo amarelo.
Abaixo está uma imagem dela:
A planilha está disponível para download emhttp://gerenciandoblog.webs.com/BannerRotativo_GerenciandoBlog.xls e pode ser distribuída livremente. Caso haja alguma dúvida, problema ou sugestão para a planilha, é só enviar e-mail para adelson@gerenciandoblog.com.br.
Como colocar o banner em meu blog?
Esta é a parte mais simples: basta adicionar um gadget de “HTML/JavaScript” em seu blog e colar o código HTML gerado acima, seja manualmente ou através da planilha.
Conclusão
Agora, cabe a você avaliar se vale a pena colocar um banner rotativo em seu blog e onde utilizá-lo. Em caso de dúvidas, é só deixar um comentário.
