domingo, 13 de julho de 2008

Banners Deslizantes

Hoje em dia uma forma de merchandising muito comum em blogs e a troca de banner que sempre traz vantagens a todos os lados, lembrando sempre que blogueiros não são concorrentes são sempre parceiros cada um tem um ponto de vista em relação a um determinado assunto por isso não pense que perdera suas visitas para seu parceiro de banner, mas o que fazer quando você possui muitos parceiros e os banners ocupam muito espaço no seu blog?
Aqui vai uma dica que pode ajudar e muito você neste caso, e um sistema de banner rolante onde todos seus banner ficam passando como aquelas letrinhas no final de cada filme um efeito que economiza espaço e também deixa seu blog muito mais bonito vamos ao código.


<marquee style="border: 2px solid #000000; background-color: #FFFFCC;text-align:
center;height: 200px;width: 150px" scrolldelay="1"scrollamount="1"direction="down"onMouseOver=this.stop() onMouseOut=this.start()>
<a href="http://www.blog-sos.blogspot.com/" target="_blank">
<img border="0" src="http://img135.imageshack.us/img135/8974/soswr3.gif"/></a>

<p><a href="link do seu parceiro" target="_blank"><img
src=" imagem do banner do seu parceiro" border="0"></a></p>

<p><a href="link do seu parceiro" target="_blank"><img
src="imagem do banner do seu parceiro" border="0"></a></p>

<p><a href="link do seu parceiro" target="_blank"><img
src="imagem do banner do seu parceiro" border="0"></a></p>

<p><a href="link do seu parceiro" target="_blank"><img
src="imagem do banner do seu parceiro" border="0"></a></p>

</marquee>

________________________________________________


<strong>Vamos entender esse código:</strong>

Borda: border: 2px solid #000000
2 é a largura, solid é o estilo normal(experimente trocar 2px solid por 5px double, são duas linhas como borda)

Cor de fundo: background-color: #FFFFCC

Alinhamento: text-align: center
Poder ser left(esquerda) ou right(direita)

Altura: height: 200px
Largura: width: 150px
Altura e largura pode ser qualquer valor, mas não retire o px no final, é uma medida de pagina(pixels)

scrolldelay="1"scrollamount="1"direction="down"
Os valores 1 no trecho acima são a velocidade que os banners se movimentam e a palavra down é a direção que pode ser alterada para up(para cima), left(para esquerda), right(para direita).


Com esse código simples da para você economizar muito espaço em seu blog.

3 comentários:

utp-critikeart disse...

Olá Nelson,tudo bem?Eu gostei da idéia do banner deslizante.Mas onde, em que parte coloco o código?
Como widget?
Obrigada

Thiago Tv disse...

Amigo onde coloco este código no html, me diga por favor

Maxi Gutho disse...

NOOOOSAAA!1 COMO DIZ O MICHEL TELÓ.... SSRS MUUUITO SHOWW.....NELSON!! PARABÉNS!!! OBRIGADO.!!!

 
© 2008 *By Templates para Você*