domingo, 9 de maio de 2010

Mini Barra de Navegação no Blogger

http://www.clker.com/cliparts/3/b/0/d/12065698671516857163pitr_red_menu_icon_set_2.svg.med.pngVocê ja deve ter visto aquele botão  TOPO DA PAGINA com imagem em alguns blog não? então estou disponibilizando o código aqui pra vocês.A imagem dos botões são pequenas, mas você poderá substituir por outra à sua escolha,procurando ícones .png no google images ou criando seu próprio e hospedar na interner, alguns sites recomendados são imageshack.us ou tinypic.com. =)



 


em Layout - Editar HTML

Procure (ctrl + f) por </body>

Cole o codigo abaixo logo ACIMA dele


<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'/>

Notas

Na parte destacada de
Vermelho coloque a URL do seu blog 
Azul escuro - imagem do botão Atualizar, você pode trocar por outra substituindo a URL
Roxo - imagem do botão Inicio , pode substituir tambem
Verde - imagem do botão Topo da página , pode substituir tambem
Rosa -  imagem do botão Fim da pagina , pode substituir tambem
  

Depois visualize e se estiver tudo bem, salve!




Marcadores: , , , ,

0 Comentários:

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial