Vale, ya tienes la base del blog y ya has creado tus páginas. Ahora te falta saber cómo ponerlas para que queden bonitas. Bueno, yo os voy a dar tres opciones, dos de ellas son para emergencias y la tercera es la que más me gusta. ¿Por qué no os doy solo la que me gusta? Porque no todos tenemos el mismo gusto y quizás algunos de vosotros no queráis hacerlo de esa manera, aunque creo que es la que queda más limpia y elegante.
Menú de blogger, sencillo pero bonito
1º Tenéis que crear el menú, así que nos vamos a diseño y nos enfrentaremos por primera vez en este blog a esta plantilla. Antes de meternos con el menú os pido que vayáis a la barra de navegación y la quitéis porque es horrible tenerla, una vez hecho eso, vais al gadget de entradas al blog para personalizarlo a vuestro gusto y, una vez hecho eso, ya nos podemos poner con el menú.
En el multicolumnas horizontal le dáis a añadir un gadget y metéis el de páginas. ¿Lo tenéis? Bien, en el gadget tenéis que seleccionar las páginas que queráis visibles y también las podéis ordenar un poco. Una vez hecho esto, vamos al siguiente punto. A personalizarlo.
2º Meter el código. Yo os voy a dejar aquí el código que más me gusta aquí, pero abajo os voy a dejar el enlace al tutorial original para que podáis mirar qué más tipos de menú podéis poner. Este, dentro de lo sencillo, es complicado así que haced mucho caso a las indicaciones.
Id a Tema > Html y dale a ctrl+f y buscad /* Tabs y os saldrá eso con un montón de guioncitos debajo. Pues justo antes tenéis que pegar esto para que se centre el menú. :
/* Centrar menú páginas
----------------------------------------------- */
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
----------------------------------------------- */
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Vale, ya lo tenemos centrado pero aún no está bonito. Si lo queréis a la izquierda o a la derecha solo tenéis que cambiar la palabra que he puesto en rojo por left o right. Ahora lo que vamos a hacer es poner bordes y para eso tenéis que buscar la siguiente línea: .tabs-inner .section:first-child ul {
Os encontraréis con esto:
.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);
}
Vale, asusta un poco pero os prometo que es fácil cambiarlo. Hay están las líneas que van arriba, abajo, derecha e izquierda. Se puede modificar el color, el tipo de borde y el grosor. Yo os voy a dejar el código para el normal, porque es el que me gusta a mí. Lo que tenéis que hacer es sustituir este código por el otro.
Lo que está en rojo es lo que podéis personalizar. El 2px es el grosor, cuanto más alto sea el número más grueso será. Lo que va con el # es el color, podéis personalizarlo con el color que queráis. Os recomiendo esta página.
.tabs-inner .section:first-child ul {
border-top: 2px solid #4bceb4;
border-left: 2px solid #4bceb4;
border-right: 2px solid #4bceb4;
border-bottom: 2px solid #4bceb4;
}Ahora toca personalizar las pestañas del menú, porque así igual queda un poco soso para vuestro gusto, así que vamos a toquetearlas también. Tenéis que buscar: .tabs-inner .widget li a { y os saldrá esto:
.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);
}
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);
}
Aquí lo que vamos a hacer es quitar unas líneas que había en el menú, añadir color al texto del menú, borde izquierdo a la pestaña y ancho (o padding) arriba y abajo. Tenéis que sustituir ese código por este otro:
.tabs-inner
.widget li a {
display: inline-block;
padding: 10px 20px; /* Ancho de las pestañas */
color: #000000; /* color del texto */
border-left: 3px solid #000000;
}Lo que está en rojo es lo que podéis modificar a vuestro gusto.
Podéis añadir más cosas pero a mí no me gusta demasiado. Si queréis seguir añadiendo cosas podéis ir a la página que os voy a dejar a continuación. La foto que es dejo está sacada de esa misma página, así que para que sea más cómodo para todos, si pincháis en la imagen iréis directamente a su tutorial.
1º Vamos Tema > Html y buscamos lo siguiente: /* Tabs , sí, lo mismo de antes. Pues borrad todo lo que hay debajo de esa sección. Sí, sí, todo . Lo único que tenemos que dejar es:
 |
| Menú de The little Coccinelle |
Menú blogger bonito, sencillo y sin que te de un yuyu
/* Tabs
----------------------------------------------- */
Tened cuidado y no borréis más de la cuenta, porque debajo hay otra sección. Os quedará un vacío entre Tabs y:
/* Columns
----------------------------------------------- */
Vale, pues en el espacio que hemos dejado entre Tabs y columns pegamos este código:
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición menú*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000; /*bordes del menú arriba*/
border-bottom: 0px dotted #000; /*bordes del menú abajo*/
}
.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
height: 50px; /*ancho del menú/
margin-bottom: 0; /*margen abajo*/
margin-top: 0; /*margen arriba*/
margin-left: -30px; /*margen izquierdo*/
margin-right: -30px; /*margen derecha*/
}
.tabs-inner .widget li a {
display: inline-block;
padding: 20px; /*espacio entre pestañas*/
font:normal bold 12px Arial; /*tipo de letra*/
text-transform: uppercase; /*letra en mayúscula, si no queréis quitadlo*/
letter-spacing: 3px; /*espacio entre letras*/
color: #fff; /*color letras*/
border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li:first-child a {
border-$startSide: none; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #666; /*Color cuando pasamos con el ratón*/
background-color: transparent; /* fondo de la pestaña cuando pasamos con el ratón*/
text-decoration: none; /* sin subrayado de enlace*/
}
En rojo tenéis todo aquello que podéis toquetear y personalizar. El resto dejadlo como está. Este código, por supuesto, no me lo he inventado yo. Lo ha hecho Mónica de Blogger paso a paso y os dejo AQUÍ el enlace a su tutorial para que miréis el resto de códigos que tiene, son muy bonitos y a mí me gustan un montón.
En la segunda parte os enseñaré a poner el que tengo yo.
 |
| Imagen sacada de Blogger paso a paso |
En la segunda parte os enseñaré a poner el que tengo yo.
No hay comentarios:
Publicar un comentario