16/08/2011

Organizar Banners ou Pagina de Parcerias entre Blogs

Organizar os banners de parceiros pode ser complicado principalmente se fizer da maneira errada, já vi em alguns blogs esses banners um em cada gadget ocupando um espaço enorme e sem necessidade. Além disso, dependendo da quantidade de banners vale à pena colocar numa pagina só para banners de parceiros ou usar algum código para mostrar os banners em ordem aleatória, portanto vamos falar sobre esse assunto com mais detalhes.

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).

efeito em lista de banners
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.

exemplo de efeitos em imagens
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.
Related Posts with Thumbnails

70 comentários:

  1. Fabiano você é ótimo!Te agradeço por atender meu pedido.Tô indo lá fazer e depois digo o que deu.

    ResponderExcluir
  2. Fabiano,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?

    ResponderExcluir
  3. fiz uma alteração no código e agora funciona...

    o 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

    ResponderExcluir
  4. 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.

    ResponderExcluir
  5. Ok,Vou tentar agora Fabiano,mais uma vez obrigado.

    ResponderExcluir
  6. Fabiano me tira uma dúvida...Estou colocando os banners em uma página estática,os banners tem que ser todos do mesmo tamanho?

    ResponderExcluir
  7. Olá!
    Obrigado!
    Queria saber como se faz pra as letras do lado do favicon, la em cima, fiquem andando

    ResponderExcluir
  8. olá..
    Como faço para criar uma página para colocar todos os parceiros do blog??

    Obrigada.

    ResponderExcluir
  9. micarla
    pode usar banners de qualquer tamanho, mas é claro que se todos forem do mesmo tamanho ficará com uma aparencia bem melhor

    ResponderExcluir
  10. Marcos B.A.
    veja esse código:Barra de Endereço Animada

    Papo de amiga JG
    são as paginas extras do blogger: Paginas extras para o Blogspot

    ResponderExcluir
  11. Fabiano funcionou,tudo direitinho!Obrigado e uma ótima tarde.

    ResponderExcluir
  12. No meu blog tah do jeito q vc tinha flado, um banner em cada gadget, realmente fica meio chato, vou fazer o q vc falou.
    Obrigada, vc é ótimo com td isso.
    Bia

    ResponderExcluir
  13. Muito obrigada pelas dicas. Era tudo o que eu precisava.

    ResponderExcluir
  14. Como disse o amigo aí em cima, não é a toa que este blog é sempre o primeiro.
    Em pouco tempo já virei fã!!
    Parabéns, Fabiano e obrigada por compartilhar!

    ResponderExcluir
  15. 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!

    ResponderExcluir
  16. se 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

    ResponderExcluir
  17. olá meu nome é leandro e queria tirar uma dúvida sobre a organização dos banners.
    Meu 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!

    ResponderExcluir
  18. 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!

    ResponderExcluir
  19. Micos.com
    acho 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/

    ResponderExcluir
  20. xDDD taa muito massa esse post lol vai me servir daqui uns dias ^^
    Vou 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ç

    ResponderExcluir
  21. como diminuo o espaço que fica entre um banner e outro ?

    ResponderExcluir
  22. para deixar menos espaço altere o valor 30, no trecho: margin: 30px

    ResponderExcluir
  23. Fabiano, 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?

    ResponderExcluir
  24. Pri Paiva
    você 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

    ResponderExcluir
  25. Olá, 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?

    ResponderExcluir
  26. Karine Clessia
    acho 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

    ResponderExcluir
  27. Fabiano, não deu certo não. Continua na mesma.

    ResponderExcluir
  28. Karine
    veja 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

    ResponderExcluir
  29. 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??
    Obrigada!! E fico aguardando!

    ResponderExcluir
  30. Marcela Redígolo
    para 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>

    ResponderExcluir
  31. ola ,como consigo um link como o q vc tem ,para as pessoas colocarem em seu blog.
    obrigada

    ResponderExcluir
  32. 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.

    ResponderExcluir
  33. Fabiano olá!
    Por 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

    ResponderExcluir
  34. @Antonio Esperança Pereira nos templates dinamicos não tem como adicionar afiliados ou qualquer outro gadget

    ResponderExcluir
  35. Olá 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?

    Meu blog é http://www.seiquedeusexiste.blogspot.com/

    ResponderExcluir
  36. PS: É que desejo tirar os blogs parceiros da pagina da frente está demorando muito para carregar a pagina além de ficar feio.

    ResponderExcluir
  37. @ஜ♥Patricia♥ஜ veja se os endereços das imagens e blogs estão corretos porque o código está certo

    ResponderExcluir
  38. Fabiano 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??????

    ResponderExcluir
  39. Sou da IURD e Dai?
    nã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 >

    ResponderExcluir
  40. Boa tarde, Fabiano. Tenho um site onde faço divulgação de alguns clientes.
    a 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

    ResponderExcluir
  41. joaquim
    veja 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

    ResponderExcluir
  42. Fabiano querido!!!
    Eu 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

    ResponderExcluir
  43. 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

    Colei 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

    ResponderExcluir
  44. o código não altera o tamanho dos banners.

    o certo seria que os banners já fossem feitos do mesmo tamanho

    ResponderExcluir
  45. eu queria o banner uma do ladop do outro
    como eu fasso tentei fazer como pagina mas saiu um em baixo do outro com0o eu fasso?

    ResponderExcluir
  46. Fabiano,eu aqui de novo ,estou levando outra vez este código do banner.
    Obrigada,bjs

    ResponderExcluir
  47. Fabiano,um problema. Os 4 primeiros banners ficaram escadinha,como arrumo?

    ResponderExcluir
  48. Graç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

    ResponderExcluir
  49. Oi queria pedir que vocês colocassem uma caixa de pesquisa na pagina do seu site para achar melhor o seu conteudo!

    ResponderExcluir
  50. mas temos uma caixa de pesquisa no topo da pagina

    ResponderExcluir
  51. como faço para criar um botão que quando for clicado leva a pessoa pro meu twitter?

    ResponderExcluir
  52. você pode usar o Botão Seguir no Twitter

    ou fazer um banner como se fosse para qualquer site e colocar o seu endereço do twitter como link

    ResponderExcluir
  53. qual código posso adicionar nele para que ele configure o tamanho da imagem automaticamente?

    ResponderExcluir
  54. Jessi Potter

    no 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

    ResponderExcluir
  55. 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

    ResponderExcluir
  56. Rocames dá para usar como qualquer tipo de imagem.

    falamos em banners no tutorial porque é o assunto mais procurado

    ResponderExcluir
  57. Fabiano eu levei este código acima.
    Obrigada,bjs

    ResponderExcluir
  58. brigadão aew seu blog e o melhor sorte minha ter vcs pra me ajudar vlw mesmo

    ResponderExcluir
  59. Excelente! 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

    ResponderExcluir
  60. veja nesta linha

    a href="http://assuntados.blogspot.com"target=”_blank”

    em vez de aspas no target blank tem um código estranho... tente colocar aspas

    ResponderExcluir
  61. Fabiano, corrigi o que você me falou. Retirei os "
    " 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!

    ResponderExcluir
  62. LEGAL GOSTEI,PARABENS,PELA AJUDA,DEUS CONTINUEM ILUMINANDO VOCE.

    ResponderExcluir