lunes, 2 de septiembre de 2019

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Ăș.


No hay comentarios.:

Publicar un comentario

DĂ©jame tu comentario o consulta.