Así quedará cualquier menú en nuestra sidebar (barra lateral), una vez que hayamos seguido los pasos, solo hagan click en links, para que vean como se despliega la lista con los links que estan ocultos.
Ejemplo:
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className==”postshown”) { whichpost.className=”posthidden”; }
else { whichpost.className=”postshown”; }
}
.posthidden {display:none}
.postshown {display:inline}
Con la implementación de este menú ahorraremos mucho espacio, no habrán filas interminables de directorios o de links de intercambio. El lector tendrá que pinchar en el [+/-] y listo. Páginas simples se ven mejor, que páginas completamente cargadas de cosas.
Cuando el usuario termine de usar el menú, podrá volver a ocultar el texto. Todo esto sucede en la misma página.
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
Paso 1:
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas.
Copie estas dos líneas en su hoja de estilos:
- .posthidden {display:none}
- .postshown {display:inline}
Osea estas 2 líneas de código deben estar dentro de <style> y </style>
Para la mayoría de las plantillas de blogger, su hoja de estilos suele aparecer en la parte superior de su plantilla, entre los códigos <style> y </style>. Algunas plantillas simplemente hacen referencia a un archivo externo que contiene el style. Si se encuentra en un archivo externo, entonces deberán primero descargarlo, cambiarlo (agregándole las dos líneas mencionadas) y luego volver a subir el archivo a un servidor propio.
Paso 2:
Javascript
Añada el código siguiente a su plantilla, entre <head> y </head>:
- function expandcollapse (postid) {
- whichpost = document.getElementById(postid);
- if (whichpost.className=="postshown") {
- whichpost.className="posthidden";
- }
- else {
- whichpost.className="postshown";
- }
- }
Lo importante del código anterior es que tenemos que darle un nombre exclusivo (id) a cada una de las secciones que necesitemos ocultar.
Paso 3:
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos comenzar a ocultar el menú que necesitemos.
En forma General cada sección que necesitemos ocultar quedará así:
- <a href="expandcollapse('id exclusivo')"><h2 class="sidebar-title">NOMBRE SECCIÓN [+/-]</h2></a>
- <span class="posthidden" id="id exclusivo">LINEAS DE CODIGO QUE VAMOS A OCULTAR</span>
Por ejemplo para la plantilla Minima Black, los Previews Post (Post Anteriores) se representan por estas líneas de código:
- <h2 class="sidebar-title"></h2>
- <ul id="recently">
- <li><a href=""></a></li>
- </ul>
Para Ocultarlo debemos cambiarlo por el siguiente:
- <a href="expandcollapse('Post Anteriores')"><h2 class="sidebar-title">Post Anteriores [+/-]</h2></a>
- <span class="posthidden" id="Post Anteriores">
- <ul id="recently">
- <li><a href=""></a></li>
- </ul>
- </span>
El Menu de Links se representa por el siguiente Código:
- <h2 class="sidebar-title"></h2>
- <ul>
- <li><a href="http://news.google.com/">Google News</a></li>
- <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
- <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
- </ul>
Para Ocultarlo debemos cambiarlo por el siguiente:
- <a href="expandcollapse('Links')"><h2 class="sidebar-title">Links [+/-]</h2></a>
- <span class="posthidden" id="Links">
- <ul id="recently">
- <li><a href=""></a></li>
- </ul>
- </span>
El Menu de Archivos se representa por el siguiente código:
- <h2 class="sidebar-title"></h2>
- <ul class="archive-list">
- <li><a href=""></a></li>
- </ul>
Para Ocultarlo debemos cambiarlo por el siguiente:
- <a href="expandcollapse('Archivos')"><h2 class="sidebar-title">Archivos[+/-]</h2></a>
- <span class="posthidden" id="Archivos">
- <ul class="archive-list">
- <li><a href=""></a></li>
- </ul>
- </span>
Hay dos partes importantes de este código:
1.- El empaquetador <span> que rodea todas las líneas de código que se quieren ocultar.
2.- El id que nos sirve para identificar lo que se oculta. Este id se repite en 2 partes: en el link (<a href=”javascript:expandcollapse(‘Archivos’)”>) y en el span (<span class=”posthidden” id=”Archivos”>)
Pueden ocultar lo que quieran imágenes, banners, cualquier cosa que este en la plantilla.
Resultado:
Plantillas Con cambios realizados:
Minima Black (Descargar)
Dots (Descargar)
Artículos Relacionados
