Atualmente muitas pessoas fazem parcerias trocando banners com outros sites e muitas vezes esses bannes ocupam bastante espaço no blog. Uma boa maneira de resolver esse problema é usar um sistema de rolagem de banners, isso faz ocupar menos espaço no blog e ao mesmo tempo tem um efeito visual muito bom. Outra alternativa interessante é fazer Apresentação de Slides com Banners.
Agora veja abaixo faz que os banners fiquem deslizando pela tela e o melhor você define o espaço que eles ocuparão e outras coisas.
center;height: 200px;width: 150px" scrolldelay="1"scrollamount="1"behavior="scroll"direction="down"onMouseOver=this.stop() onMouseOut=this.start()>
<p><a href="http://mensagens.110mb.com" target="_blank"><img
src="bannerfrases.jpg" border="0"></a></p>
<p><a href="http://jornaljd.blogspot.com" target="_blank"><img
src="http://i55.photobucket.com/albums/g138/robertojd/jornal.jpg" border="0"></a></p>
<p><a href="http://frasecurta.blogspot.com" target="_blank"><img
src="http://i55.photobucket.com/albums/g138/robertojd/banner-1.jpg"
border="0"></a></p>
<p><a href="http://dicasparablogs.blogspot.com" target="_blank"><img
src="http://i205.photobucket.com/albums/bb145/cidadeweb/bannerdicas.gif"
border="0"></a></p>
</marquee>
Vamos entender e aprender como modificar esse código:
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).
Espero que gostem e aproveitem essa sugestão de como economizar e melhorar a aparência de seu blog. Clique aqui e veja um exemplo desse código funcionando.
Nenhum comentário:
Postar um comentário