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.

Menú Uno

.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



Menú Dos

.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



Menú Tres

.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



Menú Cuatro

.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



Menú Cinco

.tabs-outer{
margin-top:-90px;
margin-left: 350px;
margin-bottom: 114px;
}
.tabs-inner .section:first-child {
}
.tabs-inner .section:first-child ul {
}
.tabs-inner, .tabs-inner > .section{
padding: 0 !important;
margin: 0 !important;
}
.tabs-inner .widget ul {
background: url(#) top no-repeat;
height: 80px;
text-align:center;
zoom:1;
padding-top: -100px;
}
.tabs-inner .widget li {
float:none;
display:inline-block;
zoom:1;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 10px 30px 0px 0px;
font: 20px “Arial”,Helvetica,Arial,sans-serif;
color: #394264;
}
.tabs-inner .widget li:first-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #cccccc;
background-color: transparent;
text-decoration:none;
}

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?



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.
Mamá, emprendedora y bloguera a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para encontrar el equilibrio entre su vida personal y profesional.

Pin It on Pinterest

Share This

COMPAGINA TU VIDA PERSONAL Y PROFESIONAL

CURSO-GUÍA GRATIS DE 5 DÍAS PARA MAMÁS EMPRENDEDORAS

¡Bienvenida! Ahora revisa tu correo ;)