Varios estilos diferentes de Entradas Populares

Las entradas populares para nuestro blog, forma una parte importante de nuestro blog.
Hacen que nuestro visitantes puedan navegar por nuestro blog y con ello mejorar en el posicinamiento SEO y en la suscripcion de varios usuarios.

Podemos configurarlo de varias formas para mostrar lo que queramos.

1- Solo el titulo de nuestras entradas.
2- Imagenes en miniatura con el titulo
3- El titulo de la entrada con un resumen
4- Titulo de la entrada con imagen y un resumen de nuestra entrada.

Primeros Pasos.

Lo primero que tenemos que hacer es agregar el gadget de Entradas populares a nuestro blog.

Gadget de entradas populares

Diseño > Añadir un gadget > Entradas populares.

 Configuramos el widget para que muestre solo el titulo de la entrada.
No devemos de actuar las casillas de :

• Imagen en miniatura
• Fragmento.

 Guardamos el gadget

Elige el estilo

Ahora devemos de elegir el estilo que mas nos guste.

1 Blue Ribbon

#PopularPosts1 h2{

position:relative;

right:-2px;

padding:8px 63px 6px 17px; /*Ajusta el valor coloreado de azul para extender el listón a la derecha*/

width:100%;

margin:0;

font-size:16px;

background:#3366FF;

color:#f2f2f2;

text-align:left;

text-indent:18px;

}

#PopularPosts1 h2:before{

position:absolute;

content:"";

top:33px;

right:0px;

width: 0px;

height: 0px;

border-bottom:12px outset transparent;

border-left:12px solid #003df5;

}

#PopularPosts1 h2:after{

position:absolute;

content:"";

top:-6px;

left:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-left:24px solid #fff;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:7px 0 16px 12px;

padding:10px  4px 0 5px;

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:-2px;

left:-20px;

font-size:35px;

width:20px;

color:#777; /*Color de texto*/

}

#PopularPosts1 ul li a{

display:block;

font-size:14px;

color:#333;

text-decoration:none;

transition: all .2s ease-in-out;

}

#PopularPosts1 ul li a:hover{

color:#3366FF;

margin-left:3px;

}

2 Black Ribbon

#PopularPosts1 h2{

position:relative;

padding:8px 10px 6px 10px;

width:100%;

margin:0;

font-size:16px;

background:black;

color:#f2f2f2; /* Color del titulo widget */

text-align:center;

}

#PopularPosts1 h2:before{

position:absolute;

content:"";

top:-6px;

right:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-right:24px solid #fff; /*Color del triángulo igual que el fondo*/

}

#PopularPosts1 h2:after{

position:absolute;

content:"";

top:-7px;

left:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-left:24px solid #fff; /*Color del triángulo igual que el fondo*/

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:0 0 1px 12px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:2px;

left:-23px;

font-size:35px; /* Tamaño número */

width:20px;

color:#333; /*Color de texto*/

}

#PopularPosts1 ul li a{

display:block;

position:relative;

left:-30px;

width:100%;

margin:0;

padding: 9px 3px 10px 29px;

font-size:14px;

color:#333;

text-decoration:none;

transition: all .2s ease-in-out;

}

#PopularPosts1 ul li a:hover{

color:#3366ff;

margin-left:3px;

}

3 Metro

 

#PopularPosts1 h2{

padding:8px 10px 3px 0;

width:100%;

margin:0;

font-size:16px;

position:relative;

left:-20px;

display:block;

border-bottom:2px solid #ddd;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

width:100%;

}

#PopularPosts4 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:0 0 6px 10px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:3px;

left:-39px;

font-size:21px;

width:28px;

height:28px;

border-radius: 50%;

color:#777; /* Color de texto */

border: 2px solid #ddd; /* Color de borde círculo */

padding:0;

text-indent:9px;

}

#PopularPosts1 ul li a{

display:block;

position:relative;

left:-45px;

width:100%;

margin:0;

min-height:28px;

padding: 5px 3px 3px 39px;

color:#333;

text-decoration:none;

font-size:14px; /* Tamaño fuente de enlace */

}

#PopularPosts1 ul li a:hover{

color:#3366ff;

margin-left:3px;

}

4 Boxi

#PopularPosts1 h2{

padding:7px 0 3px 0;

width:100%;

margin:0;

font-size:1.3em;

text-indent:-12px;

font-size:19px;

text-align:center; /* Alineación texto título */

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-8px;

width:290px;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 7px;

left:-5px;

width:285px;

border:1px solid #ddd; /*Color de borde*/

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

display:block;

top:-5px;

left:-5px;

font-size:18px;

width:14px;

margin:0 0 10px 0;

padding:4px 4px 4px 3px;

color:#333; /*Color de texto*/

text-align:left;

background:#e2e2e2; /*Color de fondo*/

text-indent:2px;

}

#PopularPosts1 ul li:after{

content:"";

position:absolute;

top:-5px;

left:15px;

width: 0px;

height: 0px;

border-top:5px outset transparent;

border-left:5px solid #aeaeae; /* color triangulo del número*/

}

#PopularPosts1 ul li a{

font-size:16px;

color:#777;

margin-left:17px;

display:block;

min-height:25px;

text-decoration:none;

padding:0 4px 3px 0;

}

#PopularPosts1 ul li:hover{

background:#f9f9f9;

border:1px solid #aaa;

}

#PopularPosts1 ul li a:hover{

color:#0174DF;

}

Agregando el CSS para crear el estilo

 

Una vez que tenga elegido el estilo que deseas, nos vamos a:

Tema > Personalizar >  Añadir CSS

Pegamos el estilo que mas nos halla gustado y le damos a guardar.

Ya tenemos personalizado nuestro widget  

Nota:
En el primer caso tendrás que ajustar el valor del padding que he resaltado de azul para que el listón llegue hasta el extremo derecho tal y como la demo.

Enlaces de interes
Cinco estilos de Entradas populares