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

Lo que aremos con este Gadget es mostrar una barra de herramientas a nuestro gusto. si sabes modificarlo lo lograras lucir de una forma spectacular.. Tambien podemos Cambiarle de colar Aquellas Cosas que queremos ..

PORimero Buscamos:

]]></b:skin>

Y antes agregamos el estilo:

Ahora buscamos el cierre de head:

</head>

Y antes agregamos este código:

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>

Como crear un menú acordeón en Blogger

Related Post