Como colocar un submenú en Blogger

Una de las pocas cosas en que Blogger no es amigable es en la creación de Subemenús, con los Gadgets que vienen en la plataforma puedes crear Menús de un solo nivel utilizando 2 opciones la de Paginas y Enlaces, sin embargo si deseas crear Menús de varios niveles no es posible.

Por eso te comparto la solución siguiente que desarrolle a partir de un código que vi en línea en este enlace, el que te comparto está corregido.

Copia este código, y pegalo dentro de un GADGET de HTML en tu sitio web, la ubicación de este GADGET definirá en que parte del sitio se va mostrar el Menú:

<style>

#cssmenu2 li {margin: 0 5px; padding: 0 0 8px; float: left; position: top; 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: 50px; left: 50;

#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>

<div id="cssmenu2">

<ul>

<li><a href="http://LA_URL_PRINCIPAL/index.html">Home</a></li>
<li class="has-sub "><a href="LA_URL_A_CATEGORÍA1">Elemento1</a>

<ul>

<li><a href="LA_URL_A_SUBCATEGORÍA1">Subcategoria 1</a></li>
<li><a href="LA_URL_A_SUBCATEGORÍA2">Subcategoria 2</a></li>

</ul>

</li>

<li><a href="LA_URL_A_CATEGORÍA2">Elemento 2</a>

<ul>

<li><a href="LA_URL_A_SUBCATEGORÍA3">Subcategoria 3</a></li>
<li><a href="LA_URL_A_SUBCATEGORÍA4">Subcategoria 4</a></li>

</ul>

</li>

<li><a href="LA_URL_A_Contacto">Contacto</a></li>

</ul>

</div>

Cuando hayas echo esto deberás hacer los siguientes cambios para personalizar tu Menú:

Esta parte corresponde a la URL del Home.

Esta corresponde a la primera pestaña que tiene submenú.

Estos son los elementos que son parte de la primera pestaña.

Esta corresponde a la primera pestaña que tiene submenú.

Estos son los elementos que son parte de la primera pestaña.

Esta es la URL de una pestaña que no tiene submenú.

Si necesitas varias pestañas sin submenú añade en el orden que deseas mostrar el siguiente código:

<li><a href="LA_URL_A_PestanaSIN">Pestana Sin Submenú</a></li>

Si necesitas varias pestañas con submenú añade en el orden que deseas mostrar el siguiente código:

<li><a href="LA_URL_A_PestanaCON">Elemento con Submenu</a>

<ul>

<li><a href="LA_URL_A_SUBCATEGORÍA1">Subcategoria </a></li>
<li><a href="LA_URL_A_SUBCATEGORÍA1">Subcategoria </a></li>
</ul>

</li>

De esta manera puedes darle un Look más sofisticado a tu sitio web diseñado en Blogger con la función de desplegar pestañas en tu Menú.