Personalizar gadget Post populares

Personalizar el gadget de los post populares, es el tutorial que os traigo hoy. Aunque a simple vista parezca que no se puede modificar, la realidad es que se puede hacer cualquier cosa con él, solo tenemos que saber un poco de html.

Pero si no sabes html no salgas corriendo, porque te lo voy a dar tan fácil para que lo hagas que pensaras que es una chorrada.

En este tutorial además de poner el gadget de post populares bonito como se ve en la imagen, también vamos a aprender a modificarle los colores, porque los colores que le van bien a mi blog no le van bien a todos a cambiar las letras y poco más para que no te pierdas.

Pero si te gusta enredar y tienes tiempo, empieza a cambiar numeritos y colores y harás maravillas.

¿Como personalizar el gadget de post populares?

Para personalizar el gadget de post populares tenemos que ir a blogger>> plantilla y html. Le damos a buscar pulsando Cntrl + F y ponemos .widget .popular-posts , si te aparece esta palabra genial, si no te aparece busca </b:skin> , y con cualquiera de las dos palabras el tutorial sigue siendo el mismo.

Justo antes de la palabra que hayas encontrado pega esto:

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:8px}

#PopularPosts1 ul li:first-child{background: #CEECF5;width:140%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#CED8F6;width:140%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#CEECF5;width:140%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#CED8F6;width:140%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#CEECF5;width:140%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#CED8F6;width:140%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#CEECF5;width:140%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#CED8F6;width:140%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background: #CEECF5;width:140%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-25px;border-radius:50%;background:#F5A9F2;width:40px;height:32px;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:25px;background:transparent;padding:0;width:80px;height:80px;}

#PopularPosts1 ul li a{font-size:20px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{

-moz-border-radius: 150px;

-webkit-border-radius: 100px;

border-radius: 100px;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

transition: all 0.2s ease;

padding:6px;

border:1px solid #fff !important;

}

#PopularPosts1 img:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

1. Lo que está en azul es el color, podéis elegir el color que os gusta pero siempre en html, puedes ver todos los colores en http://html-color-codes.info/

2. Lo que está en rojo es el tamaño, esto tendrás que ajustarlo según el tamaño de tu blog.

3. Lo que está en verde es el tamaño de la letra y el color que al igual que antes lo tenemos que poner en html.

Recomendaciones:

Os recomiendo que vayáis alternando varios colores para que quede más bonito. Y si ponéis el número de otro color mucho mejor todavía.

Esta realizado para 9 gadget, por lo que si tienes más como mucho se pueden tener 10, para que te quede bien tienes que ir a blogger diseño, elegir post populares y en vez de poner 9 ponéis 10.

En el mismo gadget si os queda muy mal el texto ponéis solo en título. Es decir si tenéis el puesto el fragmento de texto lo quitáis.

Otra recomendación que os hago es que hagáis una copia de seguridad de la plantilla por si os hacéis un poquito de lio, pero no creo porque es súper fácil.

¿Qué te parece este tutorial para personalizar el gadget de post populares?