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.

personalizar gadget post populares


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:


<!-- Post populares -->
#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) ;
}
<!-- Post populares  -->

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?


Suscribete

Melyssa Blog belleza y cósmetica

14 comentarios:

  1. Gracias por la información!
    Besos

    ResponderEliminar
  2. muchas gracias!! estaba buscando algo asi desde hace mucho -u-

    ResponderEliminar
  3. Lo he probado en mi blog y me gusta mucho, pero la barra superior se cambia sola (el menú desplegable queda más ancho que la palabra), así que lo he tenido que quitar. Es una lástima porque me gustaba mucho, pero en fin...

    Blue Butterfly

    ResponderEliminar
    Respuestas
    1. Se puede modificar simplemente cambiando los numeritos!

      Eliminar
  4. Ohhh que chulada por favor, te ha quedado muy bonito el gadget de los post personalizados, lo anoto para cuando tenga que decorar el blog, queda muy original.

    Un besito muy fuerte, sigue así :D

    ResponderEliminar
  5. ¡Muy útil! Yo no uso ese gadget, pero así queda mucho mejor :)

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. Bonito e funcional. Me ajudou muito. Obrigada.

    ResponderEliminar