Como colocar menu no topo do blog

como-colocar-menu-no-topo-do-blog

     Para aqueles que estavam com muitas saudades, voltamos com mais um tutorial que muitos blogueiros e leitores vem querendo saber. Como colocar um menu com efeito hover no topo do blog? É um tutorial bastante fácil que requer bastante atenção, nada de um bicho de sete cabeças. Mas Jeff, o que preciso fazer para ter um menu assim como o seu, pois estou louco (a) para colocar ele no meu blog. Calma gente, já vou ensinar. Veja o exemplo abaixo e vamos lá!


  1. Faça login no Blogger, clique em “Design” depois “Editar HTML” .
  2. Aperte o atalho do seu teclao Ctrl+F e em seguida procure <body> e logo abaixo cole o seguinte código:
<div class="bar_top">
<div class="bar_topd">
 <ul class="menu_barrax">
  <li><a href="#" title="Início">Início</a></li>
  <li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>
                <li><a href="http://LINK_AQUI" title="About">Sobre</a></li>
 </ul></div></div>
Obs.: Caso o modelo que você usa não possua o código <body>, procure por <header> e cole o código acima.

   3. Agora procure por  ]]></b:skin>  e acima dele cole o código abaixo.
/*---- MENU NO TOPO COM EFEITO HOVER BY.: ECLETICUS.COM -------- */
.bar_top {
width: 100%;
height: 32px;
background: none;
Border-bottom: 10px none #F4D998;
}

.bar_top img {
background: #F5C4A1;
height: 22px;
float: right;
margin: 5px 7px 0 0;
opacity:0.8;
filter:alpha(opacity=80);
}
.bar_top img:hover {
opacity:1.0;
filter:alpha(opacity=100);
}
.menu_barrax {
float: left;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #F4D998;
margin: 0 0 0 3px;
padding: 10px 0px 0px 0px;
}
.menu_barrax li a{
background: #F4D9A8;
padding: 10px;
color: #B1937E;
text-decoration: none;
}

.menu_barrax li a:hover {
text-decoration: none;
color: #FFF;
background: #F5C4A1;
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
} 
/*---- MENU NO TOPO COM EFEITO HOVER BY.: ECLETICUS.COM -------- */
ATENÇÃO!

1.1 O código destacado em VERMELHO se refere a cor do fundo do menu.
1.2 O código destacado em AZUL se refere a cor do nome que fica no menu.
1.3 O código destacado em ROXO se refere a cor de fundo quando passado o mouse por cima do menu, dado com o nome efeito hover.
1.4 O código destacado de LARANJA se refere a cor do nome quando colocado o mouse em cima do menu.

Obs.: Não remova os créditos e nem mecha em qualquer outro código, caso contrário poderá danificar todo o código do menu.

     Caso você queira adicionar novos itens no menu, basta adicionar o código abaixo no código que foi citado na primeira parte antes de </ul>, em seguida é só editar o nome e o link da página correspondente .
<li><a href="http://LINK_DA_PAGINA" title="NOME DA PÁGINA">PÁGINA</a></li>
     Então é isso gente, espero que tenham gostado e que saibam aproveitar bem esse tutorial, mas é claro dando os devidos créditos.

Postado por: Jeff Bolton
bolton Capricorniano, 17 anos. Me vejo como uma pessoa muito empolgada, volátil e impulsiva, garoto natural, que é rápido para tomar decisões, apesar de nem sempre serem corretas. Não muito corajoso mas bem aventureiro, alguém que irá tentar qualquer coisa uma vez, alguém que gosta de aventuras.@ecletiicus

27 comentários:

  1. que top esse efeito eu amei no próximo designer irei colocar em meu blog
    blognew-girl.blogspot.com.br

    ResponderExcluir
  2. Obrigada por postar esse tutorial, acho tão lindo esse menu simples acima do banner <3. Quando eu reformular meu layout talvez eu insira (:

    ResponderExcluir
  3. Acho esse menu um arraso. Tentei mas não deu certo Jeff, no meu HTML não têm a tag body :/

    http://world-cutest.blogspot.com/

    ResponderExcluir
  4. O codigo está incorreto! algo deu errado, porque não tá funcionando no meu blog de jeito nenhum!!?!

    http://apsmass.blogspot.com/

    ResponderExcluir
  5. AAhh, legal você ensinar esse tutorial! É bem útil e assim que tu colocou ele aqui, eu achei liiindo demais e super diferenciado dos demais menus! XD

    Beeijos
    www.blogmymemories.com

    ResponderExcluir
  6. Adorei o tutorial, vou usar no próximo design do PS ^^

    Beijos,
    http://placestyle.blogspot.com.br/

    ResponderExcluir
  7. Gostei do tutorial, muito útil :) vlw!

    http://help-adolecentro.blogspot.com.br/

    ResponderExcluir
  8. OH GOD *----------*
    FINALMENTE ACHEI ESSE TUTORIAL ~SHORA~
    #emocionada HUSAHUSHAUS
    bsous,
    http://ahasagata.blogspot.com

    ResponderExcluir
  9. Jeff no primeiro código você esqueceu de fechar as tag "div" ;)
    ótimo tutorial, farei no meu proximo layout.
    beijos, www.entaodezesseis.net.tc

    ResponderExcluir
    Respostas
    1. Verdade, obrigado por lembrar.. Tinha me esquecido >.<

      Excluir
  10. Eu fiz de uma maneira diferente e bem mais simples, mas não deixa de ser bom e útil o tutorial ;)

    simplesinha.blogspot.com

    ResponderExcluir
  11. Muito legal. Super fácil!
    Irei usar no próximo!

    ResponderExcluir
  12. como inserir o indereco das red social nos icon.....

    ResponderExcluir
  13. Você pode ensinar como colocar os icones das redes sociais? Obrigada!

    ResponderExcluir
  14. como faco para voltar o que era antes sem isso??

    ResponderExcluir
    Respostas
    1. Anderson, é só seguir o mesmo tutorial, só que retirando os códigos.

      Excluir
  15. NO MEU NÃO TEM A TAG BODY USO O MODELO TRAVEL , NESSE MODELO QUE EU USO TEM COMO EU APLICAR ESSE CODIGO USANDO OUTRA TAG?

    ResponderExcluir
    Respostas
    1. Luana, acho que tem algo parecido, se eu não me engano é <body, coisa do tipo, tenta ai.

      Excluir
  16. no meu nao ta certo pq o blogger mudou o html a agora nao tem mais esse nomes oq eu faço?

    ResponderExcluir
    Respostas
    1. Liana, continua do mesmo jeito, só mudou a plataforma, mas os códigos são os mesmos.

      Excluir
  17. O menu fica centralizado? Queria botar poucas coisas, só o basico. Tem algum código pra isso?
    "Inicio" "O blog" "A Blogueira". Pra no menu de baixo dividir em categorias..

    ResponderExcluir
  18. Oi amei! Só que o menu não fica encostado no topo, como subir o menu?

    ResponderExcluir