23 de julho de 2009

Como inserir uma mini barra de navegação no Blogger

Mini barra de navegação
Mini barra personalizada com ícones para o Feed, Twitter, Contato e Topo da página

Com a instalação de uma mini barra de navegação, como esta que temos aqui no blog (Dê uma olhadinha no canto inferior direito da tela), você oferece ao seu visitante mais uma forma de navegação interna no seu blog e também dá uma realçada na aparência do template. Ela é muito simples de ser instalada e o resultado final é muito bom.

Colocar essa mini barra é muito simples, bastando para isso, adicionar um código no template do seu blog e assim desfrutar desse recurso.

Como sempre recomendo para que vocês nunca esqueçam, antes de começar alteração ou instalação de algum código novo, faça o backup seu template atual.

Entre em Layout -> Editar Html.

Com a ajuda do Ctrl + F encontre </body> e cole antes dele o código abaixo.

<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='endereço do seu feed' title='Assine nosso Feed'><img src=' http://img403.imageshack.us/img403/8783/minifeed.png'/></a> <a href='endereço do seu Twitter' title='Siga-me no Twitter'><img src=' http://img530.imageshack.us/img530/4108/minitwitter.png '/></a> <a href='endereço do formulário de contato' title='Entre em contato'><img src=' http://img169.imageshack.us/img169/7320/minicontato.gif'/></a><a href='#' title='Topo da página'><img src=' http://img401.imageshack.us/img401/2894/iconup.gif '/></a>
</div>

Os trechos em vermelho devem ser trocados pelos dados do seu blog.

Pronto. Visualize e se tudo estiver certo, salve.

Esta dica eu encontrei no blog do Lenon e fiz algumas modificações. Como podem perceber, os dados entre <div id='mininavbar'> e </div> podem ser motividados de acordo com a sua criatividade e/ou necessidade.

8 comentários:

  1. Que dica maravilhosa, parabéns. Adorei, vou tentar no meu!

    ResponderExcluir
  2. Realmente funcionou, muito obrigada!
    Gostei muito e é bem discreto, sem contar, útil :D

    ResponderExcluir
  3. Fico feliz que tenha gostado da dica e que ela tenha te ajudado.

    Confira as outras dicas que estão aqui no blog e fique de olho nas próximas que virão por ai.

    Grande abraço.

    Idenaldo Rodrigues

    ResponderExcluir
  4. Caso queira participar, te convido para um meme :D

    ResponderExcluir
  5. Indiquei este post no Post Legal :D
    Abraços!

    http://plaidy.blogspot.com/2009/07/barra-pratica-e-discreta-indicando-seu.html

    ResponderExcluir
  6. Com certeza, amei a dica e vou por no layout novo, kkkk. Sumiu. Bom, isso eu sabia q ia acontecer...:D

    ResponderExcluir
  7. Ótima dica. Muito útil e bonito.
    Valeu!

    ResponderExcluir
  8. @plaidy,obrigado pelos comentários, minha amiga. ;)

    @ifb que bom que gostou. Volte sempre.

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.