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.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)