Twitter Delicious Facebook Digg Stumbleupon Favorites More

Mini Barra de Navegação no Blogger

Mais uma ótima dica! Você ja deve ter visto alguns blogs com uma pequena setinha ou barra de navegação fixa na tela no canto inferior direito do browser. Mesmo que você role a página, ela não sai de lá.

Encontrei o código para essa barrinha no Blog do Lenon e decidi postar aqui no Dicas Plugins também.

Para colocá-la no seu blog muito é simples. No código HTML do seu template, procure por:

</body>
</html>

E cole este código antes do </body> e inclua a URL do seu blog na macação em vermelho:

<style type='text/css'>
<!--
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
-->
</style>
<div id='mininavbar'><a href='#'
onClick='window.location.reload()' title='Atualizar
página'><img
src='http://soulouko.googlepages.com/refresh.png'/></a><a href='http://URL_do_seu_blog.blogspot.com/'
title='Página principal'><img
src='http://soulouko.googlepages.com/house.png'/></a><a
href='#' title='Ir para o topo da página'><img
src='http://soulouko.googlepages.com/topopg.png'/></a><a
href='#finalpg' title='Ir para o final da
página'><img
src='http://soulouko.googlepages.com/down.png'/></a></div>
<a name='finalpg'/>

 

Aumentando ou trocando as Imagens:

E, se você tiver outras ícones para colocar na barra ao invés dessas imagens, basta trocar a URL das imagens acima pelas da suas imagens. Utiliza o Tinypic para hospedar suas imagens caso estejam no seu PC.

No código do Blog do Lenon as imagens ficam muito, mas muito pequenas. Então vou mostrar como aumentá-ls um pouco, utilizando suas próprias imagens.

A barra de navegação possui quatro imagens. Então, insira height="17px" logo após "<img..." em cada uma delas como no exemplo abaixo. Pronto!

<img height='17px' src= 'http://URL-da-sua-imagem-ícone' /></a><a href='#' title='Ir para o topo da página'>

Qualquer dúvida, pergunte nos comentários.

3 comentários:

M. Loureiro disse...

Adoro o teu blog, tem ajudado muuuito...
Só q não consegui colocar a barra.Ou melhor na hora até deu certo, mas qdo fui reabrir o blog: http://manuloureiro.blogspot.com/, estava desse jeito( 4 pontinhos dentro de 4 quadrados, no fim da pag).
Me ajuuuuda...
Desde já agradeço
Abraços

robertoke disse...

Falaaa Wilian,
muito bom o hack... funcionou certinho. Irei usar as suas imagens até enjoar....
Pena que o M.Loureiro acima não conseguiu, se soubesse daria uma mão...
Ótima dica. Parabéns.

Abraços,

Blog de Gisoalves, A paz de Deus esteja com nós* disse...

gostei da setra de navegação, no meu ficou azul, mais como minha imagem de fundo é azul, fica tudo parecido, queria mudar a cor da setra!!!

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates