Como crear un menú acordeón en Blogger

Blogger es una interesante herramienta porque nos permite personalizar y editar el theme o plantilla que tengamos instalado a nuestro gusto. Por ejemplo, si buscamos una plantilla gratuita o Premium para nuestro blogspot es posible que no la encontremos tal y como la deseamos, pero podemos encontrar una similar a nuestro gusto y agregar nuevas funciones y características hasta conseguir lo que buscamos.

Para esto no es precisamente necesario tener gran conocimientos de programación, ya que gracias a GadgetsBlogger puedes seguir las instrucciones paso a paso y fáciles de implementar para lograr nuestros resultados. En este caso de ejemplo les mostraremos como agregar un elegante e interesante menú estilo acordeón basado en categorías o etiquetas.



Lo que hará el menú es mostrar la categoría principal y cuando pasamos el ratón sobre el enlace o el menú mostrará subcategorías o también podemos agregar enlaces a entradas o posts dentro de esta categoría.

Instalación del menú

El código a agregar a nuestro blog contiene 2 partes: una hoja de estilo que la agregaremos antes de cerrar la etiqueta head y otro que irá dentro del gadget HTML en el sidebar.

El primero código será la hoja de estilo que la puedes agregar de diferentes formas, tanto dentro del mismo gadget HTML con la etiqueta STYLE, o antes del head de tu sitio o simplemente subir el código a un archivo en dropbox por ejemplo y haces un llamado al fichero como se explica en este sitio, esto hace que el código cargue más rápido.

Lo que haremos es buscar este código:
]]></b:skin>
Y antes agregamos el estilo:
/* Codigo Menu acordeon INICIO*/
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;    
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
/* Codigo Menu acordeon FIN*/
Ahora buscamos el cierre de head:
</head>
Y antes agregamos este código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>

Ahora podemos guardar la plantilla. Si todo lo has hecho correctamente no tendrás errores de sintaxis. Dirigite a la opción de “Diseño” en tu panel y agrega un gadget, en este caso un “HTML/Javascript” y debes de pegar el código que mostrará el menu con las categorías y submenús.
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>            
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Plantillas</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Tutoriales</a></li>
                    </ul></li></ul></li>

  
    <li class="accoi-menu">
        
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>

                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Tutoriales</a></li>                
                 </ul></li></ul></li>   

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >SEO</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Optimizar blog</a></li>
    <li><a href="#">Buscadores</a></li>
    <li><a href="#">Palabras claves</a></li>
    <li><a href="#">Herramientas</a></li>
         </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Siguenos en</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Google Plus</a></li>
    <li><a href="#">Youtube</a></li>                  
                 </ul></li></ul></li>


 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >Contactanos</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >Disclaimer</a></li>
    <li><a href="#">Privacidad</a></li>
     <li><a href="#">Acerca de </a></li>
              </ul></li></ul></li>

    </ul>

Guardamos los cambios y listo! Ahora podrás ver inmediatamente el menú en acción en tu blog. Si quieres ver los resultados, visita el blog demo. Recuerda que los colores los puedes personalizar según tu propio theme así como la fuente del menu, etc. 

Si quieres recibir mas tutoriales y gadgets directamente en tu correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.


Compartelo!:

4 comentarios:

  1. Muchas gracias por la ayuda, hice tal cual y me quedo muy bien, pero tengo una consulta, como hago para que al hacer clik en el menú acordeón, tenga relación con el link que deseo???

    ResponderEliminar
  2. Hola, me parecen muy interesantes tus trucos y herramientas. Buen trabajo.
    Tengo una duda con el tema del menú acordeón, ¿se ve en la versión móvil de la plantilla básica? Es que una hice uno desplegable y en la versión móvil no me salia.
    Muchas gracias

    ResponderEliminar
  3. Anónimo12:47

    Buenas, primero decir que el menu desplegable esta genial y segundo muchas gracias
    Sin embargo, me ha quedado una duda...¿Como puedo hacer que la "Palabra" que se despliegue tambien me redirija a otra URL?
    He intentado cambiar el # por una URL y nada...
    Muchas gracias de antebrazo ^^

    ResponderEliminar
  4. Hola, ante todo muchas gracias!
    La consulta es que cuando agrego el gadget html, se ve el menú perfecto pero me queda muy desplazado hacia la derecha, quisiera modificar o corregir la posición dejando menos margen a la izquierda..., independientemente del ancho del menú que si se como hacerlo mas pequeño o de mayor tamaño, ¿no sé si me explico?
    Espero tu respuesta
    Nuevamente MUCHAS GRACIAS!

    ResponderEliminar

- Antes de hacer una consulta (pregunta), por favor utiliza el Buscador.

- Por favor, cualquier otra pregunta que tengas, la puedes hacer en la entrada correspondiente.

- Haremos todo lo posible por responderte o acusarte recibo antes de 24 horas. A veces, podremos hacerlo, otras veces no será posible, y nos tomará un poco más… ten paciencia.

- Los comentarios que a mi criterio se escriban solo para dejar un enlace o un link seran eliminados.

- ¡Muchas gracias por comentar o por preguntar!