Navbar retrátil do Blogger que funciona no IE

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.

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.