Primero entra a tu cuenta de blogger y anda a la parte de diseño del blog. Una vez ahí vas a apretar en una de las cajas "Agregar Gadget", dentro de las opciones encontrarás uno que dice HTML como se muestra en la siguiente captura.
Luego tienes que pegar dentro del Gadget el siguiente código y hacerle click en guardar.
------------------------------------------------------------------------
<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->
-------------------------------------------------------
Ahora tendrás tu barra invisible y puedes editarla en "Diseño" "Editar Barra de Navegación" y elegir entre las opciones que se muestran a continuación, a mi me gusta la trasparente, así no ensucia tanto el diseño de tu blog.
No hay comentarios: