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.

Posted in: Códigos/Scripts,Intermediário,Tutorial