Para todos aquellos que querais modificar la apariencia de vuestro blog en blogger, y personalizarlo un poco, aqui teneis una ayuda, para mostrar o para ocultar la barra de blogger, la llamada navbar.
- Vamos a "DISEÑO"
- Pulsamos en "Edición de HTML"
- Buscamos en el código dónde aparezca: <head>
- Despues de esta etiqueta, añadimos el siguiente código para quitar la barra:
<style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>
Si lo que queremos es ocultarla, entonces hacemos lo siguiente:
- Vamos a "DISEÑO"
- Pulsamos en "Edición de HTML"
- Buscamos en el código dónde aparezca: <body>
- Antes de esta etiqueta añadimos el siguiente código:
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}
Y si lo que queremos es que esté oculta pero que se muestre al pasar el ratón por encima, hacemos lo siguiente:
- Vamos a "DISEÑO"
- Pulsamos en "Edición de HTML"
- Buscamos en el código dónde aparezca: </head>
- Antes de esta etiqueta añadimos el siguiente código:
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>
Nota: si ya hemos instalado previamente alguna vez un código con script.aculo.us sólo deberemos copiar esta parte del código anterior:
<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>
No hay comentarios:
Publicar un comentario