Criando uma rolagem de banners

| 24 Comentários

Parcerias sempre são boas escolhas, mas com trocas de links de texto. Trocas de banners sempre poluem o layout, ainda mais quando são muitos parceiros.
A melhor opção para ‘despoluir’ o layout seria tirar todos os banners e trocar por links de texto, mas tem gente que insiste em colocar banners. Então, a solução seria criar uma rolagem com todos os banners, sem poluir o layout, usando a marquee. E é isso que iremos fazer. A nossa barra de parceiros ficará parecida com esta:

Templates para Você Mundo dos Blogues

Então, vamos lá:

  1. Crie um gadget do tipo “HTML/Javascript” e coloque este código (ao lado de cada linha tem a explicação. Você pode excluir o que fica entre os /* e os */, inclusive os /* e os */):

<style>
#roll, #roll marquee{ /*Criamos um estilo para o elemento “Roll” e definimos também a sua marquee*/
overflow:hidden; /*Escondemos a barra de scroll, caso o navegador “ache” que seja necessário tê-la*/
width:180px;/*A largura da barra, baseada nos 200px, o tamanho padrão*/
height:300px; /*limitamos a altura, em pixels*/
margin:5px auto 5px auto;/*Definimos a margem, para que a nossa barra fique centralizada*/
text-align:center;/*centralizamos as imagens da barra*/
}
#roll a img{
border:1px solid #000000; /*borda preta de 1px nos links*/
}
#roll img{
padding:2px 2px 2px 2px; /*Criamos uma borda falsa*/
text-align:center; /*Alinhamos as imagens ao centro, caso o browser não interprete o resto*/
margin:2px auto 2px auto; /*Distanciamos as imagens uma da outra*/
background:#CCCCCC;/*Colocamos uma cor de fundo, caso a imagem não carregue*/
}
</style>

2- Ainda sem salvar, coloque isso após o </style>:

<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
<!-- Aqui você coloca o código dos banners -->
</marquee>
</div>

Salve e veja como ficou. Caso não esteja na velocidade que você queira, modifique o ‘scrollamount’ e o ‘scrolldelay’, sendo que quanto maior o número, mais lento.

24 comentários [Comente também!]:

virtualz1 disse:

Vc poderia postar sem as explicações do lado, pq eu estou com duvida quanto ao oq é para apagar e o que fica, eu fiz no meu blog só que ficou invisivel, faça sem as explicações do lado e mostre exatamente onde é para colar os banner, eu fiquei em duvida se era ou ñ para tirar as setas do lado, Eu agradeço!!!

SemNome disse:

@VirtualZ1, O que você pode apagar é o que fica entre /* e */, inclusive os /* e os */.

Após o </style>, você deve colocar este código, colocando o código dos banners no lugar indicado:

<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50"  >
É aqui que você coloca os banners
</marquee>
</div>

[]'s SemNome

menteinquietaprocuraresposta disse:

Muito bom!
Amanhã vou fazer!
Bjs
Questionadora

Anônimo disse:

como colocar na horizontal
?

SemNome disse:

Para colocar na horizontal, você deve alterar a direção da marquee para a direita (de direction="up" para direction="right");
O width e o height da #roll devem ser modificados para, respectivamente, 200px (ou mais) e 64px;
O atributo 'margin' de #roll img deve ser modificado para 2px 2px 2px 2px.

[]'s
SemNome

Letícia disse:

Oi amigo!
Eu de novo rssss
Estou tentando fazer essa rolagem de banner. Primeiro tentei fazer com rolagem horizontal, imagens não apareceram outras ficaram uma abaixo da outra e deveriam ficar ao lado rsss. Depois tentei fazer Vertical mesmo, aí elas aparecem só um pedacinho não sei como trazê-la para o centro. Deixe as duas formas no blog para que vc possa dar uma olhada e entenda o que estou querendo dizer rsss.
Abraços

SemNome disse:

@Letícia, experimente tirar as tags <div> das imagens, como, por exemplo, a do central blogs. Assim, creio que irá funcionar.

[]'s
SemNome

Letícia disse:

amigo, infelizmente não deu certo, vou ficar tentando por aqui. De qualquer forma muito obrigada por sua atenção.
abraços

SemNome disse:

@Letícia, tente usar apenas um modelo e dar o foco apenas a ele.
Se você, por exemplo, escolher o horizontal, tire todas as divs de dentro da marquee e, em todas as imagens, procure algum <br/> após elas ou um display:block no style.
Caso aconteça de ocorrer o display:block, substitua por display:inline.

[]'s
SemNome

Pensamentos em Orientação disse:

Amigo... quando vc diz que !-- Aqui você coloca o código dos banners -- tenho que colocar o link para as imagens? e se as imagens estiverem no meu PC? como faço?

Obrigada ... Teresa

SemNome disse:

@Teresa, tem que hospedar as imagens em algum servidor, como o Imageshack. Aprenda aqui.

[]'s
SemNome

Pensamentos em Orientação disse:

Meu querido...ja salvei as fotos no flicr...tentei colocar seu codigo acima...depois o codigo da pasta do flick r e nada aconteceu....estou desesperada ja!Vc pode me ajudar?obrigada Teresa

SemNome disse:

@Teresa, você deve copiar os códigos de imagem, os que comecem com "<img[...]".
Por exemplo, um código de banner de blog, como o do SemNome:
<a href="http://semnome.net" target="_blank" title="SemNome" ><img style="width:120px; height:60px; border:1px solid #000000" src="http://4.bp.blogspot.com/_NBm6T2_gd54/SfM67glcVmI/AAAAAAAAAxA/eW0QGf7yGOw/s320/SemNome.jpg" alt="SemNome" title="SemNome" /></a>

[]'s
SemNome

Pensamentos em Orientação disse:

oi!muito obrigada pela sua ajuda!consegui e ficou lindo!se quiser de uma passada pra ver ok?valeu!Teresa

wo-hoo disse:

como criar uma barra de rolagem para o widget de visitas do site ereferrer?

SemNome disse:

@wo-hoo, o código do script você copia para dentro da marquee e o link do e-referrer você coloca logo depois. Ou então você pode colocar tudo dentro da marquee.

[]'s
SemNome

Anônimo disse:

o vei todas as vez que for coloka um banner tem que coloka os codigos todos de novo?

SemNome disse:

Não. Basta colocar um novo banner logo após o último banner, antes de </marquee>.


[]'s
SemNome

Tokio Hotel Central [Br] disse:

Oie,
Eu uso essa rolagem de banners há algum tempinho e só hoje me reportaram um problema. Não imagino como resolver pq o código está correto. O problema é o navegador. Eu utilizo o Firefox e está perfeito. Mas, quando abro no Internet Explorer 8 ele mostra apenas parte dos banners, quando chega no meio ele volta para o inicio. Antes isso não acontecia e quando abro em outro PC, no IE também, esse problema não ocorre. comofas...
Se puder olhar o url é http://tokiohotelcentralbr.blogspot.com

Brigadim!!!

SemNome disse:

@Tokio Hotel Central [Br], quantas pessoas reportaram esse erro?
Se foi só uma, pode ser apenas um erro no navegador desta pessoa.

[]'s
SemNome

Tokio Hotel Central [Br] disse:

Eu também acredito que seja problema no navegador. Porque no meu que é atualizado acontece várias coisas estranhas, é elemento que some e depois aparece; não existe o ideal de um código que funcione 100% em qualquer lugar, né?! Esse lance de navegador é muito complicado.No meu IE 8 acontece isso, e as reclamações que recebi vinheram de Israel. Só me preocupei por causa da cobrança, mas penso que a melhor solução é colocar lá "melhor visualizado no Firefox" e deixar o link se a pessoa quiser baixar. Agradeço demais a sua atenção...Gosto muito do seu blog, é a grande salvação para os blogueiros iniciantes(como eu) e avançados.
Um grande beijo!! (e no dia que houver jeito de fazer as coisas funcionarem em qualquer brownser, me avisa ;D )

SemNome disse:

@Tokio Hotel Central [Br], Nem tudo funciona em qualquer browser. Por isso é bom criar coisas simples e testar nos navegadores mais utilizados, assim pode-se criar algo bem compatível.
Obrigado pela apreciação.

[]'s
SemNome

Sarah Sapeka disse:

Isso também acontece comigo...
Já tentei varios tipos de códigos que encontrei pela net e nenhum deles mostra todos os banners rolando dentro da caixinha!
Eu uso o firefox... Mas quando vejo em outros sites ou blogs esse código, ele funciona que é uma beleza!
To começando a achar que isso é pessoal =( Rsrs!

Igor Ribeiro disse:

Olá amigo, estou com uma duvida, ja procurei em muitos sites mas não consegui encontrar a resposta para isso, pode me ajudar ??

minha dúvida é a seguinte: eu consegui fazer a barra de rolagem perfeitamente igual você fez ai em cima, porém eu gostaria de saber como eu faço para ter a barra de rolagem com banners MAS SEM TER AQUELE ESPAÇO VAZIO ENTRE O PRIMEIRO E ULTIMO BANNER, como faço?

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes