Menú Superior de Páginas para Blogger

Personalizar gadgets Entradas Populares en Blogger

El martes vimos como personalizar el menú superior de páginas del blog y, como te comenté, hoy he preparado algunos códigos ya personalizados para ti. Puede que te aburra hacerlo tú o simplemente no tengas tiempo, así que solo tienes que seleccionar el código que más te guste, sustituirlo por tu código Tabs y listo.

Recordar que es el código Tabs de Blogger

.tabs-inner .section:first-child {
 
}

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #F78181;
border-left: 0px solid #F78181;
border-right: 0px solid #F78181;
border-bottom: 0px solid #F78181;

}

.tabs-inner .widget ul {
background: #FFFFFF none repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 0px solid #cccccc;
margin-top: 0px;
margin-left: 30px;
margin-right: -30px;
}

.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 25px 'Patrick Hand SC', Trebuchet, Verdana, sans-serif;
color: #000000;
border-left: 0px solid #ffffff;
border-right: 0px solid #dddddd;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
background-color: #F78181;
text-decoration: none;
border-radius: 20px;
}

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

Necesitar instalar la fuente Patrick Hand SC de Google Fonts

.tabs-inner .section:first-child {
 
}

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #F78181;
border-left: 0px solid #F78181;
border-right: 0px solid #F78181;
border-bottom: 0px solid #F78181;

}

.tabs-inner .widget ul {
background: #A9D0F5 none repeat-x scroll 0 -800px;
border-radius: 100px;
_background-image: none;
border-bottom: 0px solid #cccccc;
margin-top: 0px;
margin-left: 30px;
margin-right: -30px;
}

.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: bold normal 25px 'Amatic SC', Trebuchet, Verdana, sans-serif;
color: #000000;
border-left: 0px solid #ffffff;
border-right: 0px solid #dddddd;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
background-color: #A9D0F5;
text-decoration: none;
border-radius: 20px;
}

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

Necesitar instalar la fuente Amatic SC de Google Fonts

.tabs-inner .section:first-child {
 
}

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #F78181;
border-left: 0px solid #F78181;
border-right: 0px solid #F78181;
border-bottom: 0px solid #F78181;

}

.tabs-inner .widget ul {
background: #EFB4B4 none repeat-x scroll 0 -800px;
border-radius: 100px;
_background-image: none;
border-bottom: 0px solid #cccccc;
margin-top: 0px;
margin-left: 30px;
margin-right: -30px;
}

.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 15px 'Lobster Two', Trebuchet, Verdana, sans-serif;
color: #000000;
border-left: 0px solid #ffffff;
border-right: 0px solid #dddddd;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
background-color: transparent;
text-decoration: none;
border-radius: 20px;
}

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

Necesitar instalar la fuente Lobster Two de Google Fonts

.tabs-inner .section:first-child {
 
}

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #F78181;
border-left: 0px solid #F78181;
border-right: 0px solid #F78181;
border-bottom: 0px solid #F78181;

}

.tabs-inner .widget ul {
background: #ffffff none repeat-x scroll 0 -800px;
border-radius: 100px;
_background-image: none;
border-bottom: 0px solid #cccccc;
margin-top: 0px;
margin-left: 30px;
margin-right: -30px;
}

.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 25px 'Great Vibes', Trebuchet, Verdana, sans-serif;
color: #000000;
border-left: 0px solid #ffffff;
border-right: 0px solid #dddddd;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
background-color: #B4EFC6;
text-decoration: none;
border-radius: 100px;
}

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

Necesitar instalar la fuente Great Vibes de Google Fonts

Llévate contigo el menú de Personaliza tu Blog ¡¡gratis!!

Puedes usar libremente cualquiera de estos cuatro menús en tu blog y modificar el código para adaptarlo a tus necesidades tal y como vimos en la entrada que te he enlazado al principio de este post. Ahí también tienes una referencia para saber como instalar fuentes nuevas en Blogger.

Es algo sencillo que no ocupa demasiado tiempo y teniendo en cuenta que la cabecera y nuestro menú superior de páginas es lo primero que ven nuestras visitas al entrar en nuestro blog... creo que merece la pena dedicarle un poco de tiempo ¿no te parece?

Comentarios

Unknown16 de enero de 2014, 17:48
Gracias por tus tutoriales, son siempre muy utiles!
ResponderEliminar
Respuestas
Anónimo16 de enero de 2014, 23:10
Celia, gracias por estos tutoriales tan chulos, a ver si tengo un rato y me hago un menú de páginas chulo, chulo... Un beso y buen finde
ResponderEliminar
Respuestas
manoli ortiz23 de enero de 2014, 18:00
ya me he hecho las páginas celia, pero ahora no se como meter cada entrada en su correspondiente página. vaya desastre!!

muchos besos.
ResponderEliminar
Respuestas
Débora.- Pa Monísima:Yo7 de febrero de 2014, 0:19
Cucu preciosa
Cómo te lo curras
Muchas gracias ♥
ResponderEliminar
Respuestas
Estefania BL25 de noviembre de 2014, 18:17
Está preciosa, pero me gustaría saber como puedo editar los botones individuales de un SUPERFISH MENÚ, es que no me servia las páginas y coloqué estas, ¿como puedo editarlas? ¿funciona estos mismos códigos?
ResponderEliminar
Respuestas