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:
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.
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: 290px;
top: 120px;left: 120px;
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">
<p><a href="http://twitter.com/#!/Downs_Fox" target="_new"><img src="http://www.lokosom.com.br/player/img/twitter.png" height="31" width="32"></a></p>
<p>Twitter</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.facebook.com/profile.php?id=100000332426122"><img src="http://www.lokosom.com.br/player/img/facebook.png" height="32" width="32"></a></p>
<p>Facebook</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.orkut.com.br/Community?cmm=117106475" target="_new"><img src="http://www.lokosom.com.br/player/img/orkut.png" height="32" width="32"></a></p>
<p>Orkut</p>
</div>
</div>
<div style="clear:both">
<div class="widget-content">
<p><a href="http://feeds.feedburner.com/downsFoxGmesSeuGameDeQualidade"><img src="http://codigosblog.net/servidor/gadget_social/rss.png" width="32" height="32"></a><br />
<a style="font-size:80%" href="http://www.dicasparablogs.com.br/2010/04/criar-uma-janela-de-divulgacao-no-blog.html" target="_blank">Downs Fox Games</a></p>
</div></div></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, 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.
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 290px;
top: 120px;left: 120px;
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">
<p><a href="http://twitter.com/#!/Downs_Fox" target="_new"><img src="http://www.lokosom.com.br/player/img/twitter.png" height="31" width="32"></a></p>
<p>Twitter</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.facebook.com/profile.php?id=100000332426122"><img src="http://www.lokosom.com.br/player/img/facebook.png" height="32" width="32"></a></p>
<p>Facebook</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.orkut.com.br/Community?cmm=117106475" target="_new"><img src="http://www.lokosom.com.br/player/img/orkut.png" height="32" width="32"></a></p>
<p>Orkut</p>
</div>
</div>
<div style="clear:both">
<div class="widget-content">
<p><a href="http://feeds.feedburner.com/downsFoxGmesSeuGameDeQualidade"><img src="http://codigosblog.net/servidor/gadget_social/rss.png" width="32" height="32"></a><br />
<a style="font-size:80%" href="http://www.dicasparablogs.com.br/2010/04/criar-uma-janela-de-divulgacao-no-blog.html" target="_blank">Downs Fox Games</a></p>
</div></div></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, 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.
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.
0 comentários:
Postar um comentário
Comente Não Custa Nada