Fixar botões no canto da pagina

Colocamos neste blog alguns botões no canto da pagina para adicionar aos favoritos, assinar feed, atualizações por email e para nossa comunidade no orkut, e varias pessoas perguntaram como fazer isso. O código é bem simples e até já publicamos aqui, mas numa forma simplificada trata-se do mesmo código usado para voltar ao topo da pagina.

A única diferença foi que acrescentamos mais coisas dentro dele, veja abaixo:
<style type="text/css">
<!--
.menufixo img{padding: 5px;display: inline
}
-->
</style>
<div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;"><div class="menufixo">
<a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>
<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Dicas para Blogs","http://www.dicasparablogs.com.br",""); }
else { window.external.AddFavorite("http://www.dicasparablogs.com.br","Dicas para Blogs"); } }
</script><a href="javascript:void(favoritos());" title="Adicione aos Favoritos"><img border="0" src="IMAGEM FAVORITOS"/></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&loc=pt_BR" target="_blank" title="Atualizações por Email"><img border="0" src="IMAGEM ATUALIZAÇÕES POR EMAIL"/></a>
<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a>
<a href="http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html" target="_blank" title="Dicas para Blogs"><img border="0" src="http://img16.imageshack.us/img16/9066/iconeblogh.gif"/></a>
</div></div>

Coloque esse código pela pagina layout, adicionar gadget, html/javascript, não importa o lugar da pagina, ele aparecerá sempre no canto inferior direito do seu blog. O começo do código não precisa de alterações, mas se quiser pode modificar:
padding:5px – distancia entre as imagens
background-color:#FFFFFF; - cor de fundo
border-left:1px solid #000000; - borda lateral
border-top:1px solid #000000; - borda superior

Depois desse trecho são apenas links com imagens como fazemos em qualquer outra parte do blog, antes de colocar no blog faça as alterações necessárias nos trechos em negrito.
Quanto a enviar atualizações por email aqui tem a explicação sobre como fazer isso usando o feedburner.

Deixamos o código apenas com as indicações de onde vão as imagens porque se deixássemos o código pronto, provavelmente quando muitas pessoas começassem usar o código as imagens iriam parar de aparecer porque sites de hospedagem grátis excluem ou bloqueiam imagens acessadas muitas vezes(milhares de vezes por dia, mas isso depende de qual site usa) então é mais seguro e confiável cada um hospedar as imagens.



Clique com o botão direito do mouse sobre cada uma das imagens acima e escolha a opção salvar imagem depois só precisa hospedá-las, recomendamos usar o Imageshack. Colocamos um link para essa postagem no final do código e pedimos para que não retirem isso do código a fim de facilitar que outros blogueiros que gostem da idéia tenham facilidade em encontrar esse código.

Veja também:
Adicionar aos favoritos
Hospedar imagens
Colocar ou modificar bordas

Link para esta página
<a href='http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html'>Fixar botões no canto da pagina</a>

Recomende por E-mail