Assina meu Feed ai!
Google
 


19 outubro 2008

Navbar retrátil do Blogger que funciona no IE

navbar Já faz um tempo que eu não publico uma dica ou hack do Blogger então, nesse post apresento uma adaptação que fiz no Hack da Navbar retrátil para que ela funcione no IE7.

O Hack original é do Blog Bloggeratto, onde é possível vê-lo em ação, e foi dica do Usuário Compulsivo na Lista Blogspot Brasil, vamos a ele:

Primeiro não se esqueça de fazer um backup do seu template antes de mexer, depois localize as definições do CSS do seu template e adicione as linhas a seguir no final, ou seja, antes das tags ]]></b:skin> </head>

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Então fica:#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
]]></b:skin>
</head>

Até aqui o hack funciona, mas só no Firefox e afins, no IE7 a Navbar fica invisível porque esse vesgo só suporta a propriedade Hover em Links :(, mas para variar, o Javascript vem salvar a pátria. Vamos ao POG, digo ao script.

Insira as linhas a seguir antes da tag </body>:
<!--[if IE]>
<script>

function MakeVisible(v){

if (v){
document.getElementById('navbar-iframe').filters.alpha.opacity = 100;
}else{
document.getElementById('navbar-iframe').filters.alpha.opacity = 0;
}
}

document.getElementById("navbar-iframe").onmouseover = function(){MakeVisible(true);};

document.getElementById("navbar-iframe").onmouseout = function(){MakeVisible(false);};

</script>
<![endif]-->

A tag condicional <!--[if IE]> faz com que o script só rode no IE. Depois disso basta salvar e pronto.

ATENÇÃO: Apesar de acreditar que esse script funciona em qualquer versão do Internet Explorer, eu só testei no IE7 e nem pretendo testar em ultra versão. Se você ainda usa o IE6, faça um favor para humanidade: Atualize para o IE7, ou melhor ainda, use FIREFOX.

BlogspotBrasil3

Agora um momento jabá.

A Lista Blogspot Brasil está muito legal, lá você acha dicas como essa e discussões muito legais sobre a plataforma Blogger.

Se você tem um blog da plataforma clique na imagem e inscreva-se, mas não esqueça de informar a url do seu blog para ter sua participação aprovada.

Até mais.

6 comments:

Michael disse...

Cara excelente dica e excelente blog...vou testa-lá aki...vlw!!!

Malcomtux disse...

Muito obrigado Michael! Qualquer coisa é só falar.

Cláudio Renato disse...

Muito bom amigo. Testei no IE 6 e deu tudo certo. Apesar de odiar o IE6 não podemos nos esquecer dos usuários leigos que o usam.
Eu estou quebrando a cabeça aqui pra descobrir pq no IE6 meu blog estoura barra horizontal.
Valeu!

Malcomtux disse...

Suspeitei desde o principio. Obrigado por testar Cláudio e bem-vindo grupo Blogspot Brasil.

Johnny Rox disse...

Foi você que fez esse logotipo? Ficou muito bom.

Malcomtux disse...

Não, Não Johnny. Foi um usuário do grupo (não lembro quem) o arquivo está disponibilizado lá!