Tutorial: Ocultar a navbar e mostrá-la ao passar o mouse

6 de jul de 2011

Hi people! Quero pedir desculpas pelo tempo que passei sem postar, sabe quando parece que as coisas que eram pra acontecer ao longo de um mês inteiro acontecem em dias seguidos? Pois é, minha semana foi assim :s
-Ta Ani, para de ficar enrolando e volta logo pro post!

Ok, hoje eu vou postar um tutorial muito simples e útil, sabe aquela barra lá no topo do blog onde você faz o login, cria uma nova postagem e tal? Que ela não é muito agradável aos olhos todo mundo sabe, mas muitos tem  
um certo receio de tirá-la por poder dificultar o acesso aos "atalhos" dela. Confesso que eu sofria disso kkk' mas hoje eu estava pesquisando e achei um tutorial ensinando a ocultar e mostrá-la novamente quando passado o mouse no lugar onde ela fica, lembrando que os créditos são todos do blog Bloggando na web.

Clique em "Leia Mais" para ver o post completo.

Então, vamos começar?

1. Abra o seu blog, faça o login e vá em Design  > Editar HTML

2. Pressione "Ctrl+F" para abrir a caixa de pesquisa e procure pelo seguinte código:



      ]]></b:skin>                                              


3. Logo acima deste código, adicione este outro código:
                                                                                     

#navbar-iframe {
opacity:0;
}

#navbar-iframe:hover {
opacity:1;
}


4. Visualize e se estiver tudo certo salve (:

Viu só? Simples, fácil e rápido. Espero que tenham gostado tanto quanto eu *-*

Ah, só um aviso, o código não funciona no Internet Explorer ):

26 comentários:

  1. Oii

    Adorei seu blog

    tô seguindo

    segue de volta???

    http://meuryss.blogspot.com/

    Bjo

    ResponderExcluir
  2. heey flor, foi um tuto muito útil, obg, seguindo também, adorei,o blog (literalmente), seguindo também, passa lá http://meublogblogdadanii.blogspot.com/, visite e deixe uma blogueira feliz!

    ResponderExcluir
  3. Acho q o meu ta dando erooo na visualizaçãoo....o código funciona do mozilla firefox? ahh, visite o meu blog, é www.happy-charllote.blogspot.com

    ResponderExcluir
  4. Deu super certo !!

    http://www.pipocaatualizada.blogspot.com/

    ResponderExcluir
  5. Não deu certo e eu fiz tudo direitinho!!!!!

    ResponderExcluir
  6. Não deu certo (de novo!)

    ResponderExcluir
  7. Geronda, tem uns templates que não dão certo mesmo! Principlamente os editados :/

    ResponderExcluir
  8. Adorei esse tuto! Estou usando :**

    http://blog-da-mands.blogspot.com <- blog novo!

    ResponderExcluir
  9. Amei seu blog, muito muito maravilhoso *-*
    Seus tutoriais tem me ajudado muito, parabéns!
    Seguindo, é claro. Retribui?
    http://twofriendsonediary.blogspot.com/

    ResponderExcluir
  10. Consegui ebaa obriga flor :)
    amei o tutorial
    Segui meu blog se puder flor?
    http://modaecompaniaup.blogspot.com.br/

    ResponderExcluir
  11. amei demais isso! seu blog é um amor *-*

    beijinhos :*

    ResponderExcluir
  12. ótimo *-*
    Bjs!
    http://bolinhosdemorangos.blogspot.com.br/

    ResponderExcluir
  13. AAh funcionou *u* Muuito obrigada !

    robertadream.blogspot.com.br/

    ResponderExcluir
  14. Sofria o mesmo que você haha, agora isso mudou *-*
    adorei o tutorial.

    http://our-teen-dream.blogspot.com.br/

    ResponderExcluir
  15. realmente perfeito esse tutorial (risos) ♥
    http://umaflordodeserto.blogspot.com.br/

    ResponderExcluir
  16. ?E Como colocar uma imagem para quando passar o mouse aparecer?

    ResponderExcluir
    Respostas
    1. Vê esse tutorial aqui:

      goimagines.blogspot.com.br/2011/12/menu-em-imagem-com-estado-hover.html

      Excluir
  17. FICOU PERFEITO *.*
    OBRIGADA!!!!!
    =D

    xoxo,
    Daniela

    ResponderExcluir
  18. Puxa, é impressionante como tudo dá certinho! Você é muito inteligente. Obrigada mesmo!

    ResponderExcluir
  19. Amei o tutorial foi muito util ^.^

    ResponderExcluir
  20. Ameii o tutorial muito legal!

    http://nandawebsluarcmf.blogspot.com.br/

    ResponderExcluir
  21. Hahahahahahaha Consegui! Obrigado :')

    ResponderExcluir
  22. Obrigado você me ajudou de mais,parabéns pelo seu blog lindinha está uma fofura,Beijos...

    http://agarotadebatomroxo.blogspot.com.br/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.