En esta ocasión conoceremos como instalar
un bonito menú horizontal en nuestro blog con lo que se verá más profesional.
Nota: En el caso que el usuario utilice Plantillas del Diseñador de Blogger, deberá realizar los pasos siguientes, pero si no es así, omitirlos.
Nos vamos a Plantilla / Personalizar / Editar HTML:
Una vez dentro, ubicar lo siguiente:
Atención; para encontrarlo más rápido pulsar Ctrl+F y en el cuadro que aparece introducir las palabras a buscar y luego dar clic en Enter.
Atención; para encontrarlo más rápido pulsar Ctrl+F y en el cuadro que aparece introducir las palabras a buscar y luego dar clic en Enter.
Ahora borramos todo lo que esta
marcado en color amarillo
Ahora buscamos esto:
Procedemos a eliminar todos los códigos que
se encuentren adentro (entre Tabs y Headings).
Ahora introducimos en el campo en
blanco, (en el lugar donde eliminamos los códigos), lo siguiente:
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer
{z-index:1;}
Guardamos la Plantilla.
Ahora procedemos a instalar nuestro menú
horizontal.
Para comenzar la instalación del menú nos vamos a Plantilla / Personalizar / Editar HTML:
Buscamos lo siguiente:
Una vez encontrado]]></b:skin> en la parte de arriba o sea antes, pegamos lo
que sigue:
/* 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/AVvXsEgBOLuGnxXIAxT4oQUdQYDyVwryaP44tadXqY80zr4pNQipe0EGKi2AyhAbRgkSW8-CmtqCOJMi8JUlNIZWAngwj9g4cykSJUQUKhs9-EgHae3H3CZtviGsESSU6wkw92mhPGK0UMbQu-E/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 */
}
Guardamos la Plantilla.
Enseguida nos vamos a Diseño / Añadir un Gadget / HTML/JavaScript:
En la ventana que aparece, pegamos lo
siguiente:
<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>
Si queremos personalizar los colores,
estos se encuentran en la parte que está en Azul y Rojo. También tenemos en color Verde las URL y
los títulos de las pestañas, mismos que debemos editar.
Si la barra del menú, no queda centrada,
debemos poner lo siguiente para sustituir todo lo que se encuentra en color Café:
#toppic
{
margin-left: -30px !important;
}
El menú se plegara al lado izquierdo y después
poner otro valor en width:940px para
que se ajuste al ancho de la plantilla (si ese fuera el caso).
Eso es todo y gracias por entrar.
Pero… ¡espere! No se vaya sin dejarnos
un comentario.
