Este es uno de mis trucos favoritos el cual aprendí en mi desempeño bloguístico. Pueden apreciar el resultado del útil código que les mostrare a continuación en la parte superior de nuestro blog, en la barra de blogger que es invisible.
La verdad es que hay otras maneras de desaparecer completamente la barra pero en lo personal encuentro que es súper útil dejarla, además así también nos podemos evitar problemas.
Vamos con los pasos a seguir...
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.
 |
| click para agrandar |
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.
 |
| click para agrandar |
Espero que les fuera de utilidad, nos vemos en otra oportunidad ;D
Gracias, gracias! Con tus súper consejos mi proto-blog está quedando cada día más bello.
ResponderEliminar( y espero que estés tomándote más de 3 horas de sueño diarias, entre todo lo que haces no sé cuando duermes)
jajajaj no duermo xD, es broma, no se y eso que siento que hay ene cosas que me gustaría aun por hacer
ResponderEliminarQue bueno que te sirvió
Your are awesome with your tutorials. I have learned a lot and using your methods is so easy. Thank you
ResponderEliminarTue eres fantastica con tus tutoreales. He aprendido mucho y usar tus metodos es muy facil. Gracias.
Me pone feliz leer eso xD
ResponderEliminarMil gracias fue de muchisima utilidad, hace un par de meses trate de eliminarla de otro forma mediante la plantilla html y fue un caboom... para mi blog.
ResponderEliminarMUy util...