Menu Expandible ¿Cómo puedo mostrar/ocultar el Menú de la Sidebar? (Modo Peek-a-boo), Classic-Blogger

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}

Links [+/-]


Google News
Edit-Me
Edit-Me

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:

  1. .posthidden {display:none}
  2. .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>:

  1. function expandcollapse (postid) {
  2.    whichpost = document.getElementById(postid);
  3.    if (whichpost.className=="postshown") {
  4.       whichpost.className="posthidden";
  5.    }
  6.    else {
  7.       whichpost.className="postshown";
  8.    }
  9. }

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í:

  1. <a href="expandcollapse('id exclusivo')"><h2 class="sidebar-title">NOMBRE SECCIÓN [+/-]</h2></a>
  2. <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:

  1. <h2 class="sidebar-title"></h2>
  2.   <ul id="recently">
  3.    
  4.         <li>&lt;a href=&quot;"&gt;</a></li>
  5.    
  6.   </ul>

Para Ocultarlo debemos cambiarlo por el siguiente:

  1. <a href="expandcollapse('Post Anteriores')"><h2 class="sidebar-title">Post Anteriores [+/-]</h2></a>
  2. <span class="posthidden" id="Post Anteriores">
  3.    <ul id="recently">
  4.      <li>&lt;a href=&quot;"&gt;</a></li>
  5.    </ul>
  6. </span>

El Menu de Links se representa por el siguiente Código:

  1. <h2 class="sidebar-title"></h2>
  2.   <ul>
  3.         <li><a href="http://news.google.com/">Google News</a></li>
  4.         <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
  5.         <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
  6.   </ul>

Para Ocultarlo debemos cambiarlo por el siguiente:

  1. <a href="expandcollapse('Links')"><h2 class="sidebar-title">Links [+/-]</h2></a>
  2. <span class="posthidden" id="Links">
  3. <ul id="recently">
  4. <li>&lt;a href=&quot;"&gt;</a></li>
  5. </ul>
  6. </span>

El Menu de Archivos se representa por el siguiente código:

  1. <h2 class="sidebar-title"></h2>
  2.   <ul class="archive-list">
  3.      
  4.              <li>&lt;a href=&quot;"&gt;</a></li>
  5.      
  6.   </ul>

Para Ocultarlo debemos cambiarlo por el siguiente:

  1. <a href="expandcollapse('Archivos')"><h2 class="sidebar-title">Archivos[+/-]</h2></a>
  2. <span class="posthidden" id="Archivos">
  3.   <ul class="archive-list">
  4.      
  5.                     <li>&lt;a href=&quot;"&gt;</a></li>
  6.      
  7.   </ul>
  8. </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:
MenuExpandible.JPG

Plantillas Con cambios realizados:
Minima Black (Descargar)
Dots (Descargar)

Artículos Relacionados

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *