【Tutoriales】Menú con submenús para tu blog

¡Hola a todos y bienvenidos una vez más a mi blog! ( ͡° ͜ʖ ͡°) Como habéis leído en el titulo hoy os traigo un tutorial que os vendrá muy bien a todos los que estáis modificando plantillas y queréis un menú más "profesional" para que vuestro blog sea más accesible para vuestros seguidores.

Diseño > Añadir un gadget > HTML y pegáis esto:

<style type="text/css"> * { margin:0px; padding:0px; } #header { margin:auto; width:650px; font-family:Verdana, Helvetica, sans-serif; } ul, ol { list-style:none; } .nav > li { float:left; } .nav li a { background: #BFEBFD; border-radius: 0px; border: 2px dashed #8ECBE3; padding: 3px; color:#fff; text-decoration:none; padding:10px 12px; display:block; } .nav li a:hover { background-color:#84BBD1; } .nav li ul { display:none; position:absolute; min-width:140px; } .nav li:hover > ul { display:block; } .nav li ul li { position:relative; } .nav li ul li ul { right:-140px; top:0px; } </style> <br /><div id="header"><ul class="nav"><li><a href="https://www.blogger.com/LINK">Inicio</a></li><li><a href="https://www.blogger.com/LINK">Secciones</a> <ul><li><a href="https://www.blogger.com/LINK">Submenu1</a></li><li><a href="https://www.blogger.com/LINK">Submenu2</a></li><li><a href="https://www.blogger.com/LINK">Submenu3</a></li><li><a href="https://www.blogger.com/LINK">Submenu4</a> </li></ul></li><li><a href="https://www.blogger.com/LINK">Contacto</a> <ul><li><a href="https://www.blogger.com/LINK">Submenu1</a></li><li><a href="https://www.blogger.com/LINK">Submenu2</a></li><li><a href="https://www.blogger.com/LINK">Submenu3</a></li><li><a href="https://www.blogger.com/LINK">Submenu4</a></li></ul></li><li><a href="https://www.blogger.com/LINK">Afiliar</a></li><li><a href="https://www.blogger.com/LINK">Sobre mi</a></li><li><a href="https://www.blogger.com/LINK">Sobre el blog</a></li><li><a href="https://www.blogger.com/LINK">F.Q.A</a></li></ul></div>

Si queréis moverlo a alguna parte del blog lo que tenéis que hacer es copiar el código del menú y pegarlo aquí:

<div style="position: absolute; margin-top: -150px; right: 10px;">AQUÍ EL CÓDIGO DEL MENÚ</div>

-150: Si aumentas subira mas arriba el gadget y si disminuyes el numero bajara el gadget

10: Si aumentas se ira mas a la izquierda y si disminuyes se ira mas a la derecha

Y nada, espero que os haya servido de utilidad este tutorial. No olvidéis dar créditos si lo utilizáis ñwñ Dejadme en los comentarios que os parece, y si tenéis alguna duda también. O si os es más fácil al correo del blog: Attackonblog@gmail.com. ¡Hasta otra!