Colocar Banners um do Lado do Outro
Recebemos um comentário perguntando sobre organizar os banners e usamos como exemplo uma pagina com imagens das frases curtas (nosso outro blog) então vamos mostrar como é a organização dos banners e como colocar efeito nos banners ao passar o mouse sobre eles (veja o link da pagina de exemplo).

Sugerimos utilizar uma pagina extra do blogger para fazer sua pagina de parcerias, mas o código que vamos mostrar funciona da mesma maneira se utilizar em um gadget de html/javascript.
<style type="text/css">
.galeria img{text-decoration: none;margin: 30px;padding: 2px;float: left;border: 1px solid #000;background-color: #FFc;}
.galeria a:hover img{border: 1px dashed #009;background-color: #FF0;}
</style>
<div class="galeria">
<a href='http://www.dicasparablogs.com.br'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" /></a><a href='http://www.dicasparablogs.com.br'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" /></a>
</div>
Aqui você pode colocar o código que quantos banners desejar ou se quiser pode mostrar os bannes em ordem aleatória, assim cada vez que a pagina carregar a ordem dos banners será diferente. Se for utilizar o código do link veja que no final dele tem: .....src="' + desc[rnd] + '"border="0" /></a><br/>')
Será necessário retirar esse <br/> para que os banners fiquem um do lado do outro, deixando desta forma esse trecho do código javascript para banners em ordem aleatória: ....src="' + desc[rnd] + '"border="0" /></a>')
Colocar efeitos no banner ao passar o mouse
As primeiras linhas do código são formatação CSS e você pode modificar como desejar.

Veja aqui como alterar as bordas e cor de fundo só precisa trocar o código das cor, no trecho: background-color:....
Olhe novamente as imagens que colocamos nesta postagem ou nossa pagina de exemplo e verá que existe uma cor de fundo por trás de cada imagem, ela parece ser um pequeno contorno devido ao código padding:2px no código CSS, então se quiser pode fazer testes alterando esse valor ou apagando esse código se não quiser deixar o fundo a mostra.
Para terminar queremos lembrar mais uma vez que é recomendável utilizar esse código em um gadget somente se tiver poucos banners, senão seria melhor criar uma pagina separada porque quando mais banners no seu blog mais ele demora em carregar e nem todos tem paciência ou banda larga para isso.
Fabiano você é ótimo!Te agradeço por atender meu pedido.Tô indo lá fazer e depois digo o que deu.
ResponderExcluirFabiano,coloquei o código lá (do jeito que ele ta ai)e os banners não ficam na mesma altura(alinhados),ficam tipo uma escada.Da esquerda pra direita o do meio fica mais abaixo,como resolvo isso?
ResponderExcluirfiz uma alteração no código e agora funciona...
ResponderExcluiro problema é que se colocar os códigos dos banners cada um em uma linha o blogger entende que pulou uma linha... portanto tem que colocar os códigos sem mudar de linha ... assim:
......C6TwvM/s400/dicas2.jpg" /></a><a href='http://www.dicasparablogs.com.br.......
vai ficar um pouco confuso olhar o código pois veja que termina um banner e começa o outro em sequencia, mas sem clicar enter para trocar de linha
Esta explicado o porque, Dicas Para Blogs, sempre aparece em primeiro ao pesquisar algo na google sou fã desse blog, e digo, e difícil achar um blog tão profissional como esse, você fabiano merece esse sucesso, há é claro eu estava a mais de um mês procurando essa organização para parceiros, muito bom fabiano parabens e obrigado.
ResponderExcluirOk,Vou tentar agora Fabiano,mais uma vez obrigado.
ResponderExcluirFabiano me tira uma dúvida...Estou colocando os banners em uma página estática,os banners tem que ser todos do mesmo tamanho?
ResponderExcluirOlá!
ResponderExcluirObrigado!
Queria saber como se faz pra as letras do lado do favicon, la em cima, fiquem andando
olá..
ResponderExcluirComo faço para criar uma página para colocar todos os parceiros do blog??
Obrigada.
micarla
ResponderExcluirpode usar banners de qualquer tamanho, mas é claro que se todos forem do mesmo tamanho ficará com uma aparencia bem melhor
Marcos B.A.
ResponderExcluirveja esse código:Barra de Endereço Animada
Papo de amiga JG
são as paginas extras do blogger: Paginas extras para o Blogspot
Muito obrigada !!
ResponderExcluirVc é demais (y
Fabiano funcionou,tudo direitinho!Obrigado e uma ótima tarde.
ResponderExcluirNo meu blog tah do jeito q vc tinha flado, um banner em cada gadget, realmente fica meio chato, vou fazer o q vc falou.
ResponderExcluirObrigada, vc é ótimo com td isso.
Bia
Muito obrigada pelas dicas. Era tudo o que eu precisava.
ResponderExcluirComo disse o amigo aí em cima, não é a toa que este blog é sempre o primeiro.
ResponderExcluirEm pouco tempo já virei fã!!
Parabéns, Fabiano e obrigada por compartilhar!
Olá, eu tenho no meu blog www.ministerioceo.com.br um menu bem legal, mas quando eu passo o mouse sobre algum item que se expande ele fica em baixo das imagens do blog, o que eu posso fazer? Por favor, me responda o mais rápido possível, obrigado!
ResponderExcluirse está falando de códigos de sub menu... infelizmetne alguns geram problemas com outros conteudos... seria necessário fazer testes e trocar o código completo do menu
ResponderExcluirolá meu nome é leandro e queria tirar uma dúvida sobre a organização dos banners.
ResponderExcluirMeu blog tem os banners um em cima do outro mas eu queria, tipo em 2 colunas.
é em um elemento da página.
eu coloquei o código q vc postou. mas nao deu certo.
Quero q fikem lado a lado.
se vc quiser eu te passo o link do blog.
e vlw! seu blog me ajudou bastante! praticamente meu blog inteiro foi feito com suas dicas! tá de parabéns fabiano! seu site é mt bom!
se quiser difidir em duas, tem essas opções
ResponderExcluirDividir um gadget em duas colunas
Imagens Lado a Lado, Fazer Colunas nos Gadgets
Eu não sei se tem aqui no BLOG mas eu queria pedir para ensinarem a fazer igual aos AGREGADORES que os banners mudam de lugar de acordo com a quantidade de visitas enviadas!
ResponderExcluirMicos.com
ResponderExcluiracho que não tem como alterar a posição dos banners de parceiros automatimamente conforme o numero de visitas
se quiser aqui tem um contador que mostra quem enviou mais visitas, mas são links e não banners
http://www.e-referrer.com/
xDDD taa muito massa esse post lol vai me servir daqui uns dias ^^
ResponderExcluirVou arrumar um blog que tenho da minha associação e por isso dai!
Vlws.. se puder segue meu blog ^^
http://www.ltecmundo.blogspot.com/
Valeu.. abç
como diminuo o espaço que fica entre um banner e outro ?
ResponderExcluirpara deixar menos espaço altere o valor 30, no trecho: margin: 30px
ResponderExcluirMuito obrigado fabiano roberto :D
ResponderExcluirFabiano, como eu faço para colocar um gadget no meu blog que mostre os últimos posts de um parceiro meu? Tem algum tutorial a respeito disso?
ResponderExcluirPri Paiva
ResponderExcluirvocê pode adicionar um gadget de feed no seu blog usando o feed desse seu parceiro, então aparece as postagens recentes dele... veja aqui Usar Feed como Acessórios
Ok. Muito obrigada!
ResponderExcluirOlá, Fabiano, tudo bem? Bom, eu vou te perguntar algo que nada tem a ver com o post. É que estou "programando" o meu blog e ocorreu um problema: os posts ficaram em cima do banner principal do blog. O que devo fazer para colocá-lo no lugar certo?
ResponderExcluirKarine Clessia
ResponderExcluiracho que a posição das coisas não tem nada a ver com post programado...
veja na pagina layout se não está fora de lugar.. tente arrastar os gadgets e salvar as alterações
Fabiano, não deu certo não. Continua na mesma.
ResponderExcluirKarine
ResponderExcluirveja aqui Problemas para mover ou adicionar gadgets do blog
se não conseguir resolver o problema deve ser erro no template... então precisa entender de html ou trocar o template
Olá, como eu faço para deixar os banners um embaixo do outro ao invés de ao lado, e aonde eu coloco o link da imagem??
ResponderExcluirObrigada!! E fico aguardando!
Marcela Redígolo
ResponderExcluirpara ficar um embaixo do outro use o código assim:
<a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a> <br />
<a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a> <br />
<a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a> <br />
ou se quiser um espaço maior entre os banners assim:
<p><a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a></p>
<p><a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a></p>
<p><a href="endereço do blog" target="_blank"><img src="endereço da imagem" alt="" border="0" /></a></p>
ola ,como consigo um link como o q vc tem ,para as pessoas colocarem em seu blog.
ResponderExcluirobrigada
Nany Estrela
ResponderExcluirveja aqui Caixinha com o link da postagem
Teu Blog é demais, super completo, você está de parabéns. Estou iniciando o meu, e toda informação que necessito venho buscar aqui, muito obrigado mesmo.
ResponderExcluirFabiano olá!
ResponderExcluirPor favor pode ensinar-me? tenho atualmente uma template dinâmica do blogger. Para divulgar meus posts é melhor. Só que não sei como adicionar códigos de campanhas de afiliados, por exemplo.
Como se faz?
Muitíssimo obrigado
Um abraço
@Antonio Esperança Pereira nos templates dinamicos não tem como adicionar afiliados ou qualquer outro gadget
ResponderExcluirOlá Fabiano, não estou conseguindo fazer, criei uma página, tentei colocar o código que vc pos lá em cima para dar efeito mas não deu certo, ai exclui ele, e tentei fazer somente do jeito que vc ensinou para a Marcela no dia 18/10, colocar o endereço da imagem e o do blog, mesmo assim, quando crio a pagina só fica os códigos e não aparece imagem nenhuma o que estou fazendo de errado?
ResponderExcluirMeu blog é http://www.seiquedeusexiste.blogspot.com/
PS: É que desejo tirar os blogs parceiros da pagina da frente está demorando muito para carregar a pagina além de ficar feio.
ResponderExcluir@ஜ♥Patricia♥ஜ veja se os endereços das imagens e blogs estão corretos porque o código está certo
ResponderExcluirFabiano eu li e reli isso ae mais eu não entendi tentei mais não consegui sera que teria como vc fazer uma video aula com esse assunto??????
ResponderExcluirSou da IURD e Dai?
ResponderExcluirnão tenho video sobre esse assunto.
mas não tem muito o que mostrar é só colar o código e pronto
se não está aparendo a imagem talvez tenha apagado algo por engano, veja que no código tem ' antes e depois dos endereço do blog e da imagem
< a href='http://www.dicasparablogs.com.br'target='_blank' >< img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" >< / a >
Boa tarde, Fabiano. Tenho um site onde faço divulgação de alguns clientes.
ResponderExcluira visualisação dos banners é fixa. Será que tem com por as imagens com exibição aleatória? e nesse caso as imagens teriam que estar dentro de uma tabela ou algo parecido? grato, campos
joaquim
ResponderExcluirveja aqui um código para Lista de banners ou links em ordem aleatória
se usar esse código em vez dos links como mostramos neste tutorial vai funcionar e fazer aparecer os banners em ordem aleatoria e não precisa de tabela.
é como fazemos aqui: frases curtas
Fabiano querido!!!
ResponderExcluirEu estava doida atrás desta postagem,olha que eu venho aqui quase toda semana.Só hoje que eu vi.
Estou levando.Obrigada,lindo domingo para você,bjs
Ola voltei desculpe te incomodar, fiz a página coloquei o código, mas os banners não ficam do mesmo tamanho, não sei onde mexer mais colei esta parte do seu código
ResponderExcluirColei desde < style até lank '>
Seu banner aparece e tudo, mas dai para frente não ficam iguais, poderia me ajuda?
este é o link da pagina:
http://seiquedeusexiste.blogspot.com/p/conheca-nossos-parceiros.html
o código não altera o tamanho dos banners.
ResponderExcluiro certo seria que os banners já fossem feitos do mesmo tamanho
eu queria o banner uma do ladop do outro
ResponderExcluircomo eu fasso tentei fazer como pagina mas saiu um em baixo do outro com0o eu fasso?
consegui! ficou legal obrigada!
ResponderExcluirok
ResponderExcluirFabiano,eu aqui de novo ,estou levando outra vez este código do banner.
ResponderExcluirObrigada,bjs
Fabiano,um problema. Os 4 primeiros banners ficaram escadinha,como arrumo?
ResponderExcluirGraça Madeira veja se não colocou os códigos pulando linhas as vezes isso dá diferença na hora de executar o código
ResponderExcluirOi queria pedir que vocês colocassem uma caixa de pesquisa na pagina do seu site para achar melhor o seu conteudo!
ResponderExcluirmas temos uma caixa de pesquisa no topo da pagina
ResponderExcluircomo faço para criar um botão que quando for clicado leva a pessoa pro meu twitter?
ResponderExcluirvocê pode usar o Botão Seguir no Twitter
ResponderExcluirou fazer um banner como se fosse para qualquer site e colocar o seu endereço do twitter como link
qual código posso adicionar nele para que ele configure o tamanho da imagem automaticamente?
ResponderExcluirJessi Potter
ResponderExcluirno trecho
img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" /
seria possivel adicionar o tamanho do banner e fazer todos ficarem iguais, mas isso faz perder a qualidade da imagem.
se quiser usar o código fica assim:
img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" height="60" width="120"
só precisa ajustar os valores 60 e 120
eu gostei desse codigo , da pra fazer uma pagina de jogos , os jogos ficariam um ao lado do outro como em um site profissional, mas eu ainda nao sei o como fazer pois onde eh pra por a url eu coloco uma postagem que esta salva, e quando clica e ela abre aparece aquela marca d'agua de visualizaçao do blog, poderia ensinar no futuro como fazer uma pagina de jogos parecida com de um site profissional
ResponderExcluirRocames dá para usar como qualquer tipo de imagem.
ResponderExcluirfalamos em banners no tutorial porque é o assunto mais procurado
Fabiano eu levei este código acima.
ResponderExcluirObrigada,bjs
Valeu!Ajudou muito!
ResponderExcluirbrigadão aew seu blog e o melhor sorte minha ter vcs pra me ajudar vlw mesmo
ResponderExcluirExcelente! Fiz no meu e consegui também... Gostaria que vocês me ajudassem pois criei uma pagina exclusiva para banner de parceiros e eles ficaram ordenados porém com um espaço que não consegui encontrar o erro. o link é esse: http://curiosobiblico.blogspot.com.br/p/blog-page.html
ResponderExcluirveja nesta linha
ResponderExcluira href="http://assuntados.blogspot.com"target=”_blank”
em vez de aspas no target blank tem um código estranho... tente colocar aspas
Fabiano, corrigi o que você me falou. Retirei os "
ResponderExcluir" que fazem dar espaço. Agora falta resolver um problema de um vácuo que ficou na quarta linha de banners. www.curiosobiblico.blogspot.com.br Obrigado pela atenção!
LEGAL GOSTEI,PARABENS,PELA AJUDA,DEUS CONTINUEM ILUMINANDO VOCE.
ResponderExcluir