Menu y submenus

CÓMO PONER MENÚS Y SUBMENÚS EN BLOGGER

A muchos nos pasa que en nuestro blog de blogger queremos poner un menú con submenús para nuestras páginas, aquí te dejo un menú con submenús para que pongas en tu blog.

1

Lo primero que tienes que hacer es copiar el código de abajo y pegarlo antes de la etiqueta </head> o ir a plantilla y a la opción personalizar, cuando ya estés en personalizar busca avanzado y allí ve a la opción de css y pega el código, al código le puedes cambiar los colores. Ej. color #e7e5e5 .
  
<style type="text/css">#cssmenu2 ul {margin: 0; padding: 7px 6px 0; background: #7d7d7d url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}

#cssmenu2 li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#cssmenu2 a,
#cssmenu2 a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;  text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#cssmenu2 a:hover {background: #000; color: #fff;}
#cssmenu2 .active a, 
#cssmenu2 li:hover > a {background: #666 url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
#cssmenu2 ul ul li:hover a,
#cssmenu2 li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
#cssmenu2 ul ul a:hover {background: #8f8f8f url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#cssmenu2 li:hover > ul {display: block;}
#cssmenu2 ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#cssmenu2 ul ul li {float: none; margin: 0; padding: 3px; }
#cssmenu2 ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
#cssmenu2 ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
* html #cssmenu2  ul {height: 1%;}</style>

2

Ahora solo tienes que ir diseño y añade un gadget de html/javascript, dentro de ese gadget pon el siguiente código, puedes cambiar el nombre de las pestañas, duplicarlas para tener más,... etc.

<div id="cssmenu2">

<ul>

<li><a href="http://LA_URL_PRINCIPAL/index.html">Nombre</a></li>

<li class="has-sub "><a href="LA_URL_A_CATEGORÍA1">Nombre</a>

<ul>

<li><a href="LA_URL_A_SUBCATEGORÍA1">Nombre</a></li>

<li><a href="LA_URL_A_SUBCATEGORÍA2">Nombre</a></li>

</ul>

</li>

<li><a href="LA_URL_A_CATEGORÍA2">Nombre</a></li>

<li><a href="LA_URL_A_CATEGORÍA3">Nombre</a></li>

</ul>

Se trata de un menú de la web cssmenumaker.com