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

Barra Lateral, Barra Lateral, Blogger, Menú, Personaliza Código, Plataformas, Trucos Script/Plugin/Widget, , , , , ,

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:

< View plain text >
css

  1. .posthidden {display:none}
  2. .postshown {display:inline}

Osea estas 2 líneas de código deben estar dentro de <b:skin><![CDATA[/* y ]]></b:skin>

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 <b:skin><![CDATA[/* y ]]></b:skin>. 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>:

< View plain text >
js

  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. Primero debemos idenficar la sidebar en la plantilla, para esto buscamos el siguiente código:

< View plain text >
HTML

  1. <div id='sidebar-wrapper'>
  2.         <b class='sidebar' id='sidebar'>

Debajo de estas 2 líneas se encuetra ubicado todo el código que corresponde al menú, como los archivos, links y perfil.

En forma General cada sección que necesitemos ocultar quedará así:

< View plain text >
HTML

  1. <b id='LinkList1' title='VINCULOS'>
  2. <b id='main'>
  3.  
  4. <!--COMIENZO NOMBRE SECCIÓN -->
  5. <a href='expandcollapse("Vinculos")'><b><h2></h2></b></a>
  6. <!--FIN NOMBRE SECCIÓN -->
  7.  
  8. <span class='posthidden' id='Vinculos'>
  9. <!--COMIENZO LINEAS DE CODIGO QUE VAMOS A OCULTAR-->
  10.  <div class='widget-content'>
  11.    <ul>
  12.      <b>
  13.        <li><a></a></li>
  14.      </b>
  15.    </ul>
  16.    <b />
  17.  </div>
  18. <!--FIN LINEAS DE CODIGO QUE VAMOS A OCULTAR-->
  19. </span>
  20.  
  21. </b>
  22. </b>

Por ejemplo para la plantilla Minima Black, los Links se representan por estas líneas de código:

< View plain text >
HTML

  1. <b id='LinkList1' title='Vinculos'>
  2. <b id='main'>
  3.  
  4. <b><h2></h2></b>
  5.  <div class='widget-content'>
  6.    <ul>
  7.      <b>
  8.        <li><a></a></li>
  9.      </b>
  10.    </ul>
  11.    <b />
  12.  </div>
  13. </b>
  14. </b>

Para Ocultarlo debemos cambiarlo por el siguiente:

< View plain text >
HTML

  1. <b id='LinkList1' title='VINCULOS'>
  2. <b id='main'>
  3. <a href='expandcollapse("Vinculos")'><b><h2></h2></b></a>
  4. <span class='posthidden' id='Vinculos'>
  5.  <div class='widget-content'>
  6.    <ul>
  7.      <b>
  8.        <li><a></a></li>
  9.      </b>
  10.    </ul>
  11.    <b />
  12.  </div>
  13. </span>
  14. </b>
  15. </b>

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(‘Vinculos’)”>) y en el span (<span class=”posthidden” id=”Vinculos”>)

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)

Artículos Relacionados

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.

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 *