Banner rotativo de imagens - Novo modelo

Ter um banner rotativo de imagens em seu blog é uma forma interessante para você exibir mensagens para diversas finalidades. Você pode utilizá-lo para exibir imagens com links para seus artigos recentes, amostras do seu trabalho, banners de seus parceiros ou selos recebidos. Aprenda neste artigo como criar um banner rotativo de imagens com ótimo efeito visual e que funciona nas versões mais recentes de todos os navegadores.

 

Introdução

No artigo Banner Rotativo com Imagens - um dos mais lidos aqui no Gerenciando Blog - eu mostrei como utilizar o recurso do “marquee” para criar um banner de imagens deslizantes. Infelizmente, as versões mais atuais dos navegadores não suportam mais esse efeito, o que faz com que aquele modelo de banner não funcione corretamente em todos eles.

 

Recentemente, a Patrícia Chammas (uma ótima designer, cujo trabalho recomendo) solicitou-me o desenvolvimento de um gadget para exibir amostras do seu trabalho como design em seu blog, utilizando o efeito do banner rotativo. O resultado pode ser visto em seu blog, logo abaixo do cabeçalho e também na imagem abaixo. O efeito final ficou muito bom, e a Patrícia gentilmente permitiu que eu divulgasse o gadget aqui.

 

 

Características

O gadget utiliza o plugin Smooth Div Scroll, desenvolvido pelo sueco Thomas Kahn. Quem quiser obter mais detalhes, pode visitar o seu site. Este gadget oferece algumas características interessantes:

• Você pode definir o sentido do movimento horizontal (para a direita, para esquerda, indo e voltando).
• Há controles nas extremidades para que o visitante avance ou retorne as imagens.
• O avanço ou retorno também pode ser feito com o “scroll” do mouse.
• As imagens aparecem em movimento contínuo, sem um espaço em branco entre o final de uma sequência e o início da próxima.
• Você pode definir links para as imagens.

 

O código

O código para o gadget é mostrado abaixo:

<link rel="Stylesheet" type="text/css" href="http://gbscripts.webs.com/SmoothDivScroll-1.2/css/smoothDivScroll.css" />
<style type="text/css">
    #makeMeScrollable
    {    width:100%;
        height: 130px;         position: relative;    }
    #makeMeScrollable div.scrollableArea img
    {    position: relative;
        float: left;
        margin: 0;
        padding-right: 5px;}
</style>
<div id="makeMeScrollable">
    <a href="http://www.gerenciandoblog.com.br/2012/04/gadget-com-contadores-para-redes.html" target="_blank"><img src="http://lh3.ggpht.com/-H9DiPdpqcVM/T4nvkeps7LI/AAAAAAAAGUw/tGOelgScjTc/Gadget130_thumb%25255B3%25255D.jpg" height="130"border="0"/></a>
    <a href="http://www.gerenciandoblog.com.br/2012/04/crie-seu-site-em-html5-de-forma-facil.html" target="_blank"><img src="http://lh6.ggpht.com/-tV2cjsPZLII/T4YY4aXyqiI/AAAAAAAAGQ8/qyJ-C3n7Wlk/HTML5130_thumb%25255B3%25255D.jpg" height="130"border="0"/></a>
    <a href="http://www.gerenciandoblog.com.br/2012/04/aumentando-as-confirmacoes-de.html" target="_blank"><img src="http://lh5.ggpht.com/-eMiIPiCK-5A/T4JQfablZNI/AAAAAAAAGM8/TrGVWmckc3E/EmailFeedBurner130_thumb%25255B3%25255D.jpg" height="130"border="0"/></a>
    <a href="http://www.gerenciandoblog.com.br/2012/04/como-criar-um-blog-de-testes-no-blogger.html" target="_blank"><img src="http://lh6.ggpht.com/-vCkcKmczMjc/T3jluKvpWWI/AAAAAAAAGHs/r6qJxUmOkdg/BlogTestes130_thumb4.jpg" height="130"border="0"/></a>      <a href="http://www.gerenciandoblog.com.br/2012/04/seo-no-blogger-resumo.html" target="_blank"><img src="http://lh4.ggpht.com/-nN54TK8-res/T2vIuixu3GI/AAAAAAAAF3E/lqCcFLCgGGw/blogger130_thumb%25255B3%25255D.jpg" height="130"border="0"/></a>
     <a href="http://www.gerenciandoblog.com.br/2012/03/6-dicas-para-ganhar-dinheiro-com-o.html" target="_blank"><img src="http://lh5.ggpht.com/-cHi7ZyeMQHM/T2EyR_acAeI/AAAAAAAAFs4/VeyboISZprM/AdSense130_thumb4.jpg" height="130"border="0"/></a> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("div#makeMeScrollable").smoothDivScroll({
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"});});   
</script>

 

As partes em fonte na cor preta não devem ser modificadas. Abaixo estão as explicações para as partes destacadas em negrito colorido, que podem ser ajustadas:

 

Vermelho - Opções visuais

• height: 130px - Aqui deve ser definida a altura do gadget. Deve ser definida como sendo a mesma altura das imagens que você utilizará.
• padding-right: 5px - Esta é a distância entre as imagens do banner. Se você não quiser uma espaço em branco entre elas, deixe como 0 (zero).

 

Azul - Imagens e links

Aqui você deve colocar os códigos das imagens que você utilizará em seu banner. Cada imagem deve estar no seguinte formato:

<a href="LINK DO ENDEREÇO AO CLICAR NA IMAGEM" target="_blank">
<img src="ENDEREÇO DA IMAGEM" height="130"border="0"/></a>

O valor do “height” (altura) deve ser o mesmo definido no item anterior.

 

Roxo - Opções do gadget

Esta parte define as opções avançadas do gadget. Você pode controlar a direção que o banner terá (autoScrollingDirection), sua velocidade (autoScrollingStep), o comportamento do mouse (mousewheelScrolling) e outras.

 

Se você tem conhecimentos técnicos, pode verificar todas as opções disponíveis em http://www.smoothdivscroll.com/options.html.

 

A opção mais simples - Planilha Excel

Mais uma vez, para facilitar o trabalho de quem deseja publicar o gadget sem ter que gerar os códigos manualmente, criei uma planilha Excel que torna o processo mais simples. Abaixo está o link para download:
Baixar planilha GerenciandoBlog_BannerRotativo2.xls

Abaixo está uma imagem da planilha. Basta você preencher as informações das células em branco e seu código será automaticamente gerado na área destacada em vermelho.

 

Depois, é só copiar esse código e colá-lo em um gadget do tipo “HTML/JavaScript” em seu blog. Caso tenha dúvidas sobre como fazer isso, sugiro a leitura do artigo Como Adicionar Gadgets em seu Blog.

 

A planilha está protegida, mas todos os campos necessários para a configuração estão livres. Assim, não é necessária senha para trabalhar com ela.

 

Se você encontrar algum problema ou tiver sugestões sobre melhorias, basta deixar um comentário neste artigo.

 

Conclusão

Este gadget pode ser bastante útil em seu blog, especialmente para exibir uma grande quantidade de imagens sem ocupar muito espaço. Se você utilizá-lo com criatividade, ele se tornará uma ótima forma para chamar a atenção dos seus visitantes para os elementos exibidos.

 

Para terminar, deixo muito muito obrigado à Patrícia Chammas, por ter permitido compartilhar o resultado aqui no Gerenciando Blog.

 

 

E você, já tem ou pretende colocar um banner rotativo de imagens em seu blog? Gostou da planilha? Deixe um comentário!

Sobre o autor Adelson Smania está na internet desde o longínquo ano de 1997. Trabalha na área de Tecnologia de Informação há mais de 10 anos e escreve artigos para o Gerenciando Blog, com colaborações eventuais em outros sites e blogs.