Si has intentado cargar una nueva plantilla para el blog en Blogger de un sitio distinto del oficial, puede que te haya ocurrido que la barra de navegación desaparece. Que no se muestra en esa nueva plantilla. En realidad, lo que hacen muchos de los diseñadores, es que la ocultan para que la estética de ese diseño concreto no sea obstaculizada por la barra de Blogger que no admite otra modificación que la elección de un color entre unos pocos.
La eliminación de esta barra puede ayudar en el diseño pero entorpece la edición del blog. Para poder editar, ya no tenemos un acceso directo desde el propio blog y hay que buscar caminos un poco enrevesados para acceder a la edición de nuevas entradas o de la configuración general del blog.
Vamos a intentar resolver este problema.
Como hemos comentado lo que hacen los diseñadores ajenos a Blogger es, normalmente, ocultar esta barra de navegación. Para volverla a mostrar, tenemos que encontrar este fragmento de código dentro de la parte de la cabecera (entre <head> y </head>)
Mostrar.
Guardamos los cambios en la plantilla y comprobamos que la barra de navegación vuelve a aparecer.
Ahora, ya puestos, vamos a hacer que esta barra aparezca o desaparezca según el deseo del visitante.
Para ello, colocamos este fragmento de código de nuevo en la parte de la cabeza, entre <head> y </head>
Ocultar.
Lo que hacemos ahora es colocar este otro fragmento de código en la columna lateral del blog para que sea como un botón que muestra/oculta esta barra de navegación.
Mostrar/ocultar.
En este blog se ha añadido este código en la parte superior de la columna lateral izquierda. Pulsa sobre él para ver su funcionamiento.
La eliminación de esta barra puede ayudar en el diseño pero entorpece la edición del blog. Para poder editar, ya no tenemos un acceso directo desde el propio blog y hay que buscar caminos un poco enrevesados para acceder a la edición de nuevas entradas o de la configuración general del blog.
Vamos a intentar resolver este problema.
Como hemos comentado lo que hacen los diseñadores ajenos a Blogger es, normalmente, ocultar esta barra de navegación. Para volverla a mostrar, tenemos que encontrar este fragmento de código dentro de la parte de la cabecera (entre <head> y </head>)
Mostrar.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Una vez lo hayamos encontrado lo eliminamos.Guardamos los cambios en la plantilla y comprobamos que la barra de navegación vuelve a aparecer.
Ahora, ya puestos, vamos a hacer que esta barra aparezca o desaparezca según el deseo del visitante.
Para ello, colocamos este fragmento de código de nuevo en la parte de la cabeza, entre <head> y </head>
Ocultar.
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
Este fragmento lo que hace es esconder momentáneamente la barra de navegación.var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
Lo que hacemos ahora es colocar este otro fragmento de código en la columna lateral del blog para que sea como un botón que muestra/oculta esta barra de navegación.
Mostrar/ocultar.
<span style="cursor:pointer;" onclick="ShowHideNav();">
Mostrar/ocultar la barra de navegación
<a style="visibility:hidden;" href="http://derya-webresource.blogspot.com"></a>
</span>
Dentro de Diseño > Elementos de página > Añadir un gadget que tiene que ser del tipo HTML/JavascritMostrar/ocultar la barra de navegación
<a style="visibility:hidden;" href="http://derya-webresource.blogspot.com"></a>
</span>
En este blog se ha añadido este código en la parte superior de la columna lateral izquierda. Pulsa sobre él para ver su funcionamiento.
No hay comentarios:
Publicar un comentario