criar uma janela de divugação no blog

Criar uma Janela de Divulgação 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 />

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; isso é a borda, veja aqui como alterar as cores, estilo e tamanho das bordas.

background-color: #ffffff; cor de fundo da janela, se quiser alterar aqui tem o código html das cores

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

top: 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.