Cursos 24 Horas - Cursos 100% Online com Certificado

Mini Navbar para Blogger

1 Comentário Autor : Notícia e blog 28 janeiro 2010
Navbar
Está Mini Navbar é muito interessante pois ela possui várias funções úteis, como, atualizar a página, ir para o topo e ir para cima. E ainda possui um link para o seu feed o que torna desnecessário o uso da navbar do blogger, possui também a possibilidade de se adicionar a comunidade do Orkut, além disso sua instalação é muito simples veja:

Instalando a Mini Navbar

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Editar HTML"
3)Procure pelo código abaixo, utilizando as teclas "CTRL" e "F":</body>Acima do código anterior adicione o seguinte:<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>
<script language='JavaScript'>
    function cima() {
    window.scrollBy(0,20); // velocidade para cima
    scrolldelay = setTimeout(&#39;cima()&#39;,100); // tempo da rolagem
    }

    function baixo() {
    window.scrollBy(0,-20); // velocidade para baixo
    scrolldelay = setTimeout(&#39;baixo()&#39;,100); // tempo da rolagem
    }

    function stopScroll() {
    clearTimeout(scrolldelay); // para o rolar ao tirar o cursor do link
    }

    </script>
<div id='mininavbar'>
<a href='#' onClick='window.location.reload()' title='Atualizar página'>
<img src='http://imgur.com/mJT3c.png'/></a>
<a href='http://www.noticiaeblog.com/' title='Página principal'>
<img src='http://imgur.com/i9I74.png'/></a>
<a href='http://feeds2.feedburner.com/Noticiaeblog' title='Feed'>
<img src='http://imgur.com/Xzva4.png'/></a>
<a href='http://www.orkut.com.br/Main#Community?cmm=93902414' title='Orkut'>
<img height='16px' src='http://imgur.com/ooCIc.gif' width='16px'/></a>
<a href='' onmouseout='stopScroll()' onmouseover='baixo()' title='Ir para o topo da página'>
<img src='http://imgur.com/uYmkQ.png'/></a>
<a href='' onmouseout='stopScroll()' onmouseover='cima()' title='Ir para o final da página'>
<img src='http://imgur.com/BaWzD.png'/>
</a>
</div>
<a name='finalpg'/>
4)Substitua o código em verde pela url do seu blog, em vermelho pela url da comunidade,em laranja pela url do feed;
5)Salve as alterações e visualize. O resultado será este abaixo:
mini navbar

    1 Comentário

    cabeção disse...
    4 de março de 2010 07:55 #

    muito legal essa mini "navbar" só gostaria de saber se é possivel aumentar um pouco o tamanho dela.

    como eu uso um background colorido no meu blog ela fica camuflada com o fundo "(http://clanrockbrasil.blogspot.com")

    visitem -me ...

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.