29 de julho de 2009

Rolagem automática de banners na sidebar do Blogspot/Blogger


Esta dica que encontrei no Blog SemNome, na verdade são duas. Por que duas? Porque além de dar uma incrementada no template, deixando um efeito de animação na sidebar, também permite que você coloque uma grande quantidade de banners em um espaço de exibição reduzido.

Ao trabalho...

1º - Como sempre faça o backup do seu template atual.

2º - Vá em: Layout -> Elementos da página -> Adicionar um Gadget (Na sua sidebar) -> Adicionar um código HTML/JavaScript.

3º - Copie e cole o código abaixo com as devidas mudanças e/ou adaptações para o seu blog.
<style>
#roll, #roll marquee{
overflow:hidden;
width:180px;
height:300px;
margin:5px auto 5px auto;
text-align:center;
}
#roll a img{
border:1px solid #000000;
}
#roll img{
padding:2px 2px 2px 2px;
text-align:center;
margin:2px auto 2px auto;
background:#CCCCCC;
</style>
<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
Coloque os códigos dos banners aqui!
</marquee>
</div>
Pronto. Visualize e se tudo estiver certo, salve.

Veja uma aplicação desse widget na nossa sidebar.

10 comentários:

  1. Meuu amigo gosteii da clarezaa de seu blog ..

    bom eu sou um dos internautas qii viaja pela net aprendendo as manhas e os macetes dos blogs atravez de tutoriais!!!

    bom continue postando um bom material para seu blog e sera sempre um blog bem visitado!!

    ResponderExcluir
  2. Olá, Thiago. Tudo bem contigo?

    Fico agradecido pelas suas palavras e também pelo incentivo. Saiba que estarei aqui estudando e trabalhando para a cada dia trazer dicas cada vez mais interessantes os leitores do Blogger na Web.

    Deus te ouça e que o Blogger na Web seja muito vistado.

    Obrigado pela visita. Volte sempre.

    Sempre bem-vindo!

    Grande abraço

    ResponderExcluir
  3. Verdade Thiago...
    Parabéns pelo teu trabalho aqui Idenaldo,

    hoje mesmo vi este efeito no blog de um colega e pensei... mas quê que esse cara inventou aqui..... UAHuahuuAhua

    Pronto, achei! Hora de botar a mão na massa...
    =]

    Grande abraço,

    ResponderExcluir
  4. Olá, Robertoke. Bom dia!

    Obrigado pelo comentário e fico feliz que tenha gostado da dica.

    Visitei o seu blog e gostei muito do que vi. Está de parabéns.

    Assinei o seu Feed e também peguei um banner seu e coloquei entre
    os blogs/sites que gosto e recomendo.

    Grande abraço.

    Idenaldo

    ResponderExcluir
  5. Oi, eu uso essa rolagem há um tempinho mas só hoje me reportaram um problema. Fui verificar e de fato, no IE 8 (pelo menos o meu é esse) apenas parte dos banners aparecem. Não tinha percebido pq faço o blog com o Firefox. E quando visualizo no PC da faculdade não há problemas (e lá é IE tb, e parece ser o 8). Pedi pra uma pessoa olhar e tava tudo certo também, e acho que o navegador dela é um IE mais antigo. Não sei como fazer, o código está correto. Tem como fazê-lo funcionar em qualquer navegador? comofas
    Ainda não habilitei o OpenID então desculpa aê, mas vou ter de deixar meu url pra você olhar se puder http://tokiohotelcentralbr.blogspot.com
    É um fansite, não se assuste com o conteúdo.

    Um grande abraço, seu blog é a minha salvação. Parabéns!!!!

    ResponderExcluir
  6. Oi Idenaldo, obrigado pela dica. Ficou muito legal no meu blog. Mas ainda fiquei em dúvida em como colocar mais de 1 parceiro no código.

    Para você ter uma idéia de como ficou acesse:

    http://www.grandestextos.blogspot.com

    Obrigado.

    Seu blog tá nota 10.

    Abraço

    Fabiano

    ResponderExcluir
  7. Opa, esquece o que te perguntei...tava na cara já descobri...vou deixar seu banner lá...abraços

    ResponderExcluir
  8. Oi Idenaldo, mais uma dúvida sobre o código. Tem como colocar mais de 1 banner lado a lado? como se fossem 2 ou 3 fileiras rolando na sidebar?...

    ResponderExcluir
  9. Olá, parabéns pelo blog. Dicas muito úteis e bem explicadas. Usei essa dica em meu blog e ficou show. Valeu. Abraço

    ResponderExcluir
  10. GOSTEI DE + ENTRE EM MEU BLOG E VEJA OUTROS BANNERS TAMBEM
    http://todosporum.blogspot.com

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.