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:

Yara Cristina 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 ||

Yaman 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

Fernanda Carolina B. disse...

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

Liah Sá 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

Alba (Only 4 Teens) 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

#JuliaaCristy xxx disse...

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

Meia noite e quinze 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

luan disse...

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

Yara Cristina 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

Yara Cristina disse...

amiga , ce num acredita entra no msn agora HUSAUHSAHUSA

luan 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

daniele - blog sweet pop 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 S 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

Brenna Araújo 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/