MENÚ HORIZONTAL DESPLEGABLE DE DOS COLUMNAS PARA BLOGGER

MENÚ HORIZONTAL DESPLEGABLE DE DOS COLUMNAS PARA BLOGGERL.

Este menú pertenece a la plantilla Johny Joss, es un menú horizontal en el que sus subpestañas se muestran en dos columnas y que además está hecho con CSS, sin nada de scripts.

La "ventaja" por así decirlo, es que las subpestañas al acomodarse en dos columnas no quedan muy largas, así que se verán ordenadas y con menos espacio a lo largo. Puedes ver un ejemplo aquí mismo:

1. 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:

1 Un clic en “Plantilla”

                                                                           

2 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, 

                                                                               

3 Busca el siguiente código

]]></b:skin>

4 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/AVvXsEj3tDPxxrdaA2sDQbllBmKTyzjmIE9YagHHfQvyHIiuWOyEXNAqyX-6hKx2YXN7KP6yTERozQE96fGNBUQJNyscwqI6RqTAGL9wqlqVQ51OPn4RUU_pnv5g_hIBu4GUnjtXAdh8cHQLq5I/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 */
}

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

1-Un clic en “Diseño”

                                                                     

2-Clic en “Añadir un gadget”

                                                                 

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

                                                                             

4-Coloca el siguiente codigo en el interior

                                                                         

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

                                                                           

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

3Cambia las URLs de los enlaces y de las pestañas donde se indica.

Si quisieras agregar más pestañas entonces añade antes del:
 </ul> en color azul una línea como esta:
<li><a href='URL del enlace'>Otra pestaña</a></li>
Y si quisieras agregar una pestaña con subpestañas entonces agrega esto:

<li><a class='trigger' href='#'>Otra pestaña</a>
<ul>
<li><a href='URL del enlace'>Pestaña 1.1</a></li>
<li><a href='URL del enlace'>Pestaña 1.2</a></li>
<li><a href='URL del enlace'>Pestaña 1.3</a></li>
<li><a href='URL del enlace'>Pestaña 1.4</a></li>
<li><a href='URL del enlace'>Pestaña 1.5</a></li>
<li><a href='URL del enlace'>Pestaña 1.6</a></li>
</ul>
</li>

En el primer código verás en las anotaciones en color verde el área de lo que se puede personalizar.
El color de fondo está hecho con gradientes CSS, #317FB8 es el color más claro y #385D96 el color más oscuro.
Si quisieras que las subpestañas se muestren en columnas de 3 entonces cambia el valor del

/* Ancho del contenedor de las subpestañas */ por 450px

Cada pestaña tiene un ancho de 150px (ver la anotación en verde), por lo que si quisieras hacerlo más ancho tendrás que cambiar también el ancho del contenedor de las subpestañas, de lo contrario se mostrarán en una columna nada más.

 Fecha de la Publicación; 23-07-2019

 Fuente; Ciudad Blogger

 Publicado por;