Hola Taringueros! Antes que nada FELIZ DIA DE LA MUJER!
En esta ocacion les dejo un tutorial de como crear un menu colorido en blogger
Muchos bloggeros se preguntan como crear un menú colorido, es muy fácil y ademas le da alegría a tu blog xDD
Es muy fácil, y lo hacemos sólo con CSS, creamos bloques en los enlaces, de ese modo, toda "la cajita" funciona como enlace; también podrás agregar una descripción corta a cada enlace. En el ejemplo usaré colores de fondo. Funciona en todos los navegadores incluyendo IE6.
Que el menú tenga diferentes colores de fondo
Paso 1. Primero tenemos que tener una sección (para agregar un gadget) y poner ahí el HTML del menú, y lo podemos conseguir de dos formas.
Las dos son muy sencillas, pero voy a explicar sólo una, que consiste en cambiar el número de elementos que se muestran en la cabecera del blog. Para ello, vas a la edición de HTML de la plantilla, y con la ayuda de ctrl F, buscas esta linea de código:
Luego, cambias 1 por 2 y no por yes.
Ojo: Si quieres el menú arriba del título, entonces procura que el gadget quede arriba de éste, y si lo quieres debajo del título, entonces arrástralo cuidando de no ponerlo en la sección del crosscol, ya que esa sección está justo debajo.
Paso 2. Ve a: Plantilla > Personalizar > Avanzado > Añadir CSS, y pones el siguiente CSS, editando los valores según tus gustos y necesidades. Guíate con los comentarios que están entre /*...*/. Al finalizar puedes quitarlos.
Lo que hacemos para que cada enlace tenga diferente color, es crear una clase para cada uno, y ponemos el color de fondo.
Voy a poner en el CSS, los estilos para "cinco enlaces", tú puedes poner los que quieras, y cambiar el nombre de cada clase que resalté de rojo y si lo haces también lo harás en el HTML.
text-align:center;
color:#242424; /*color de fuente*/
white-space:nowrap;
display:block;
height:35px; /*la altura*/
border:1px solid #fff; /*color de borde, cambia el valor por 0 si no quieres borde y que se separe*/
font-weight:bold;
text-decoration:none;
}
/*Estilos de la descripción*/
#menu p{
font-size:11px;
padding:3px 0 0 0;
margin:0;
line-height:9px;
text-align: center;
font-weight: normal;
}
/*enlace 1*/
a.enlace1{
width:120px; /*ancho*/
padding:11px 5px 5px 7px;
margin:0;
background:#c3e6ee; /*color de fondo*/
}
/*enlace 2*/
a.enlace2{
width:135px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#edcc15;
}
/*enlace 3*/
a.enlace3{
width:135px; /*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#e3a1ea;
}
/*enlace 4*/
a.enlace4{
width:145px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#c1ef85;
}
/*enlace 5*/
a.enlace5{
width:125px;
padding:7px 5px 5px 7px;
margin:0;
background:#dbecef;
}
/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}
Luego, guarda lo que agregaste en "Aplicar al blog".
Notas:
Todo el CSS es totalmente válido.
Los valores del padding se leen: arriba, derecha, abajo, izquierda.
Agregamos la descripción usando la etiqueta "p".
Para cambiar los colores puedes busacar tablas de colores en la siguiente pagina:
http://html-color-codes.info/
Paso 3. Finalmente, lo que nos falta es agregar el HTML, y para ello vas a diseño, y en la sección de la cabecera, agregas un gadget con la opción HTML/Javascript, y dentro pones esto:
Sustituye la almohadilla (#), por la dirección web o de la página de tu blog, pones el texto de cada enlace (ENLACE1,2,3...) y donde dice: Lorum Ipsum, escribes la descripción de cada enlace. Separé cada linea del enlace para que la identifiques fácilmente. Al terminar de editarlos puedes quitar la separación.
Y listo ya tienes un menú muy colorido
Variantes
Puedes, crear distintos efectos en el hover, por ejemplo agregar padding, para que se desplace cada enlace, y lo haces en #menu a:hover{, sólo pones:
Eso es todo
En esta ocacion les dejo un tutorial de como crear un menu colorido en blogger
Muchos bloggeros se preguntan como crear un menú colorido, es muy fácil y ademas le da alegría a tu blog xDD
Es muy fácil, y lo hacemos sólo con CSS, creamos bloques en los enlaces, de ese modo, toda "la cajita" funciona como enlace; también podrás agregar una descripción corta a cada enlace. En el ejemplo usaré colores de fondo. Funciona en todos los navegadores incluyendo IE6.
Que el menú tenga diferentes colores de fondo
Paso 1. Primero tenemos que tener una sección (para agregar un gadget) y poner ahí el HTML del menú, y lo podemos conseguir de dos formas.
Las dos son muy sencillas, pero voy a explicar sólo una, que consiste en cambiar el número de elementos que se muestran en la cabecera del blog. Para ello, vas a la edición de HTML de la plantilla, y con la ayuda de ctrl F, buscas esta linea de código:
Luego, cambias 1 por 2 y no por yes.
Ojo: Si quieres el menú arriba del título, entonces procura que el gadget quede arriba de éste, y si lo quieres debajo del título, entonces arrástralo cuidando de no ponerlo en la sección del crosscol, ya que esa sección está justo debajo.
Paso 2. Ve a: Plantilla > Personalizar > Avanzado > Añadir CSS, y pones el siguiente CSS, editando los valores según tus gustos y necesidades. Guíate con los comentarios que están entre /*...*/. Al finalizar puedes quitarlos.
Lo que hacemos para que cada enlace tenga diferente color, es crear una clase para cada uno, y ponemos el color de fondo.
Voy a poner en el CSS, los estilos para "cinco enlaces", tú puedes poner los que quieras, y cambiar el nombre de cada clase que resalté de rojo y si lo haces también lo harás en el HTML.
ul#menu {
width:890px;/*ancho del menú*/
height:50px; /*alto del menú*/
margin:0;
padding:0;
list-style:none;
clear:both;
}
/*los estilos de cada elemento*/
#menu li{
float:left;
padding:0;/*la separación de cada elemento*/
margin:0;
}
/*Los estilos que se aplican a todos los enlaces*/
#menu li a{
font-size:16px;
width:890px;/*ancho del menú*/
height:50px; /*alto del menú*/
margin:0;
padding:0;
list-style:none;
clear:both;
}
/*los estilos de cada elemento*/
#menu li{
float:left;
padding:0;/*la separación de cada elemento*/
margin:0;
}
/*Los estilos que se aplican a todos los enlaces*/
#menu li a{
font-size:16px;
text-align:center;
color:#242424; /*color de fuente*/
white-space:nowrap;
display:block;
height:35px; /*la altura*/
border:1px solid #fff; /*color de borde, cambia el valor por 0 si no quieres borde y que se separe*/
font-weight:bold;
text-decoration:none;
}
/*Estilos de la descripción*/
#menu p{
font-size:11px;
padding:3px 0 0 0;
margin:0;
line-height:9px;
text-align: center;
font-weight: normal;
}
/*enlace 1*/
a.enlace1{
width:120px; /*ancho*/
padding:11px 5px 5px 7px;
margin:0;
background:#c3e6ee; /*color de fondo*/
}
/*enlace 2*/
a.enlace2{
width:135px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#edcc15;
/*color de fondo*/
}
/*enlace 3*/
a.enlace3{
width:135px; /*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#e3a1ea;
/*color de fondo*/
}
/*enlace 4*/
a.enlace4{
width:145px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#c1ef85;
/*color de fondo*/
}
/*enlace 5*/
a.enlace5{
width:125px;
/*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#dbecef;
/*color de fondo*/
}
/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}
Luego, guarda lo que agregaste en "Aplicar al blog".
Notas:
Todo el CSS es totalmente válido.
Los valores del padding se leen: arriba, derecha, abajo, izquierda.
Agregamos la descripción usando la etiqueta "p".
Para cambiar los colores puedes busacar tablas de colores en la siguiente pagina:
http://html-color-codes.info/
Paso 3. Finalmente, lo que nos falta es agregar el HTML, y para ello vas a diseño, y en la sección de la cabecera, agregas un gadget con la opción HTML/Javascript, y dentro pones esto:
<ul id="menu">
<li><a class="enlace1" href="#">ENLACE1<p>Lorum Ipsum</p></a></li>
<li><a class="enlace2" href="#">ENLACE2<p>Lorum Ipsum</p></a></li>
<li><a class="enlace3" href="#">ENLACE3<p>Lorum Ipsum</p></a></li>
<li><a class="enlace4" href="#">ENLACE4<p>Lorum Ipsum</p></a></li>
<li><a class="enlace5" href="#">ENLACE1<p>Lorum Ipsum</p></a></li></ul>
Sustituye la almohadilla (#), por la dirección web o de la página de tu blog, pones el texto de cada enlace (ENLACE1,2,3...) y donde dice: Lorum Ipsum, escribes la descripción de cada enlace. Separé cada linea del enlace para que la identifiques fácilmente. Al terminar de editarlos puedes quitar la separación.
Y listo ya tienes un menú muy colorido
Variantes
Puedes, crear distintos efectos en el hover, por ejemplo agregar padding, para que se desplace cada enlace, y lo haces en #menu a:hover{, sólo pones:
padding-left:20px;/*padding a la izq.*/
ó
padding-right:20px;/*padding a la derecha*/
padding-right:20px;/*padding a la derecha*/
Eso es todo