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


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.