MÁS VARIACIONES EN MENÚS

CÓMO PONER ICONOS EN LAS PESTAÑAS DEL MENÚ DE PÁGINAS

Muchas veces sentimos la necesidad de añadir iconos a los enlaces para identificar de una mejor manera el tipo de contenido al que dirige dicho enlace. En la mayoría de los menús esto no es problema pues basta con añadir el código de la imagen antes del nombre de la pestaña, pero con el gadget de Páginas se dificulta un poco ya que el código del gadget no es el tradicional de un menú HTML sino que contiene una serie de códigos propios de Blogger, así que añadir imágenes -diferentes- directamente en el HTML es imposible.

Pero eso no significa que no podamos buscar formas alternas de hacerlo, y es justo lo que haremos en esta entrada, vamos a ver cómo poner un ícono diferente en cada pestaña del menú de Páginas, y para ello usaremos CSS, específicamente los selectores :nth-child() y ::before
De esta manera conseguiremos que cada una de las pestañas de nuestro gadget de Páginas tenga un ícono diferente antes del nombre de la pestaña.

Conseguir lo anterior es mucho más fácil de lo que se piensa. Sólo tienes que entrar a Plantilla | Edición de HTML y añadir antes de ]]></b:skin> lo siguiente:

#PageList1 li:nth-child(1):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(2):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(3):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(4):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

En estos estilos CSS verás unos números, cada número representa cada pestaña de tu menú, siendo que el 1 es la primera pestaña, el 2 la segunda, etc. Toma en cuenta que la primera pestaña habitualmente es la Página Principal, así que la segunda pestaña pertenece a la primera página de tu menú.

En el código deberás cambiar la URL de la imagen donde se indica en color rojo.

La distancia entre el ícono y el texto se modifica en padding-right.

Con top podrás controlar la distancia desde arriba, esto es para que puedas alinear la imagen verticalmente. Yo he puesto que el ícono se desplace 3px desde arriba, pero puede variar según el tamaño del ícono que pongas, ahí deberás jugar con el valor de top incluso pudiendo usar un valor negativo para subir la imagen, por ejemplo -3px

El código es para las primeras cuatro pestañas de tu menú, si tuvieras más pestañas entonces sólo añade un trozo de código como este por cada pestaña a la que le quieras agregar un icono.

#PageList1 li:nth-child(5):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

Por cada código que agregues deberás cambiar el número 5 por el correspondiente: 6, 7, 8, etc.

Así de fácil y sencillo podrás personalizar más el gadget de Páginas usando iconos que ayuden al reconocimiento visual de las pestañas.

CÓMO PERSONALIZAR EL MENÚ DE BLOGGER.

En blogger puedes  cambiar y modificar el menú  para que quede mejor integrado en el diseño de tu blog de una forma muy sencilla.

1. Vamos a Plantilla y haz click en el botón de Personalizar
2. En el menú de la izquierda elige la opción Avanzado
3. Ahora busca las opciones Texto de las pestañas ( para cambiar el color del texto, la tipografía y el tamaño de la letra de tu menú) y Fondo de las pestañas para elegir el color de fondo de tu menú.

Si quieres que no aparezcan las lineas divisorias entre cada una de las opciones del menú vamos a ir a: Avanzado /Añadir CSS y ahora tienes que copiar y pegar la linea de código de abajo en el espacio blanco que te aparece a la derecha (ver foto abajo):

.tabs-inner .widget li a, .tabs-inner .section:first-child ul, .tabs-inner .widget ul {
   border:none;
}

 Foto ejemplo de menú con lineas divisorias y sin lineas divisorias:

Para terminar guarda los cambios, tienes que hacer click en Aplicar al blog y listo ya tienes tu menú personalizado en blogger.

PERSONALIZAR MENU PESTAÑAS

1.- Creamos las páginas para poder personalizarlas.

Páginas --> Página Nueva --> Página en Blanco

2.- Podemos escribir cualquier cosa para la prueba y la publicamos.

3.- Ahora seleccionamos Mostrar --> Pestañas Principales.

MUY IMPORTANTE: Pinchar en Guardar Disposición, arriba a la derecha, para que Blogger guarde los cambios de nuestro menú de páginas.

ACTUALIZACIÓN: La forma de crear/editar páginas en Blogger se ha actualizado, puedes ver la nueva forma de hacerlo en el siguiente enlace:

Cambios en las páginas de Blogger

Ahora mismo se vería así:

Ya tenemos nuestro menú de páginas listo para personalizar.

4.- Vamos a nuestra plantilla HTML, pinchamos en cualquier parte dentro de la caja de código y pulsamos: Control + F. Se abrirá el buscador interno.

Buscamos:

/* Tabs
----------------------------------------------- */

El código que veremos debajo, es el de nuestro menú de páginas. Será similar a éste:

Vamos a aplicarle formato directamente a la plantilla, personalmente me gusta más que el Diseñador de Plantillas de Blogger y tiene muchas más posibilidades.

Todos los símbolos $ que ves, son los que pueden personalizarse desde el Diseñador de Plantillas, cuando aparece $, es porque es un dato aleatorio, por decirlo de alguna manera.

5.- Primero vamos a centrar nuestro menú, añadiendo al final de este código:

/* Centrar Páginas */
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Justo antes de:

/* Columns
----------------------------------------------- */

Así:

Si seleccionamos Vista Previa, vemos que nuestras páginas ya aparecen en el centro:

Guardamos los cambios antes de seguir.

6.- Vamos a personalizar el color, tipo de letra y los bordes de nuestro menú.

Buscamos esta parte del código dentro de Tabs.

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}

Ejemplo

Para conseguir un borde rosa alrededor de nuestra barra del menú, cambiaremos el código anterior por éste:

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #F78181; /* Borde superior de la barra del menú */
border-left: 1px solid #F78181; /* Borde izquierdo de la barra del menú */
border-right: 1px solid #F78181; /* Borde derecho de la barra del menú */
border-bottom: 1px solid #F78181; /* Borde inferior de la barra del menú */
}

Border-top: Borde superior.
Border-left: Borde izquierdo.
Border-right: Borde derecho.
Y hemos añadido: Border-bottom: borde inferior.

Puedes ver los diferentes tipos de bordes que puedes usar en esta entrada:

Bordes y Colores en HTML

7.- FONDO Y MARGENES:

Seguimos editando nuestro código:

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

Y lo sustituimos por:

.tabs-inner .widget ul {
background: #CEE3F6 none repeat-x scroll 0 -800px; /* Color de fondo de la barra */
_background-image: none;
border-bottom: 0px solid #dddddd;
margin-top: 0; /* Margen superior de la barra del menú */
margin-left: -30px; /* Margen izquierdo de la barra del menú */
margin-right: -30px; /* Margen derecho de la barra del menú */
}

El resultado:

Variando el número de pixels de los margenes, podemos mover nuestro menú, por ejemplo:

margin-left: 100px;
margin-right: -30px;

Resultado:

8.- LETRAS Y COLORES:

Código a personalizar de nuestro código Tabs:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font); 
  color: $(tabs.text.color); 

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}


Y lo cambiamos por:

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;
font: normal normal 15px 'Rock Salt', Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #000000; /* Color de la letra */
border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
border-right: 0px solid #dddddd; /* Borde derecho de la celda */
}

Resultado:

Puedes instalar una fuente de Google Fonts para los títulos de las páginas de tu menú tal y como vimos en esta entrada:

Cambiar el tipo de letra de los títulos de las entradas del Blog

Hasta el paso 13. Una vez hayamos instalado la nueva fuente, sustituiremos el tipo de letra que tenemos en nuestro código, por la que acabamos de añadir.

Por ejemplo:

font: normal normal 15px 'Patrick Hand SC', Trebuchet, Verdana, sans-serif; /* Tipo de letra */

Resultado:

Podemos aumentar el tamaño:

font: normal normal 25px 'Patrick Hand SC', Trebuchet, Verdana, sans-serif; /* Tipo de letra */

Resultado:

Si te has fijado, han desaparecido los separadores entre las diferentes páginas, eso lo hemos conseguido gracias a la última parte de este código con el que estamos trabajando ahora:

border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
border-right: 0px solid #dddddd; /* Borde derecho de la celda */

Si quieres mantenerlas o aplicarles un formato y/o color diferente, puedes hacerlo de la misma manera que seleccionaste los bordes para tu menú.

9.- EFECTO HOVER:

Vamos a modificar la última parte de nuestro código Tabs:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Lo reemplazamos por:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff; /* Color de la letra al pasar el cursor */
background-color: #F78181; /* Color de fondo de la página seleccionada */
text-decoration: none;
}

Con este trocito de código, lo que vamos a modificar es el efecto hover, es decir, como se verá nuestro menú cuando pase el ratón por encima.

Resultado:

PERSONALIZAR MENÚ DE PAGINAS BLOGGER

Bien lo primero, es que tienes que saber que el diseño principal de tu menú depende de la plantilla que elegiste, las plantillas por defecto de blogger, si vas mirando plantillas veras que cambia la forma de las páginas del menú, si te gusta el menú de una plantilla pero quieres cambiarle los colores y de más:

1. ve a plantilla 
2. luego en personalizar 
3. nos dirigirá al diseñador de plantillas, dirígete a la sección avanzado 
4. bien en esta sección veras muchas configuraciones, para configurar el menú busca las opciones “texto de la pestañas” y “fondo de las pestañas”
5. con la opción “texto de las pestañas” eliges la fuente del texto del menú y el color del texto cuando se selecciona una pestaña o cunado no esta seleccionada (una pestaña seleccionada es cuando colocas el ratón en ella y cambia de color)
6. en “fondo de las pestañas” podemos cambiar el color de una pestaña cuando esta seleccionada o el fondo normal del menú
7. dependiendo de la plantilla que hayas elegido tal ves te den mas opciones.

 

Personalización del menú de páginas blogger (Avanzado)

bien ya te mostré como personalizar tu menú de la forma más básica, ahora es cuando se pone bueno,
si es el caso que por ejemplo dices: yo uso la primera plantilla de “Picture Window” pero quiero el menú de la última plantilla de “sencillo”, bien eso si es un poco más complicado pero fácil a la ves.

Podemos cortar un menú de una plantilla y colocárselo a otra plantilla diferente pero eso es ya un poco mas difícil, ya tendríamos que entrar en la plantilla hacer unos cambios (muy confusos) y al final ya no podremos editar el menú desde el diseñador de plantillas, por lo pronto te mostrare como tener un menú como el mio,
mi menú es de la ultima plantilla de sencillo, si tu  usas esta plantilla has los cambios de color y texto en el diseñador de plantillas los otros efectos los mostrare mas abajo.

si usas otra plantilla por ejemplo la Picture Window o etéreo, y quiere que tenga el estilo de mi menú.

1. ve a plantilla
2. crear restablecer copia de seguridad (por si algo sale mal)
3. una ves descargada tu plantilla de respaldo ve asía editar de HTML
4. oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador
5. busca esta linea:   “/* Tabs” y elimina todo lo que esta debajo hasta llegar a la otra linea

ejemplo:

/* Tabs
———————————————– */

Elimina todo lo que esta aqui

/* Headings
———————————————– */

ahora copia este código:

.tabs-inner .widget ul {
  background: #000 ;  /* color de fondo */
  margin-left: -600px;
padding-left: 600px;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: .9em 1em; /* Ancho de las pestañas */
  font: normal bold 13px Arial; /* fuente de texto */
  color: #fff; /* color del texto */
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #fff; /* color de texto seleccionado */
  background-color: #7cc400; /* color de la pestaña seleccionada */
  text-decoration: none;
}

ahora pega ese código justo de bajo de

/* Tabs
———————————————– */

y da en guardar plantilla
ahora para los últimos detalles

• ve a plantilla
• personalizar
• avanzado
• y pega este código

#PageList1 {

width:100%;

}

Otras configuraciones para el menú de blogger

Poner el menú de blogger arriba de la cabecera

Para colocar el menú de páginas arriba de la cabecera  es necesario que hagas esto:

1. fíjate de que el gadget de páginas este dejado del de la cabecera
2. luego ve a plantilla
3. personalizar
4. avanzado
5. añadir css
6. pega este cogido 

#PageList1{
position:relative;
top:-140px; /* distacia de la parte de arriba */
}

Guarda los cambios
dependiendo del tamaño de cabecera o altura del blog deberás cambiar el valor de color verde, para que quede más cerca de la parte de arriba o menos.

Poner el menú quieto en la pantalla (al bajar la página, el menú baja con ella)

Para dejar que el menú de páginas estáticas baje con la pantalla, si tienes ya el código anterior remplaza “relative” por “fixed” y listo y pega  “z-index:1500;” debajo de  #PageList1{

si no tienes el código anterior

1. ve a plantilla
2. personalizar
3. avanzado
4. añadir css
5. pega este cogido 

#PageList1{
position:fixed;
z-index:1500;
top:-140px; /* distancia de la parte de arriba */
}

guarda los cambios
dependiendo del tamaño de cabecera o altura del blog deberás cambiar el valor de color verde, para que quede más cerca de la parte de arriba o menos.

Cambiar ancho y alto de las pestañas del menú

Como pudieron notar es un truco para cambiar las dimensiones de los botones o pestañas del menú es real mente simple hacer esto para realizarlo,

• vayan a plantilla
• editar HTML
• oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador
• busca esta linea

.tabs-inner .widget li a {

• debajo de ella localiza un alinea como esta

padding: .6em 1.5em;

Lo que está en color rojo es para aumentar la altura de las pestañas (este valor llega hasta 9)
Lo que está en color verde es para aumentar el ancho de la pestaña

Efecto hover al pasar el cursor en las pestañas del menú

si has notado en mi menú cuando pasas el mouse por una pestaña o sección del menú este cambia de color con un efecto suave de transformación (este efecto se llama hover), si quieres añadir este efecto para los botones o pestañas de tus paginas estáticas estos son los pasos a seguir:

1. ve a plantilla
2. personalizar
3. avanzado
4. añadir css
5. pega este cogido

#PageList1 a:link {
-webkit-transition:all 0.7s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.7s ease-out;  /* Opera */
  -moz-transition:all 0.7s ease-out;  /* Mozilla Firefox */
  transition:all 0.7s ease-out;  /* W3C */
  -ms-transition:all 0.7s ease-out;   /* Internet Explorer */}

Lo que esta mascado en color verde es el tiempo en que tardara en cambiar de color, el tiempo de transición del hover en segundos, si quieres puedes cambiarlo para que se demore más o menos.