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.
Que dica maravilhosa, parabéns. Adorei, vou tentar no meu!
ResponderExcluirRealmente funcionou, muito obrigada!
ResponderExcluirGostei muito e é bem discreto, sem contar, útil :D
Fico feliz que tenha gostado da dica e que ela tenha te ajudado.
ResponderExcluirConfira 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
Caso queira participar, te convido para um meme :D
ResponderExcluirIndiquei este post no Post Legal :D
ResponderExcluirAbraços!
http://plaidy.blogspot.com/2009/07/barra-pratica-e-discreta-indicando-seu.html
Com certeza, amei a dica e vou por no layout novo, kkkk. Sumiu. Bom, isso eu sabia q ia acontecer...:D
ResponderExcluirÓtima dica. Muito útil e bonito.
ResponderExcluirValeu!
@plaidy,obrigado pelos comentários, minha amiga. ;)
ResponderExcluir@ifb que bom que gostou. Volte sempre.