Banner Rotativo com Imagens

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. O artigo é fruto de uma sugestão feita em meu Skribit pela Lucy, do Amor e Paz sem Fronteiras, a quem agradeço. Também deixo meu muito obrigado à Denize, do Blog da Comentarista que gentilmente cedeu-me o código HTML e outras sugestões que utilizei como base para o artigo.

 

Introdução

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 ou alternate. 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 em http://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.

 

ATUALIZAÇÃO 31/10/10: Caso você precise de efeitos mais elaborados, similares a um slideshow para seu blog, é necessário utilizar códigos JavaScript. Um bom artigo a respeito disso está no artigo Slideshow no Blogger, da sempre competente Juliana Sardinha. Vale a visita!