MENÚ HORIZONTAL PARA BLOGGER DE 2 COLUMNAS

MENÚ HORIZONTAL PARA BLOGGER DE 2 COLUMNAS .

Hoy tenemos un menú para tu blog de blogger con estilo bastante especial el mismo es desplegable

 y fácil de incorporar un detalle exclusivo es que en sus subpestañas se despliega en dos columnas 

lo cual hace que la casilla no se extienda tanto para esta subpestaña.

Lo primero será ingresar a Edición HTML allí buscamos el siguiente fragmento ]]></b:skin> y justo antes pegaremos lo siguiente:  

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

  Un clic en “Editar HTML”

  Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

 Busca el siguiente código

]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcY2acCAZHwdR-6yeFqicFnOlYsfBoCMk4_WW_OszbcjoTAwGcweNafv8Mx-MEHo7MpJzLIsGgtjuHIkR0FAFuIrKdFIxQfec8Z6D16mZRhI3NAgMLT1ncJ8uSZYbLHS4GREgzIB6tGY/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}

Ahora vamos a Diseño y añadimos un Gadget HTML/Javascript en dicho espacio pegaremos el siguiente código:

Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:




 Un clic en “Diseño”

 Clic en “Añadir un gadget”

 Busca el widget que dice “HTML-Javascript” y ábrelo

 Coloca el siguiente codigo en el interior

<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Despues de haber insertado el código, un clic en  "Guardar"

Y listo hasta aquí nuestro menú deberá estar funcionando perfectamente en nuestro blog.

Explicación colores:

- En el primer código, lo que tenemos en naranja, son los comentarios frente al parámetro CSS que puedes modificara a tu gusto.

- Lo que tenemos en verde esmeralda es donde irá el link o URL al cuál llevará dicho sección del menú ¡Fácil!

- Lo que tenemos en color Rojo es el nombre de la pestaña el cuál llevará. 

Fecha de la Publicación; 08-08-2019

 Fuente; blogginred

 Publicado por;