192207784316955
Loading...

Banner Rotativo com Imagens

Rotativo200Neste 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

OBS: No artigo Banner rotativo de imagens - Novo modelo, escrito recentemente, mostrou outra forma para você criar seu banner rotativo, com mais recursos do que esta e que funciona em todos os navegadores.

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:
BannerPlanilha

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 24/04/12: 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 é o Banner rotativo de imagens - Novo modelo.

layout 7846197294137874002

Postar um comentário Comentários no Blogger

  1. Olá Adelson, meu querido!!!!

    Poxa vida, infinitamente obrigada por tudo!
    Por citar meu nome e o blog, por escrever este artigo que há tempos estava procurando e ainda não havia encontrado algo que funcionasse direito em meu blog, e pelo teu trabalho de pesquisa e elaboração deste artigo tão completo como até hoje nunca vi em nem um outro blog!

    Parabéns meu querido! Você é dez!!!!
    É por isto que teu blog é um sucesso, porque além do conhecimento técnico, você é humilde e humano, acima de tudo.

    Muito obrigada de coração, fiquei encantada com tamanha riqueza de detalhes e imagino o tempo que levou para elaborar este artigo.

    Teu banner já está lá com todo gosto em meu blog!
    E sim, adorei pois não tinha pensando neste aspecto com relação aos parceiros.
    Mas com certeza vou usar isso para os selos do blog e outras idéias que já me vieram a cabeça rsrs.

    mais uma vez, muito obrigada meu querido!
    Tenho absoluta certeza de que irá ajudar muita gente este post.

    Muita Paz, Luz, Bençãos e sucesso a ti!
    Beijos em teu coração, direto do meu!

    Lucy

    ResponderExcluir
  2. Parabens pelo tutorial. Bem escrito, como vários outros do blog. Acho legal esses banners rotativos, até pretendo coloca-los em meu blog, mas atualmente não consigo achar um espaço viável no meu layout (sou péssimo em design).

    ResponderExcluir
  3. Olha.... Parabéns mesmo !
    Vou testar estas dicas em um de meus artigos.
    Se funcionar (e acho que vai! rsrs), vou introduzir este recurso mais vezes, pois achei fantástico.
    Eu não sou desenvolvedor e não tenho muito conhecimento de HTML (só o básico pra me virar rsrs).
    Mas a sua didática me esclareceu muita coisa.
    Eu só tenho uma dúvida bem primária: As imagens que eu criar ou baixar em ".gif" deverão ser instaladas na minha conta dentro do servidor via programa de FTP para que eu indique o caminho no link?
    É bem básico, mas realmente ainda tenho este tipo de dúvida e às vezes deixo de fazer algumas coisas por causa disso.
    Se puder me responder eu agradeço muito.
    Vou repassar este excelente artigo para a minha comunidade no Twitter e indicar para os meus amigos no Dihitt.
    Se você tiver uma conta no twitter e quiser conferir a indicação é so me visitar em : http://twitter.com/fernandolessarj.
    Gosto de promover artigos de outros Blogueiros e manter a minha comunidade sempre abastecida com conteudo de qualidade.
    Acho que isto cria uma sinergia saudável tanto com os Blogueiros quanto com a comunidade.
    Um forte Abraço.

    ResponderExcluir
  4. @Lucy: Eu é que lhe agradeço pela sugestão do artigo! Espero que ele lhe seja bastante útil e que o banner surta um bom efeito em seu blog. Precisando de ajuda, é só me dizer!

    @Blogueigoo: Obrigado pelos elogios! Também confesso que design não é minha área forte! Mas, você conseguirá encontrar um espaço, com certeza.

    @Fernando: Com relação às imagens, há algumas opções:
    1. Você pode apenas indicar o link de outros lugares em que elas já existam (isso é normalmente feito com selos ou banners de parceiros).
    2. Você pode colocá-las em um servidor seu, caso possua conta com hospedagem, via FTP ou outro recurso.
    3. E pode ainda hospedá-las em um serviço gratuito, que é o que costumo fazer. Para essa última opção, recomendo a leitura do artigo Webs, ótimo site para hospedar seus arquivos, que fala sobre o serviço que utilizo.
    E obrigado por divulgar o artigo! Para mim, isso é muito importante.

    Abraço a todos vocês e obrigado pela visita!

    ResponderExcluir
  5. Olá Adelson,

    Mais uma dica maravilhosa! Já havia procurado esse código no "grande oráculo", mas não havia encontrado. Parabéns por disponibilizá-lo, principalmente em forma de planilha, que é realmente uma mão na roda!

    Na época que procurei pelo código pensava em o utilizar para exibir os parceiros do blog. Porém, como você mesmo disse, o problema é que nem todos ficam visíveis. Estou pensando numa forma de melhorar essa visualização no meu blog, de modo a reduzir o tempo de carregamento do blog devido ao grande número de imagens.

    Grande abraço.

    ResponderExcluir
  6. Adelson mais um artigo com sua assinatua bem explicado e completo.Irei testar como irá ficar em meu blog, mais primeiro vou esperar pelo termino da construção do meu blog, pra ir tirando algumas coisas desnecessárias.

    Valeu

    ResponderExcluir
  7. @Iúri: Que bom que tenha gostado do artigo! Quanto à planilha, o Excel é um grande aliado para gerenciar meus blogs, especialmente para gerar HTMLs. Uso planilha para controlar meu índice e a tabela de parceiros, por exemplo. Um dia ainda escreverei sobre isso!

    @Concentrado: Espero que goste do resultado em seu blog!

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  8. Olá Adelson!
    É impressionante como consegue fazer as coisas de maneira tão bem explicada! Fez até um gerador de código no excel!
    Nossa! Você merece mesmo toda a reputação que tem na blogosfera e mais um pouco!!
    Um abraço!

    ResponderExcluir
  9. Fala não Sandra...uma pessoa me cobrou R$1.300,00 para "fazer" um blog e nada...(pessoa q se diz do meio de construçao de sites)
    E me matou de raiva.Tem muita gente desonesta por aí.
    Quando encontrei o blog do Adelson,foi a salvação!Ele é o anjo da informática!

    ResponderExcluir
  10. Seu blog é o melhor do gênero! Parabéns!

    ResponderExcluir
  11. @Sandra: Obrigado pelos elogios! Como eu disse acima ao Iúri, para mim o Excel é uma ferramenta poderíssima e gosto de utilizá-lo em tarefas como esta.

    @Jaqueline: Obrigado pelo novo título de "anjo da informática"! risos Faço mesmo questão de ajudar na medida do possível, embora no seu caso eu tenha apenas direcionado suas ações, já que grande parte do trabalho foi você mesma que fez.

    @Adriano: Obrigado pelo elogio! Espero que consiga sempre encontrar aqui o que você procura.

    Abraço a todos vocês e obrigado pela visita!

    ResponderExcluir
  12. Impressionante mesmo Parabens.

    Buzzed it

    !!!

    Continue assim!

    ResponderExcluir
  13. Adelson amigo, mas como ficou completa esta postagem!(Como sempre, aliás) Você sabe que eu uso o banner rotativo nos meus blogs, mas não fazia idéia para que servia cada ítem do código. Vou fazer alguns ajustes nos meus, com as informações que você forneceu aqui.

    E a planilha Excel foi uma excelente idéia. Você sempre lembra de quem está começando...

    Você explica as coisas maravilhosamente bem, de uma forma que qualquer pessoa entende. Isso é um dom.

    E obrigada por citar meu Blog. Você não sabia, mas fez esta postagem no dia do meu aniversário. Considero um presente...

    Bjs

    Denize

    ResponderExcluir
  14. Maravilha! São dicas interessantes e de grande utilidade.

    ResponderExcluir
  15. @Denize: Que bom que o artigo lhe tenha sido útil! Afinal, você foi quem me incentivou para escrevê-lo. E eu não sabia que era seu aniversário! Mas, pode considerá-lo mesmo o seu presente. :-)

    @João: Que bom que tenha gostado!

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  16. Queria tanto aprender e não sabia como fazer!!
    Valeu obrigadaaaa

    ResponderExcluir
  17. Obrigaaaaaaaaaaaaaadaaaaaaaaaaaaaa!
    Nossa, estava louca para fazer estes banners rotativos, mas não conseguia explicações fáceis e rápidas, pois sou iniciante nessa história de blog...
    E essa planilha então? Tudo de bom! Amo coisas assim, que vc joga os dados e a coisa sai pronta!
    Mais uma vez obrigada pelo post!
    Bjim e tudibão pra vc!

    ResponderExcluir
  18. @Sandra: Que bom que o artigo tenha sido útil!

    @Vany: A planilha deu um trabalho enorme para fazer! Então, fico muito feliz que você tenha gostado dela! Torço para que seja muito útil!

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  19. olâ bem legal :D
    ja estou divulgando nos meu blog me ajude adivulgar o meu tbm vamos fazer parceria. vlw abç

    ResponderExcluir
  20. Olá!

    Para tornar-se parceiro do Gerenciando Blog é necessário seguir as regras que estão na Política de parcerias.

    Um abraço!

    ResponderExcluir
  21. parabéns!!
    Muito legal adorei!
    Abraços!
    Carmen.

    ResponderExcluir
  22. Olá, Carmen!

    Que bom que tenha gostado! Espero que as dicas lhe sejam úteis.

    Um abraço!

    ResponderExcluir
  23. Olá, Jorge!

    Que ótimo que tenha gostado da proposta do Gerenciando Blog! Meu principal objetivo aqui é realmente compartilhar o que aprendo com meus blogs.

    Com relação à sua dúvida, ainda não a entendi bem. Você está com dificuldades para encontrar figuras, ou apenas não sabe como obter o endereço delas?

    E agradeço sua disposição com relação ao Publisher! Precisando, entrarei em contato.

    Um abraço!

    ResponderExcluir
  24. Adelson, funfou legal o código, mas tenho uma dúvida, depois do 4° banner adicionado ele começa a brir outra coluna e fica tipo uma fila dupla exibindo os banners... existe uma forma disso ficar em fila unica?

    ResponderExcluir
  25. Olá, Márcio!

    Esse problema não deveria acontecer. Eu fiz alguns testes com diversas figuras e não vi esse problema acontecer.

    Por favor: envie o código que você está tendo problemas para adelson@gerenciandoblog.com.br e eu vejo o que está acontecendo.

    Um abraço!

    ResponderExcluir
  26. Parabéns mais uma vez!! Você sempre me salvando!!
    abraço! fico perfeito meu banner rotativo! o Seu Blog é limpo,sem armadilha, linguagem clara, muito bom, não, é ótimo!

    ResponderExcluir
  27. Olá, Amélia!

    Fico muito feliz que seu banner tenha dado certo! E muito obrigado pelos elogios. Seja sempre bem vinda aqui.

    Um abraço!

    ResponderExcluir
  28. Adelson, vc me pediu o código do meu banner rotativo, eu enviei mas vc ainda não respondeu... Abração

    ResponderExcluir
  29. Olá, Márcio!

    Desculpe, mas não recebi seu e-mail. Favor enviá-lo novamente.

    Um abraço!

    ResponderExcluir
  30. Boa noite Adelson, fiz o banner a tarde funcionou com 3 logos, e a noite so o primeiro da lista que aparece, o que pode estar ocorrendo?

    http://www.oamordedeusvive.com.br

    ResponderExcluir
  31. Olá, João e Simone!

    Pelo que estou vendo no blog de vocês, o banner rotativo parece estar funcionando corretamente. Há ainda algum erro nele?

    Um abraço!

    ResponderExcluir
  32. Puxa!!! Descobrir o seu blog era tudo o que eu precisava..comecei um blog por acaso..e agora..quero sempre estar melhorando a sua aparência..etc..mas sou leiga no assunto...até coloquei uns slides mas ñ era ainda o que queria...na sua explicação do banner rotativo optei pela função mais fácil..rsrs..a planilha porém ao postá-la as imagens ñ aparecem..somente um pequeno quadrado com um X dentro..o que posso ter feito de errado..pode de auxiliar...

    Grata
    Marcia
    marciaprios.blogspot.com

    ResponderExcluir
  33. Ops..esqueci de perguntar..fiz algumas postagem onde foram feito comentários..há uma maneira de excluir a postagem sem perder os comentários.

    Grata
    Marcia

    ResponderExcluir
  34. Olá, Marcia!

    Que bom que tenha chegado ao Gerenciando Blog! Espero que os artigos a ajudem em seu trabalho.

    Vamos às suas respostas:
    1. O X indica que a imagem não está sendo encontrada no endereço que você informou. Uma dúvida: você está informando o endereço em seu computador (por exemplo, C:\Imagens\Figura.jpg) ou na internet (http://exemplo.com/Figura.jpg)? O correto é a segunda opção. Se ainda tiver dúvidas, envie para adelson@gerenciandoblog.com.br sua planilha preenchida e a ajudarei com prazer.

    2. Infelizmente, não é possível fazer o que você quer. Os comentários fazem parte da mensagem. Se você apagá-la, os comentários também sumirão.

    Um abraço!

    ResponderExcluir
  35. Não sei se minha mensagem anterior foi enviada...PC anda meio maluco...rsrs...de qualquer maneira agradeço muito por vc estar auxiliando a nos iniciantes (leigos) e vou aceitar a sua sugestão e enviar a minha planilha por e-mail..

    Mais uma vez grata pela atenção..

    Marcia

    ResponderExcluir
  36. Olá Adelson!

    Sensacional, há tempos estava procurando algo parecido para otimizar o espaço do meu blog.
    Vou ver se consigo instalar!

    Parabéns!!!

    ResponderExcluir
  37. Olá, Wellington!

    Espero que o banner rotativo seja útil para você! para quem mostrar muitas imagens, mas possui pouco espaço, é uma solução realmente interessante.

    Um abraço!

    ResponderExcluir
  38. Muito obrigado pela idéia!
    O final do meu blog estava com um verdadeiro quadro de banners, imagine banners de 120X60 em 4 colunas!!! Estava tomando muito espaço até que encontrei como diminuir o espaço e mostrar todos os banners.
    Valeu pela dica, muito útil e me fez tomar menos espaço, obrigado!

    ResponderExcluir
  39. Olá, Genilda!

    Os banners rotativos são mesmo uma ótima forma para economizar espaço no blog.

    Bom saber que a dica a tenha ajudado!

    Um abraço e obrigado pela visita!

    ResponderExcluir
  40. Olá Adelson Smania, Obrigado pelo o seu ótimo banner e bem explicado e espero que vc viva muitos anos e com muita saúde para postar mais banner para gente, um forte abraço de Erikson

    ResponderExcluir
  41. Olá, Erikson!

    Obrigado pelos desejos! E fico feliz que tenha gostado do artigo.

    Um abraço e obrigado pela visita!

    ResponderExcluir
  42. Meu amigo Adelson, quanto tempo é aduração deste planilha em Excel que o amigo fez ? é pra sempre ? ótimo trabalho

    ResponderExcluir
  43. Olá!

    Que bom que tenha gostado da planilha! Foi a forma que encontrei para facilitar o trabalho de quem quer colocar o banner rotativo em seu blog.

    A planilha não tem limitação de uso! Você poderá utilizá-la por quanto tempo quiser.

    Um abraço!

    ResponderExcluir
  44. Meu amigo Adelson, qual é o melhor programa para fazer benner com botoes de menu e com caixa de pesquisa no mesmo banner ? eu uso um programa aqui em FLASH só que ele não tem opção de colocar caixa de pesquisa o nome do programa é IncrediFlash XTreme 2.0 eu espero o amigo mim responder qual é o melhor programa para fazer banner animados com caixa de pesquisa Agradece Erikson

    ResponderExcluir
  45. A pior coisa do mundo é quando a gente fica pensando em alguma coisa e não consegue fazer, mas a melhor do mundo é quando a gente encontra o que estava pensando...

    Obrigado! Só tenho a agradecer.. Já virei seguidor.

    ResponderExcluir
  46. @Erikson: Confesso que essa não é a minha praia. Pesquisando no Google, até encontrei alguns editores de Flash, mas não sei dizer qual deles seria o melhor. Um gratuito que parece ser interessante é este: http://www.sothink.com/product/swfquicker.

    @Michel: Que ótimo que tenha encontrado aqui o que você procurava! Espero que continue encontrando artigos interessantes.

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  47. Boa noite Adelson.
    Primeiramente obrigado por compartilhar seus conhecimentos com todos nós.
    Estou com uma dúvida. Usei o Gerenciador de banner, mas as imagens do banner ficam todas emendadas uma com as outras nos navegadores: Firefox e Chrome; e só fica normal no Explorer.
    Desde já agradeço sua cooperação e obrigado pelo GERENCIANDO BLOG.

    ResponderExcluir
  48. Olá, Michel!

    Eu respondi esta pergunta detalhadamente em seu e-mail. Em resumo, o que precisa ser feito é adicionar a tag de margens na figura para que ela mantenha uma área vazia ao seu redor.

    Um abraço e conte comigo para o que eu puder ajudá-lo!

    ResponderExcluir
  49. Eu fiz aqui e ficou bom.Muito obrigado pelo tutotial.
    Mas tem um problema....
    Como eu retiro a borda da imagem?
    Aqui a imagem ficou com uma borda azul e com o fundo branco,sendo que a mesma esta no formato ".png" e o fundo é transparente.
    O que eu faço?
    E-mail:Italomaciel@ymail.com

    ResponderExcluir
  50. Olá, Italo!

    No exemplo que dei, não há margens nas imagens. Assim, acredito que a margem esteja nas figuras que você está utilizando. Um solução para remover as bordas é editar as figuras e retirá-las.

    Isso é possível?

    Um abraço!

    ResponderExcluir
  51. Script interessante...
    Muitas pessoas usam isso para exibir anúncios ou novidades no site!
    Pode ajudar muita gente.

    ResponderExcluir
  52. Olá!

    O banner rotativo é algo simples e que, talvez por isso mesmo, atraia tantos interessados. Realmente, o artigo teve boa repercussão.

    Um abraço!

    ResponderExcluir
  53. Muito bom o tutorial porém como faço
    para deixar o " title" aparecendo em baixo das imagens?Aparecendo a imagem e em baixo o nome

    ResponderExcluir
  54. Olá!

    Se o banner for deslizar no sentido vertical, é simples: basta colocar o título desejado antes do colchete que abre o /a.

    Se ele deslizar na horizontal, é um pouco mais complicado.

    Como não é possível postar o código completo aqui no comentário, escreva para adelson@gerenciandoblog.com.br se ainda tiver dúvidas.

    Um abraço!

    ResponderExcluir
  55. Parabéns pelo tutorial.
    A muito vinha procurando por tal,
    e só o teu blog me ofereçeu tal explicação.
    Estou utlizando.
    Boa sorte com o blog.
    Beijos ♥

    ResponderExcluir
  56. Olá, Monaliza!

    Que ótimo que tenha funcionado!

    Um abraço e obrigado por sua visita.

    ResponderExcluir
  57. Parabéns pela matéria. TEm didática e conhecimento. Coisa rara hoje. Gostaria de saber se vc possui algum script pronto, para inserirmos no blog ou site aquelas notícias que ficam rotacionando, quadro a quadro, e normalmente possuem numeração abaixo ou lateral, com setas que permitem o internauta voltar ou prosseguir nos quadros de notícia. Aguardo resposta. Fica com Deus! atendimento@gold-ip.com.br

    ResponderExcluir
  58. Complementando a postagem anterior, igual do msn por exemplo no portal de notícias - http://br.msn.com/

    ResponderExcluir
  59. Outra questão....existe a possibilidade de em vez de rotacionar verticalmente ou horizontalmente, os banners se atualizarem de tempo em tempos sem rotacionar e sim aparecendo de tempos em tempos, cada um de uma vez? valeu! atendimento@gold-ip.com.br

    ResponderExcluir
  60. Olá, Alexandre!

    O recurso que mostrei utiliza somente código HTML, por isso é bastante limitado.

    Para fazer o que você quer, é realmente necessário um JavaScript. Você pode conseguir algo parecido utilizando o LightBox. Veja em http://www.leandroricardo.com/2008/10/lightbox-no-blogger-lbum-de-fotos.html um tutorial sobre como colocá-lo no Blogger.

    Um abraço!

    ResponderExcluir
  61. Olá,

    A tempos vinha tentando utilizar esse tipo de codigo nas minhas páginas, mas sempre que tentava esbarrava no entedimento das tags que não eram explicadas a contento. Mas agora conforme vc fez, o entendimento ficou muito fácil. Obrigado pelo excelente trabalho.

    ResponderExcluir
  62. Olá, Milton!

    Obrigado pelos elogios! Fico feliz que lhe tenha sido útil.

    Um abraço e obrigado por sua visita!

    ResponderExcluir
  63. Parabéns Muito Bom, Só tenho uma Duvida, como fazer isso somente com frases? Frase que ficam em movimento Scroll! Como devo Fazer?

    ResponderExcluir
  64. Oie Meu Nove e Ericson e Queria saber se isso funciona para orkut? Por que O Orkut Agora aceita Codigos HTML, e se é possivel fazer só Scroll com Uma pequena frase para orkut..., Se não for possivel Tem algum tipo de Scroll para orkut que fica passando Horizontalmente? Pq ja vi uam vez e queria saber como que se Faz!
    Obrigado Des de Já!

    ResponderExcluir
  65. Olá Fiz um banner para o meu blog, ficou muito bom, porém o código HTML ficou largo demais, tive que recuar o local de postagem, ou tenho a opção de colocá-lo na área do título, mas prejudica a estética do blog. então preferi colocar ao lado, mas está com este problema. Tem como diminuir a área do código? Está me incomodando.

    Muito obrigada pela atenção.

    ResponderExcluir
  66. @Ericson: Também é possível fazer o mesmo banner rotativo apenas com frases. É bem mais simples: basta colocar a frase desejada entre as linhas que contém o "marquee", sem as tags que identificam as imagens. Se tiver dúvidas, escreva para adelson@gerenciandoblog.com.br e eu envio um exemplo para você. Mas, testei isso no Orkut e não funcionou.

    @Dani: O banner a que você se refere eu tratei em outro artigo (http://www.gerenciandoblog.com.br/2009/07/criando-um-banner-para-o-seu-site.html). É possível sim diminuir a área de código: basta diminuir o valor do "width" dentro da tag "textarea".

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  67. Perfeito!!!
    Coloquei a animação no meu blog e o numero de visitas triplicou.
    Muito Obrigado!

    ResponderExcluir
  68. Olá, Tom!

    Que bom saber que o Zone Edit funcionou corretamente para você.

    Quanto ao Google Sites, pesquisei a ferramenta e não encontrei uma forma de importar ou colocar arquivos HTML dentro dele. Parece que ele só aceita mesmo que você crie suas páginas pelo próprio Google Sites, e não em HTML puro.

    Um abraço!

    ResponderExcluir
  69. Olá, Tudo Joia!
    Primeiramente Parabéns pelo tuto.
    Não estou conseguindo fazer funcionar corretamente no internet explorer as imagens chegam até o limite da area determinada e bate e volta não mostrando as imagens que estão atras.
    Gostaria de saber se tem que modificar algo ou colocar algum codigo na pagina. Abraços!

    ResponderExcluir
  70. Olá!

    O comportamento que você cita é estranho. No exemplo que dei no início do artigo há um caso bem parecido com o seu, mas funcionando corretamente.

    Se quiser, envie-me o código que você gerou para adelson@gerenciandoblog.com.br e eu o analisarei para você.

    Um abraço!

    ResponderExcluir
  71. Olá Adelson. Coloquei o banner rotativo em meu site, mas notei que em outros computadores a animação nem roda. Principalmente no Explorer. Saberia me dizer algo do tipo? Desde já agradeço pela sua atenção.

    ResponderExcluir
  72. Consegui funcionar aki. Para resolver o problema das imagens baterem no canto e voltar, descobri que quando escrevemos alguma coisa antes das imagens - um texto mesmo, as imagens que batiam e voltavam já não fazem mais isso, elas rolam normalmente rsrsrs. Mas agora queria saber como retiro o espaço em branco que fica quando aparece a última imagem para voltar na 1º de novo. Pelo que pesquisei, acho que nessa tag Marquee não é possível isso, mas alguém sabe algo a respeito?

    Falowww

    Lohana

    ResponderExcluir
  73. Ah! Lembrando que o problema do espaço em branco acontece quando usamos o Scroll.

    ResponderExcluir
  74. @Maicon: Informe o endereço de seu blog em meu e-mail (adelson@gerenciandoblog.com.br) para eu poder ajudá-lo.

    @Iohana: Pelo que sei, isso realmente não é possível de ser feito com a tag marquee. Ela é bem simples e só fornece as funcionalidades que citei no artigo.

    Um abraço!

    ResponderExcluir
  75. Adelson, não vou "chover no molhado", mas tive que endossar o que todos acima disseram e deixar aqui meus sinceros agradecimentos.

    Só uma coisa ainda não está perfeita: Como faço para as imagens darem uma "paradinha" entre uma rotação e outra... tem como?

    Digo, passa uma imagem, para 3 segundos, passa outra, para 3 segundos e por aí vai... é possível?!

    Obrigada!

    ResponderExcluir
  76. Olá!

    Obrigado pelos elogios!

    Quanto à sua dúvida, isso não é possível ser feito com este recurso. O marquee é bem limitado e não consegue fazer o que você deseja.

    Um abraço!

    ResponderExcluir
  77. Olá Adelson Primeiro parabens pelo belo poste, mas sinceramente passei um dia inteiro e não consegui colocar no meu site webnode, no lugar do foto ficava apenas um risquinho se movimentando, se tiver uma solução me ajude por favor, desde já agradeço.
    Denis Araújo

    ResponderExcluir
  78. Olá, Denis!

    Acredito que haja algum erro em seu código.

    Para testar, acabo de criar uma página no WebNode (http://gerenciandoblog.webnode.com.br) e coloquei nela o mesmo banner rotativo de exemplo que mostrei neste artigo. Veja que ele está funcionando corretamente.

    Você pode fazer o mesmo teste em sua página: copie o código de exemplo e cole-o em um novo widget.

    Um abraço!

    ResponderExcluir
  79. Boa tarde!
    É possível fazer c/ que a transição entre um banner e outro seja rápida(por exemplo 1s) e a permanância de cada um deles no espaço definido seja maior(por exemplo 5s)?
    Att

    ResponderExcluir
  80. Olá!

    Não é possível fazer isso com o marquee. Para isso, você precisará de um código JavaScript específico.

    Um abraço!

    ResponderExcluir
  81. Olá,

    Como faço um banner slide?

    Obrigado!

    ResponderExcluir
  82. Olá, Akaio?

    O que exatamente você chama de "banner slide"? Com o marquee é possível apenas fazer o efeito "slide" ("deslizamento"), em que a animação é feita uma única vez.

    Um abraço!

    ResponderExcluir
  83. Olá.
    Parabéns pelo código.
    Coloquei o Código em meu site igualzinho esta aqui. Mas no IE só passa o banner 1 e 2 não passa os outro banners. No firefox e no Crome fica normal.
    Você sabe o q acontece????????

    ResponderExcluir
  84. Olá Adelson,

    Muito bem explicado..
    Mais ainda tenho uma dúvida.. O fundo do meu blog é preto e nos exemplos aqui mostrados, os fundos são branco..
    Como altero? ou ele já pega o fundo automatico?

    ResponderExcluir
  85. @Bruno: Estranho esse comportamento diferente no IE. Qual o endereço do seu blog para eu verificar como ficou?

    @Eduardo: Quando você não define uma cor de fundo, valerá a cor do fundo do seu blog. Mas, você pode adicionar um atributo bgcolor para definir essa cor. Veja exemplos em http://www.hscripts.com/tutorials/html/marquee1.php.

    Um abraço!

    ResponderExcluir
  86. não funcionou no0 meu blog, ele esta travando a imagem e a m,esma não desliza

    ResponderExcluir
  87. Olá, Glabio!

    Estive realizando alguns testes e percebi que o marquee está realmente apresentando problemas n Internet Explorer. No Chrome e no FireFox, seu código funciona sem problemas.

    Qual é o navegador que você está utilizando? Tentarei encontrar mais detalhes sobre o problema e como resolvê-lo.

    Um abraço!

    ResponderExcluir
  88. Olá Olá, primeiramente meu parabéns..
    gostaria de colocar algo parecido com isso no meu blog wordpress e já tinha testado vários plugins sem sucesso algum.. o código tá funcionando blezinha, e a idéia da planilha entao? maravilhosa =D

    só uma coisa se n for pedir muito depois de toda sua ajuda, seria possivel fazer com q a rotação nao acabasse? pq passa todas as imagens de uma vez, vem um espaço em branco e começa novamente.. eu gostaria de evitar esse espaço em branco e deixar as imagens ininterruptamente.. seria possivel?

    desde já gratíssimo :D

    ResponderExcluir
  89. Olá, Santiago!

    Obrigado pelos elogios!

    Mas, infelizmente, não é possível fazer o que você deseja com o marquee. Ele sempre mostra mesmo o espaço em branco antes de reiniciar a nova animação.

    Um abraço e obrigado por sua visita!

    ResponderExcluir
  90. Nossa muito bom...tutorial , infelismente eu não consegui que a imagem ficasse passando, mais mesmo assim muito Obrigado...

    ResponderExcluir
  91. Olá, Maah!

    Que estranho não ter funcionado corretamente. Se precisar de ajuda, me escreva (adelson@gerenciandoblog.com.br).

    Um abraço!

    ResponderExcluir
  92. opa e ai meu querido, cara foi a melhor explicação que ja vi sobre o assunto, gostei mesmo... mas venho correndo atras de uma informação que nao consigo encontrar, talvez vc possa me ajudar... coloco os banners tudo certinho e roda blz, preferi fazer com scroll mas os banner ficam muito juntos, vi que no seu exemplo os banners ficam separados.
    os meus nao, ficam muito juntos e nao fica legal... entao se vc puder me dar uma ajudinha eu agradeco muito.
    valeu abraco

    ResponderExcluir
  93. Olá, Charles!

    Para deixar espaço entre as imagens, basta adicionar a tag hspace (se for na horizontal) ou vspace (na vertical) para determinar o espaço entre as figuras.

    Você deve colocá-la em cada figura, no final, antes do /. Por exemplo:

    height="130" width="130" hspace="5"/

    Um abraço!

    ResponderExcluir
  94. Fala ai Adelson, cara e não é que deu certo...rsrrs
    valeu mesmo, ta rodando direitinho, se quiser da olhadinha la pra ver como ficou...
    abraco
    valeww mesmo

    ResponderExcluir
  95. Foi espetacular sua explicação, não poderia ser mais fácil!
    Obrigada, já estou seguindo
    Lucy

    ResponderExcluir
  96. Olá, Lucy!

    Que bom que tenha dado certo! Minha intenção é justamente dar explicações suficientes para que todos possam utilizar os recursos.

    Um abraço e obrigado pela visita!

    ResponderExcluir
  97. Adorei a dica, tentei utilizar no meu blog quando acessava pelo firefox funcionava perfeitamente agora quando se acessava pelo IE a tag não funcionava corretamente ficava toda desconfigurada =/
    vou procurar alguma outra alternativa pois com o marquee não deu certo.

    ResponderExcluir
  98. Olá, Tais!

    A tag marquee funciona corretamente em todos os browsers, inclusive no IE. Confirmei isso ao testar os códigos deste artigo e visitante outros blogs que o utilizam.

    Um abraço!

    ResponderExcluir
  99. Cara é o seguinte, coloquei o código e ficou blz nomeu site o problema é que quando coloco mais de duas imagens ele corta apartir da terceira, o que devo fazer

    ResponderExcluir
  100. Ola Boa noite ates de mais eu gostaria de agradecer por Você ter postado este código pois seu de um site gospel e estava precisando dele
    obrigada
    para mostrar a minha gratidão se Você quiser pode me mandar um banner do seu site pois terei o maior prazer em divulga lo no meu

    ResponderExcluir
  101. Muito boa a explicação virei seu fãn mais me diz uma coisa como eu faço para colocar um banner de cada vez aparecendo, tipo aparece um depois aparece o outro ?

    ResponderExcluir
  102. @Osmar: Fico feliz em saber que a dica tenha sido útil! Quanto ao banner para divulgação do Gerenciando Blog, ele está no alto da página, à direita.

    @DJ Marquinho: Para fazer o que você quer, é necessário utilizar outro recurso. Um deles é mostrado no Dicas Blogger, no artigo Slideshow no Blogger.

    Um abraço!

    ResponderExcluir
  103. Ola Adelson!
    Parabens pela otima explicaçao, era exatamente o que eu estava procurando e nao achava ate entao!
    Tenho uma duvida... como faço para que as imagens do banner se alternem, mas sem rotar, tipo só mudem (simplesmente apareçam) de um banner para outro, sem efeito e com um link em cada uma delas??
    mto obrigada pela preciosa dica!

    ResponderExcluir
  104. Olá, Louise!

    Infelizmente, o recurso "marquee", que mostro neste artigo, não permite fazer o que você quer. Mas, veja o artigo que indiquei na resposta anterior ao seu comentário. Isso pode ajudá-la.

    Um abraço e obrigado por sua visita!

    ResponderExcluir
  105. Fico-lhe muitíssimo grato.
    Continue o bom trabalho.

    ResponderExcluir
  106. Olá, F.Melo!

    Que bom que tenha gostado! Espero que encontre outros artigos interessantes aqui no Gerenciando Blog.

    Um abraço!

    ResponderExcluir
  107. Ola Adelson, utilizei essa função Markee no meu blog com 10 fotos, com o navegador internet explorer 8, só aparece 5 primeiras fotos e volta na rotação, nao tem como deixar um loop? no mozilla firefox ficou certinho, aparece as 10 fotos em rotação. obrigado pela atenção

    ResponderExcluir
  108. Andréia e Rafael: Infelizmente, percebi que há situações em que este código não funciona corretamente no Internet Explorer a partir da versão 8. Nos demais navegadores, funciona corretamente.

    Estou pesquisando uma alternativa para o caso. Assim que encontrar, publicarei aqui.

    Um abraço!

    ResponderExcluir
  109. Adelson..pela urgência, acabei tomando uma medida drástica rsrs Direcionei a página e "pimba", funcionou. Notei que no index não funciona, porém o mesmo código em uma página secundária, funciona perfeitamente. Qual será o segredo? Vou ficar aguardando pra ver se tu descobre.
    Grata pela resposta.

    ResponderExcluir
  110. Muito Bom!! Estava procurando isso a dias e agora que encontrei vc me salvou, rsrs

    Obrigado.

    ResponderExcluir
  111. to com um problemão aki, talvez vc possa me ajudar e eu ficaria muito grato por isso. eu tenho um blog (blogmaniacosdanet.blogspot.com), esta no inicio ainda e consegui colocar o banner acima, mas queria um efeito que ele começasse novamente sem ficar um espaço sem nada entre a ultima figura e a primeira na hora que a rotação inicia novamente.

    no aguardo!!!!

    Obrigado


    ha ja vou divulgar seu blog no no meu !!!!!

    ResponderExcluir
  112. @Andréia: Infelizmente, a resposta continua sendo um mistério para mim. O resultado do teste que você fez me deixou ainda mais curioso.

    @Bruno: Que bom que tenha encontrado aqui o que procurava!

    @Netmaniacos: Infelizmente, não é possível fazer o que você deseja com este recurso. Ele é limitado ao que mostrei neste artigo. Para fazer banners mais complexos, você precisa utilizar uma biblioteca JavaScript ou animações em Flash. Talvez isso seja possível também utilizando HTML5.

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  113. Muito bom este tutorial mano, show de bola. Parabéns pela ajuda professor....a planilha foi a melhor forma de montar banner que eu ja vi. waaleeeuuu mesmo. abraços.

    ResponderExcluir
  114. Olá, Ivân!

    Que ótimo saber que gostou da planilha! Foi a forma que encontrei para tornar mais simples a criação do banner.

    Um abraço!

    ResponderExcluir
  115. OLÁ
    MEU NOME É OSMAR, SOU NOVO AQUI. PARABÉNS PELO BLOG E PELA PLANILHA QUE GERA O CODIGO, MAS NÃO CONSEGUI COLOCAR O BANNER, O MEU SITE É UM PRESTASHOP. DESCULPE-ME!!!, MAS NÃO ENTENDI SUA EXPLICAÇÃO QUANDO VOCE DISSE: basta adicionar um gadget de “HTML/JavaScript” em seu blog. COMO SE FAZ ISTO NUM PRESTASHOP?
    ATT// OSMAR

    ResponderExcluir
  116. Olá, Osmar!

    Infelizmente, não conheço a plataforma Prestashop para poder ajudá-lo. Sugiro que você entre em contato com o suporte para verificar como publicar um código HTML lá.

    Um abraço!

    ResponderExcluir
  117. Olá Adelson, meu salvador da pátria !! :)

    Estava procurando algo interessante para destacar as postagens no início do blog, até que cheguei aqui e vi esta belezinha !!
    Fiz e ficou ótimo !! Esta planilha que você fez a gentileza de disponibilizar para nós é simplesmente o máximo !!!
    Preenchi e pronto !!

    Só posso mais uma vez agradecer !!
    Super obrigado !
    Um abração e bom domingo !

    ResponderExcluir
  118. Olá, Sam!

    Que bom que tenha gostado da planilha! Foi a forma que encontrei para tornar mais simples o trabalho de elaborar um banner com imagens.

    E gostei muito do uso que você fez do banner em seu blog! Ficou mesmo muito bom!

    Um abraço e ótima semana para você!

    ResponderExcluir
  119. Boa noite, Me chamo alberto e fiz uma mudança e coloquei um banner horizontal com algumas fotos. Mas tenho umas dúvidas. Por exemplo, quando coloquei as fotos ficou um espaço do mesmo tamanho das fotos em branco. Esse espaço aparece entre a ultima foto e a primeira foto. Outra coisa, é se podemos parar a foto por alguns instantes, tipo slide. Que a foto fique lá por uns 2 segundos e passe para outra e assim sucessivamente.

    Valeu meu irmão, e o seu blog é show de bola.

    ResponderExcluir
  120. Olá, Alberto!

    Infelizmente, este recurso é um pouco limitado. O espaço entre a última e a primeira foto, por exemplo, não pode ser removido. E também não é possível parar a foto por alguns momentos.

    Para fazer isso, é necessário utilizar bibliotecas específicas, com mais recursos.

    Um abraço e seja sempre bem vindo!

    ResponderExcluir
  121. Não seria mais fácil hoje utilizar um plugin JQuery?
    Marquee é bem antigo, rs...

    ResponderExcluir
  122. Olá, Diego!

    Concordo com você que o "marquee" é um recurso já ultrapassado. Mas, para quem está iniciando, é uma forma simples de publicar banners em seus blogs.

    Já tenho em minha lista de sugestões a publicação de um artigo com recursos avançados e avaliarei o JQuery para elaborá-lo.

    Um abraço e obrigado por sua visita!

    ResponderExcluir
  123. bom muito bom mesmo goste ,cara e queria aprende muito mais valeu

    ResponderExcluir
  124. Adelson,
    Gostei muito do recurso, mas não funcionou no IE. Acessei em um PC com Google Crome e funcionou normal.
    Acabei adaptando o código para deixar os banners parados.
    Caso tenha alguma ajuda para solucionar este problema eu aceito ok!!

    ResponderExcluir
  125. @Anônimo: Espero que encontre outros artigos úteis aqui no Gerenciando Blog e possa aprender ainda mais!

    @Evanderson: Infelizmente, há realmente limitações quanto ao funcionamento do "marquee" no Internet Explorer. Futuramente, devo escrever um artigo aqui no Gerenciando com uma outra opção para fazer esse efeito.

    Abraço a vocês!

    ResponderExcluir
  126. Muito obrigado pelo tutorial,foi de grande ajuda!

    ResponderExcluir
  127. Excelente tema Adelson!
    Agora tenho uma dúvida, existe alguma forma de deixar o comportamento "scroll" mais evitando o espaço em branco?

    Começando já preenchendo todo o espaço e quando acabarem de passar, já colar a 1ª na última?

    Agradeço a atenção e mais uma vez, meus parabéns pelo post.

    ResponderExcluir
  128. Olá Adelson, gostei do post e estou usando no meu site, conexaoalegria.com. No entanto, no google chrome ele não fica deslizando e no explorer fica com uma moldura, tem alguma dica pra nos dar? Desde ja agradeço...
    Arley

    ResponderExcluir
  129. @Fabricio: Que bom que tenha gostado!

    @Fernando: Infelizmente, não é possível fazer o que você quer. O recurso "marquee" é limitado e só pode fazer mesmo o que mostrei no artigo.

    @Arley: Procurei no seu site, mas não encontrei o banner. Mas, já adianto que infelizmente o recurso não funciona 100% nas versões mais novas dos browsers. Futuramente, devo escrever outro artigo indicando uma nova forma para fazer o banner.

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  130. Olá,
    gostei muito das dicas
    consegui colocar no meu blog porem
    mudei o tamanho das imagens sem perde a proporção
    estão elas no tamanho de height="200" width="150" mas so está aparecendo 4 imagens as outras 2 não aparecem e no seu tutorial tem 6 imagens, o que devo fazer ?

    ResponderExcluir
  131. Bah!!! unico que realmente me ajudo a cria um banner rotativo sem complicação nenhuma vlw mesmo tudo de bom pra você

    ResponderExcluir
  132. Olá querido Adelson! Passei aqui para te agradecer! Estava a procura de movimento para o meu site e este banner rotativo caiu como uma luva!
    Parabéns pelo excelente trabalho!!! Nunca encontrei uma dica tão bem explicada assim, qualquer pessoa consegue fazer com sua explicação!

    Utilizei este banner para exibir nossos parceiros, se quiser conferir, será um prazer recebê-lo em nosso site!

    Mais uma vez parabéns!!!
    Clícia Loubach
    Nova Classe Transporte Executivo

    ResponderExcluir
  133. Olá, Clícia!

    Obrigado por todos os elogios! Eu visitei o seu blog e gostei muito do uso que você fez do banner. Ficou muito bom!

    Um abraço e seja sempre bem vinda!

    ResponderExcluir
  134. OLÁ MEU NOME É EDUARDO E QUERO AGRADECER POR TER DISPONIBILIZADO ESTE BANNER ROTATIVO, PORÉM EU NÃO ESTOU CONSIGUINDO TIRAR A PALAVRA IMAGEM QUE FICA AO LADO DE CADA FOTO NO BANNER PODERIA ME AJUDAR DESDE JÁ LHE AGRADEÇO. EMAIL:eduardomcr2009@hotmail.com

    ResponderExcluir
  135. Olá, Eduardo!

    Envie para meu e-mail (adelson@gerenciandoblog.com.br) o código que você criou para o seu banner rotativo e eu o ajudarei.

    Um abraço!

    ResponderExcluir
  136. Bela, foi uma ótima solução para o layout do meu blog, ficou lindo:
    http://quevenhaabaixo.blogspot.com/

    ResponderExcluir
  137. Olá Adelson! Meu nome é Nathalia e adorei seu banner, mais infelizmente não estou conseguindo fazer ele funcionar usando o "up" no lugar do "left" não estou usando ele para blog e sim para um site e estou usando ele num frame. ele com o sentido horizontal funciona perfeitamente ja no vertical não funciona bem. alem de mudar a direction="left" para "up" invertir os px de width="175" height="400" .
    seria por estar usando em freme?
    grata

    ResponderExcluir
  138. @Porco: Que ótimo que o banner tenha funcionado corretamente para você!

    @Nathalia: Teoricamente, o efeito deveria funcionar corretamente, mesmo em um frame. Você pode fazer o seguinte teste: crie um arquivo HTML apenas com o código do banner rotativo e tente abri-lo em seu browser. Se ele funcionar corretamente, também deveria funcionar no site. Caso não consiga, me escreva (adelson@gerenciandoblog.com.br) e tentarei ajudá-la.

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  139. Oi Adelson, achei as dicas super práticas, mas esotou com um probleminha:

    Fiz o download da sua planilha e preenchi as informações. Quando fui colar no blog (que é plataforma Wordpress.com) através do Widget texto, não consegui. O código muda!

    Tem alguma idéia do porque isso ocrre e pode me ajudar?

    - Melissa.

    ResponderExcluir
  140. Olá, Melissa!

    Acredito que, como o Blogger, o Wordpress tenha um gadget do tipo HTML ou JavaScript. É esse o gadget que você deve utilizar para publicar o código.

    Torço para que funcione!

    Um abraço!

    ResponderExcluir
  141. Adelson, o gadget texto e o html são o mesmo no Wordpress. Mas quando eu colo lá, o código automaticamente muda.

    Tem alguma outra forma de fazer isso?

    - Melissa.

    ResponderExcluir
  142. Oi Adelson,

    que mamravilha sua planilha! Implantei facilmente o banner rotativo em meu WP. Parabéns e sucesso! Abçs

    Silvana

    ResponderExcluir
  143. ficou show de bola no meu site mas como disse o Bruno o meu tambem aparece somente 2 imagens as outras nao.

    www.dikanet.com.br

    ResponderExcluir
  144. Olá!!! QUERIA TE AGRADECER CARA!!! Eu tinha visto em vários outros sites, mas eles não explicavam passo a passo e eu ficava perdida, porque eu sou um desastre com html!
    mas seu blog foi o único que encontrei que explicasse direitinho! PARABÉNS!
    muiiiiiiiitoooo obrigada, de verdade! to tão feliz que agora consegui!!!
    beijos, Camila

    ResponderExcluir
  145. @Melissa: Farei mais alguns testes para tentar encontrar uma solução. Peço-lhe que me envie um e-mail (adelson@gerenciandoblog.com.br) para facilitar o contato.

    @Silvana: Que ótimo que tenha dado certo!

    @Andre: Infelizmente, este recurso possui limitações, especialmente com as versões mais novas dos navegadores. Futuramente, devo escrever um artigo sobre um recurso mais flexível.

    @Camila: Que ótimo que tenha funcionado para você! Fico feliz em poder ajudar.

    Abraço a vocês e obrigado pela visita!

    ResponderExcluir
  146. Olá Adelson! sou leitora do blog já um bom tempo! Já deixei vários comentário de agradecimento. Bom, hoje venho pedir um explicação. Você poderia me falar como faço para colocar o texto(título) deslizando, ao invés das imagens. Já tentei, mas não consegui. Eu sei que deve ser simples, porém não consigo tirar as imagens e deixar o texto.

    ResponderExcluir
  147. Olá, Nilda!

    É sempre bom vê-la por aqui, seja com elogios ou dúvidas. O que você quer fazer é possível. Como o Blogger não permite o código no comentário, veja como fazer no arquivo http://gerenciandoblog.webs.com/TextoDeslizante.txt.

    Um abraço!

    ResponderExcluir
  148. Você conhece script tenho que usar para fazer as imagens pausarem por alguns instantes, antes de continuar sua rotação normal? Parabéns pelo blog

    ResponderExcluir
  149. Olá, Rodrigo!

    Futuramente, devo publicar aqui no Gerenciando Blog outras formas de criar um banner rotativo, mostrando opções avançadas como a que você deseja.

    Um abraço!

    ResponderExcluir
  150. Olá, Nila e Vanderlei!

    Fico feliz que tenham gostado! Espero que o recurso seja útil em seus blogs.

    Um abraço!

    ResponderExcluir
  151. adicionei o baner , mais eu tenho uma duvida , como fazer com que nao fique espaço na ha hora que for começara a rodar dinovo , pois ele gira depois volta a girar ai fica em branco como fazer para ele nao ficar em branco , tipo sempre prenchido ?

    ResponderExcluir
  152. Olá, Sidclel!

    Infelizmente, não é possível realizar o que você quer com este recurso. Para isso, é necessário utilizar programação em JavaScript.

    Um abraço!

    ResponderExcluir
  153. gostaria de colocar mais de um logo no mesmo banner ... como faço isso ???

    ResponderExcluir
  154. Olá, MC Haru!

    Não sei se entendi bem a dúvida. Mas, você pode colocar diversas imagens, e todas elas serão exibidas, como nos exemplos que mostrei.

    Um abraço!

    ResponderExcluir
  155. Muito bom.
    Mas nao consegui aumentar a distancia entre os banners, nem colocar na horizontal, quando mudo o codigo todos continuam um embaixo do outro indo para a horizontal, assim só um aparece se movimentando.

    ResponderExcluir
  156. Olá, Emerson!

    Para que as imagens se movimentem na vertical, pode precisa modificar a tag "direction" para "up" ou "down". E para colocar um espaço entre entre elas, você pode usar a tag "margin", definindo um valor numérico para ela.

    Um abraço!

    ResponderExcluir
  157. Suas dicas são de grande valia. Muito obrigada!

    ResponderExcluir
  158. Não deu certo. Acho que fiz alguma coisa errada quando coloquei os links.
    Me parece que está o "banner" está reconhecendo tudo como uma única imagem.

    ResponderExcluir
  159. @Fabrícia: Obrigado pelos elogios!

    @Emerson: Se quiser, envie seu código para mim por e-mail (adelson@gerenciandoblog.com.br) e analisarei o que está ocorrendo.

    Abraço a vocês!

    ResponderExcluir
  160. Dica excelente já estou usando nos meus blogs.

    ResponderExcluir
  161. Olá!

    Obrigado pelo elogio! Espero que seja útil para você!

    Um abraço!

    ResponderExcluir
  162. Obrigado!!!!! Funcionou perfeitamente no meu blog: http://cinequartotv.blogspot.com Podem conferir, valeu Adelson!!

    ResponderExcluir
  163. olá Adelson. eu estava vagueando procurando tutoriais sobre animações rotativas fazem alguns dias(não tenho muito tempo nem muita "banda") quando encontrei suas anotações e dicas. há muita coisa desconexa, sem início ou sem final e não me agradaram nem fizeram eu pegar pra testar. a sua idéia da tabela Excel foi ótima! deixo uma opinião: seria possível a mesma tabela para uploads? eu consigo colocar imagens de meu hd fixas. daria pra usá-las rotativamente como banner?
    parabéns por seus trabalhos.

    ResponderExcluir
  164. @Júnnyor: Que ótimo! Fico feliz que tenha funcionado.

    @Doutores: Obrigado pelo elogio! Mas, construir uma planilha que faça o upload automaticamente seria bem mais complicado. A planilha atual apenas monta o código fonte.

    Um abraço!

    ResponderExcluir
  165. Gostei do teu blog, só que não entendo nada de Excel fiz como você ensinou, baixei a planilha, inseri os dados. Mas qual é a tecla que eu aperto para atualizar o código (amarelo).
    Desculpe a minha ignorância, mas estou aprendendo.

    ResponderExcluir
  166. Olá, Elson!

    Você não precisa fazer nada para que o código seja atualizado: ele é automaticamente modificado à medida em que você preenche os campos da planilha.

    Um abraço!

    ResponderExcluir
  167. gostei valeu a dica funciona bem legal um abraço...

    ResponderExcluir
  168. Olá, Beto!

    Que bom que tenha funcionado!

    Um abraço e seja sempre bem vindo!

    ResponderExcluir
  169. Oi, querido!!

    Achei maravilhoso!! Mas não funcionou com tamanhos maiores. MEu banner é 570 X 180...

    Só funciona para pequenos tamanhos?

    ResponderExcluir
  170. Obrigado pela ajuda.

    Tem algum banner em que poderia colocar anúncios?

    ResponderExcluir
  171. @Beatriz: Infelizmente, esta técnica tem algumas limitações. Nunca a testei com imagens tão grandes, mas é realmente possível que ela não funcione corretamente.

    @Emerson: Você pode utilizar esta técnica também para anúncios publicitários. Mas, acredito que ela não terá grande eficiência, por não capturar a atenção do visitante.

    Abraço a vocês!

    ResponderExcluir
  172. Parabéns pelo blog e iniciativa de ajudar aos outros. Tenho uma dúvida. É possível criar um banner a partir de uma planilha do excel? ou seja, ele alterar as informações do banner de acordo com as linhas da planilha. Sempre importar os dados vindos de lá. Ou você me recomendaria alguma outra forma ou linguagem?
    Grato.

    ResponderExcluir
  173. Olá, Flávio!

    É sim possível fazer o que você deseja. Veja que no final do artigo eu mesmo disponibilizei uma planilha Excel que monta o código HTML para utilizar no banner. Trata-se de uma fórmula que concatena as informações digitadas nas células.

    Um abraço!

    ResponderExcluir
  174. Amigo parabéns pelo Ótimo post, conheci hj este blog e estou impressionado com o tanto de conhecimento que levei desta minha visita por aqui. Deus lhe abençoe sempre e Feliz 2012 a todos!!

    ResponderExcluir
  175. Olá, Silvio!

    Fico feliz que tenha chegado até aqui! Espero que os artigos sejam úteis para o gerenciamento e evolução do seu blog!

    Um abraço e seja sempre bem vindo!

    ResponderExcluir
  176. Olá Adelson,

    Fico muito feliz por existirem pessoas como você que compartilha o conhecimento. Sou iniciante em programação PHP, e já consegui montar meu primeiro site de classificados somente colhendo dicas como a sua.
    Agora meu site ficou muito mais animado com a sua dica que já está funcionando nele.
    Imensamente agradecido pela colaboração amigo...
    Visite meu site e veja como ficou seu script....
    O Fiqueavista Classificados Online agradece...

    Abraços

    Márcio

    Canguçu/RS

    ResponderExcluir
  177. Marcio e Rado:

    Fico feliz em poder ajudá-los com a evolução do seus trabalhos. Este sempre é meu objetivo principal aqui no Gerenciando Blog.

    Um abraço e sejam sempre bem vindos!

    ResponderExcluir
  178. Putz, vc me quebrou um galho daqueles!!! Super útil para mim q trabalho com design de blogs.
    Muito obrigada!

    valaraujodesign.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, Val!

      Fico feliz que tenha funcionado para você! O recurso é bem simples, mas resolve boa parte das necessidades.

      Uma restrição é que ele não funciona corretamente em todos os navegadores.

      Um abraço!

      Excluir
  179. Adorei já estou usando em meu blog, nossa super obrigada!! meu blog http://www.pristylist.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, Pristylist!

      Que bom saber que funcionou corretamente para você!

      Um abraço!

      Excluir
  180. OLÁ COMO FAÇO PARA INSERIR AS IMAGENS DO MEU PC QUE NÃO TO CONSEGUINDO?

    ResponderExcluir
    Respostas
    1. Olá, Ronivon!

      Você não pode fazer o banner com imagens de seu computador. Elas devem estar hospedadas na web para serem acessadas por todos.

      Sugiro que você leia o artigo Webs, ótimo site para hospedar seus arquivos para conhecer um serviço onde você pode hospedá-las.

      Um abraço!

      Excluir
  181. Cara, valeu mesmo, excelente post


    Marcelo

    ResponderExcluir
    Respostas
    1. Olá, Marcelo!

      Fico feliz que tenha gostado! Espero que seja útil para seu blog.

      Um abraço!

      Excluir
  182. Ola Obrigado pelo seu post muito util mesmo mas sera que teria opçao de poder add a funçao da direita e esquerda para que possa mudar e visualizar a imagem que passou por expl mas mantendo a rotaçao automatica se pdoer me fale como agradeço e mais uma vez Obrigado

    ResponderExcluir
    Respostas
    1. Olá, Tiago!

      Infelizmente, isso não é possível com este recurso. As únicas possibilidades são as mostradas no artigo.

      Um abraço!

      Excluir
  183. Tenho uma pergunta, tem como colocar plano de fundo nesse slider , e além disso, como faz para as imagens já aparecerem na tela , daí girarem , e no final delas, já virem as outras em seuquêmcia, sem esperar as outras chegar no final , se puder me ajudar aí :)

    ResponderExcluir
    Respostas
    1. Olá, Acauã!

      Colocar um pano de fundo parece-me possível. Seria necessária uma alteração de CSS, indicando uma imagem na tag "background". Se você conhece HTML, o artigo http://www.w3schools.com/css/css_background.asp poderá ajudá-lo.

      Quanto ao efeito desejado, não é possível.

      Um abraço!

      Excluir
  184. Adelson voçe saberia me ajudar um parecido com esse mas que tivesse esse botao de rodar para esquerda e direita tipo este site aqui www.albicalor.pt preçizava muito qualquer das maneiras Muito Obrigado

    ResponderExcluir
    Respostas
    1. Olá, Tiago!

      Para isso, seria necessário utilizar um gadget com códigos em JavaScript. Futuramente, pretendo escrever sobre isso aqui no Gerenciando Blog.

      Um abraço!

      Excluir
  185. Prezado Amigo:

    Este código não funciona na plataforma wordpress - ou fiz algo errado?

    De qualquer forma funciona n Blogger - Obrigado
    Rui

    ResponderExcluir
    Respostas
    1. Olá, Rui!

      Confesso que conheço pouco o WordPress. Mas, como ele suporta códigos HTML e JavaScript, não vejo porque não funcionar.

      Um abraço!

      Excluir
    2. É amigo, não devia mas essa wordpress é hei os segredos, quando a gente manda publicar, ele publica e apaga os cabeçalhos, publica as imagens lincadas estáticas e verticalmente. Só para informar, estou passando tudo para o Blogger.

      Cumprimentos

      Excluir
    3. Olá, Rui!

      Sou suspeito para dizer, mas ainda não vi motivos suficientes para abandonar o Blogger e migrar para o Wordpress. Salvo pequenos detalhes, a plataforma tem me atendido muito bem.

      Um abraço!

      Excluir
  186. olá eu usei o banner no meu blog e ficou muito bacana, queria saber se tem como colocar uns efeitos tipo surgir e desaparecer uma transição em vez de apenas girar.

    washington Luiz
    www.imprimart.net

    ResponderExcluir

Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos. Há algumas regras na Política de Comentários que devem ser seguidas para que seu comentário seja publicado. As mais importantes:
- Não serão publicados comentários que não tenham relação com o artigo.
- Não respondo comentários por e-mail. Por isso, não deixe seu e-mail no comentário.
- Pedidos de visitas ao seu blog não serão publicados.
- Não serão publicados comentários que tenham link ou endereço do blog no corpo do texto. Para isso, assine com seu Nome/URL ou OpenID.

emo-but-icon

Início item

Contrate nossos serviços

Top Blogger 2013

Acompanhe as novidades

Divulgue o Gerenciando Blog

Gerenciando Blog - Dicas para blogs

Publicidade


Anuncie aqui