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 style="float:center; width:300px"><a href="http://www.orkut.com.br/Main#Community?rl=cpp&cmm=92492056"><img src="http://i361.photobucket.com/albums/oo57/ren3_02/Orkutcopy.jpg" /></a></div>

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