Banner flutuante

Banner flutuante Olá pessoal, hoje vamos explicar como colocar um banner flutuante em sua página, neste banner você poderá divulgar varias coisas como por exemplo: a comunidade do seu blog ou site, seu Twitter, criar uma propaganda de algum cliente e o que mais sua criatividade permitir. Para colocarmos este banner flutuante em nossa página é muito simples, entre em sua página de login, em seguida clique em "LAYOUT" depois clique em "ADICIONAR UM GADGET" logo em seguida abrirá uma tela, escolha a opção "HTML/JavaScript", copie todo o código abaixo e cole dentro desta última opção que abrimos:

<!--
#popjan {border: 2px solid #3da1ff;
background-color: #000000;
width: 320px;
top: 200px;center: 100px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
.style1 {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
a {
    font-family: Arial, Helvetica, sans-serif;
    color: #0000FF;
}
a:visited {
    color: #FFFFFF;
}
a:hover {
    color: #FF0000;
}
a:active {
    color: #FF0000;
}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onclick="document.getElementById('popjan').style.display='none';"><img src="http://i361.photobucket.com/albums/oo57/ren3_02/x.png" width="22" height="22" /></a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
</div>
<div style="clear:both"></div>
<h6><span class="style1"><a href="http://www.baixandonaweb.com.br/" target="_blank">Widget Baixando na WEB</a></span><br />
</h6>
</div>

Agora é só salvar e visualizar sua página para ver se tudo está do seu agrado.
Vamos adaptar o código para o estilo da sua página.
Onde está escrito: #popjan {border: 2px solid #3da1ff; aqui iremos trocar a cor da borda, mude somente onde está crifado.
Neste trecho iremos trocar a cor do fundo: background-color: #000000; mude somente onde está crifado.
Onde está o link da nossa comunidade é só trocar pelo que você irá por no lugar, e no trecho que está o seguinte link http://i361.photobucket.com/albums/oo57/ren3_02/Orkutcopy.jpg é o link da imagem do Orkut, este link é onde a imagem está hospedada, você pode colocar qualquer imagem que desejar, lembrando que a imagem precisa estar hospedada, pois só utilizaremos o link, conforme exemplo acima.
É isso ai pessoal, espero que mais esta dica ajude muitos amigos.
OBS: Recomendamos colocar este código sempre próximo das postagens, pois se colocarmos este código na coluna lateral por exemplo, o código pode dar errado.
Qualquer dúvida é só deixar um coméntario que estaremos esclarecendo todas as dúvidas.



5 comentários:

Beth Muniz 23 de maio de 2010 15:50  

Olá,
Muito bom.
Vou testar.
Um abraço.

Vanda 24 de maio de 2010 20:03  

Gostei muito, vou fazer em meu blog, e te sigo, seu blog é excelente! Abração

ICPB Jatobá 1 de setembro de 2010 00:36  

Não Funcionou. :-(
será se é pq eu usei no blogger?

Baixando na WEB 2 de setembro de 2010 20:54  

Olá ICPB Jatobá,

Alguma coisa deve ter dado errado, pois eu utilizo o blogger e funciona.
Já coloquei varias vezes este tipo de banner no blogger!

Caso você precise de ajuda, pode me solicitar por e-mail.

renato.joao@ig.com.br

Um grande abraço.

Leo 7 de setembro de 2010 02:47  

não está animando.. apenas parado.

Postar um comentário

© 2012 Todos os direitos reservados | Baixando na WEB | | Desenvolvido por - RL Design