Janela flutante em Java script no Blog

Vamos mostrar como colocar uma janela de divulgação (estilo pop up) fixa sobre o seu blog e dentro dela você poderá colocar coisas como adicionar ao Twitter, assinar Feed e outras coisas que deseje ter a certeza que seus visitantes vejam.


Esse código é bem fácil de usar basta adicionar um gadget de html (pagina layout, adicionar gadget, html/javascript) e colar o código abaixo:

<style type="text/css">
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 320px;
top: 200px;left: 100px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onclick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
</div>
<div style="clear:both"></div>
<br />
<a style="font-size:80%" href="http://www.hc-host.net/" target="_blank">Hc Host</a></div>

No lugar das linhas onde está escrito conteúdo você poderá colocar qualquer html que desejar (link do seu feed, Twitter ou qualquer outra coisa), veja como alterar e configurar corretamente esse novo acessório para o seu blog para deixá-lo totalmente personalizado para o seu site:
border: 2px solid #000000;

background-color: #ffffff; Cor de fundo.

width: 320px; isso é a largura da janela, altere como desejar.

op: 200px;left: 100px; isso é a distancia em relação ao topo (200) e lado esquerdo (100) da pagina, também pode modificar como desejar.

Agora vamos passar as configurações dentro da janela de divulgação, note que a linha <div style="float:right; width:100px">conteudo</div> repete-se 3 vezes, ou seja, podemos ter 3 colunas dentro desta janela, ou seja, banners, textos um do lado do outro. Se quiser deixar apenas uma apague essas linhas, caso queria mais divisões é só copiar e repetir o código mais quantas vezes quiser.

Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.

Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.

Nos modelos novos do Blogger é recomendado colocar esse código num gadget sobre a postagem.

Isso porquê devido aos novos códigos se for colocado em outra parte pode haver erros e a janela de divulgação aparecer por baixo dos posts do blog. Fizemos esse teste usando o Firefox e Internet Explorer, usando o modelo Josh Peterson.