6 de dez. de 2011

Ocultar a navbar do blog e mostrar ao passar o mouse

Tumblr_lvsmeyuciq1qm22v5o1_500_large
Se quiser conhecer um blog lindo, que tem uma dona super simpática, visite o Moda Amazing!
Fazia algum tempo que eu estava procurando um tutorial como esse. Eu, sinceramente, não gostava que a navbar ficasse aparecendo em meu blog, achava meio feio. Mas hoje eu achei um tutorial que oculta a navbar, mas quando você passar o mouse no lugar onde ela deveria ficar, ela aparece de novo com um efeito suave. Podem ver em meu blog mesmo, já que estou usando o código aqui! E esse é o blog que eu achei o tutorial. Vamos logo aprender?


Vá em Design > Editar HTML > Marque a caixinha Espandir modelos de widget > Tecle Ctrl + F > Procure por:
]]></b:skin>
Acima do que você achou, cole esse código:
/* ----- Efeito de esconder e mostrar a navbar ----- */
#navbar-iframe {
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#navbar-iframe:hover {
opacity:1;
Depois de ter feito isso, é só clicar em Salvar modelo. Simples, não é? Se quiser deixar a navbar normal, sem efeito nenhum, é só apagar o código que você colou. Espero que tenham gostado, kiss!

18 comentários:

Christy Lee disse...

Adorei este tutorial , mas eu já exclui mesmo sabe. Eu não gosto de navbar :3

Grande beijo , sucesso!
Moda Amazing || Mundo sem regras || Portal For You ||

Chiquissimas // Oficial disse...

Ahh, eu adorei esse tuto, nem sabia que tinha, nunca vi em lugar algum, adorei a foto também.
Floor, eu preciso do seu email, me passa tá, beijos
chiquissimas.blogspot.com

F.C.B. disse...

oi flor vim aqui fazer pedido de parceria
estarei aguardando sua resposta bjs
http://prasempreviva.blogspot.com/

lia disse...

Eu também prefiro excluir, mas achei bem legal esse tuto *_*

Infelizmente não tem mais vagas para afiliados lá no CB =(

www.bombadecereja.tk

Tweeny :3 disse...

Adorei o tutorial! Muito bom (:
Vou tentar fazer;
Parece ser fácil.
Beijoos ;
Alba ^^
Only4Teens-s2.blogspot.com

Newsdayoff disse...

Muito bom mesmo em! Tem promoção no meu blog, participa?

http://newsdayoff.tk/

Arianny disse...

Adorei o blog! *-*
Adorei o tutorial!
bjs
charmofpink.blogspot.com

Julia Cristy disse...

Oi fofa , amei o blog Já estou seguindo .. segue de volta ?
ninas-top-stardoll.blogspot.com

Fernanda Zucolotto disse...

Nunca tinha ouvido falar desse tutorial, bem diferente e criativo né, amei!
Eu não gosto da navbar então já exclui ela toda, mas pretendo fazer o tutorial logo.
Obrigada pela visita!

Beijo! Fernanda.
www.meianoiteequinze.blogspot.com

Anônimo disse...

Adorei o tutorial!
www.fofocasda-web.blogspot.com

Christy Lee disse...

Oi amiga !
Adorei este tutorial , não gosto muito de navbar mas quem sabe eu não use ela né?
E tem post novo lá no Moda Amazing não deixe de conferir ,
te espero lá !
Grande Beijo , sucesso.
Moda Amazing || Portal For You

Camila Carvalho disse...

Ótimos tutoriais, seu blog é um arraso! Sucesso sempre.
Beijos

garotambulante.blogspot.com

Christy Lee disse...

amiga , ce num acredita entra no msn agora HUSAUHSAHUSA

Anônimo disse...

Olá eu sou do At the base of Fame e já que o Amanzing Fame acabou você agora aceita ser editora de laá?

Camila Carvalho disse...

Já estou seguindo aqui também, quando tiver post novo avisa pra eu voltar novamente =)
Beijos,

garotambulante.blogspot.com

I'm a cat disse...

Muito legal o tuto, mas eu já sabia dele :)

Não sabia como colocar a opacidade, ao passar o mouse, com um efeito "devagar"...


http://meublogblogdadanii.blogspot.com/

Isabela Godoy disse...

Esse tuto é bom mesmo :D Dani, você tem msn? Queria mt falar com você!
Obrigada pela visita, <3
Tem post novo lá no blog *-*
Ah flor, criei um blog novo, se você pudesse passar lá e deixar sua opinião eu amaria ♥ É só clicar aqui e visitar (:
Bjs!
Tendências Teens || Encomendas

Anônimo disse...

oiiiiiiiiiii, diwã ss2s2s2s22s, tipo eu lançei outro concurso no meu blog e muito, muito, muito, muito melhor que tal participar? será um prazer ver você participando HAUHUAHUAA *-*

kisses de morango *o*
http://saladadefrutasbr.blogspot.com/