|
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="Link do seu site Aqui" target="_blank">Widget Saiba Mais</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; isso é a borda
background-color: #ffffff; cor de fundo da janela
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. 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.
|
Labels: CÓDIGOS EM HTML
comment closed