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:


Links [+/-]

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:

COPIA EL CÓDIGO
.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>:

COPIA EL CÓDIGO
<script type="text/Javascript">
function expandcollapse (postid) {
   whichpost = document.getElementById(postid);
   if (whichpost.className=="postshown") {
      whichpost.className="posthidden";
   }
   else {
      whichpost.className="postshown";
   }
}</script>

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

COPIA EL CÓDIGO
<a href="javascript: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:

COPIA EL CÓDIGO
<h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
  <ul id="recently">
    <BloggerPreviousItems>
        <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
    </BloggerPreviousItems>
  </ul>

Para Ocultarlo debemos cambiarlo por el siguiente:

COPIA EL CÓDIGO
<a href="javascript:expandcollapse('Post Anteriores')"><h2 class="sidebar-title">Post Anteriores [+/-]</h2></a>
<span class="posthidden" id="Post Anteriores">
   <ul id="recently"><BloggerPreviousItems>
     <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
   </BloggerPreviousItems></ul>
</span>

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

COPIA EL CÓDIGO
<MainOrArchivePage>
  <h2 class="sidebar-title"><$I18NLinks$></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>
</MainOrArchivePage>

Para Ocultarlo debemos cambiarlo por el siguiente:

COPIA EL CÓDIGO
<a href="javascript:expandcollapse('Links')"><h2 class="sidebar-title">Links [+/-]</h2></a>
<span class="posthidden" id="Links">
<ul id="recently"><BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems></ul>
</span>

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

COPIA EL CÓDIGO
<MainOrArchivePage>
  <h2 class="sidebar-title"><$I18NArchives$></h2>
  <ul class="archive-list">
      <BloggerArchives>
             <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
      </BloggerArchives>
  </ul>
</MainOrArchivePage>

Para Ocultarlo debemos cambiarlo por el siguiente:

COPIA EL CÓDIGO
<MainOrArchivePage>
  <a href="javascript:expandcollapse('Archivos')"><h2 class="sidebar-title">Archivos[+/-]</h2></a>
<span class="posthidden" id="Archivos">
  <ul class="archive-list">
      <BloggerArchives>
                    <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
      </BloggerArchives>
  </ul>
</span>
</MainOrArchivePage>

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)


Si este Post te ayudó recuerda votar por el blog En esta Página
1 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 101 votes, average: 2 out of 10 (1 votos, promedio: 2 de 10)
Loading ... Loading ...

Post Relacionados
Usar Dreamweaver en tu blog">Usar Dreamweaver en tu blog
Como Agregar un Menu de Opciones">Como Agregar un Menu de Opciones
Mas Juegos para el Blog">Mas Juegos para el Blog
Bejeweled en tu Blog">Bejeweled en tu Blog
Un link Para Hacer tu Web una Pagina de Inicio de tus Visitas">Un link Para Hacer tu Web una Pagina de Inicio de tus Visitas


Post al Azar:




Blogalaxia Tags:                  

Imprime este Post Imprime este Post
Envía este Post Envía este Post