Tutorial: Personalizar "Entradas Populares"

Hola lectores bloggueros <3
Hoy les traigo el primer tutorial del blog y es la personalización de Entradas Populares/favoritos.
Espero y les gusten los diferentes modelos que les traigo :D.

 ⚓ Paso 1:
Deben ir a Diseño>Agregar un gadget.
Allí buscan el gadget que llamado Entradas populares, una vez que lo encuentren hacen clic en el botón de agregar.

⚓ Paso 2:
Una vez agregado y ubicado el gadget, deben dirigirse a Plantilla>Personalizar>Opciones avanzadas>Agregar CSS.
Allí pegan código del estilo que elijan a continuación, el cual pueden modificar a su gusto, ya que al lado de cada elemento hay una pequeña descripción que les indica qué es cada uno:

Estilo #1:

Maximo: 7

/***** post populares*****/ .popular-posts ul{ padding-left:0px;} .popular-posts ul li { background: #FBF8EF;/**Color de fondo**/ list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 4px solid #F6D8CE; /**Borde y color**/ } /***** Imagen*****/ .PopularPosts .item-thumbnail img,.featured_thumb img{ height: 70px; /**Altura de la imagen**/ width: 70px; /**Ancho de la imagen**/ padding: 0; border-radius: 100%; margin-right: 10px; border: 5px solid #F6D8CE; /**Grosor del borde y color**/ } .popular-posts ul li:hover { border:4px solid #F7BE81; /**Color del borde al pasar el cursor de mouse**/ background: #F6D8CE;/**Color de fondo al pasar el cursor de mouse**/

Estilo #2

Maximo: 5

<!-- 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: #74D6D1; /**color 1 bloque**/ width:100%} /**Tamaño 1 bloque**/ #PopularPosts1 ul li:first-child + li{background:#7DF7F1; /**color 2 bloque**/ width:100%} /**Tamaño 2 bloque**/ #PopularPosts1 ul li:first-child + li + li{background:#74D6D1; /**color 3 bloque**/ width:100%} /**Tamaño 3 bloque**/ #PopularPosts1 ul li:first-child + li + li + li{background:#7DF7F1; /**color 4 bloque**/ width:100%} /**Tamaño 4 bloque**/ #PopularPosts1 ul li:first-child + li + li + li + li{background:#74D6D1; /**color 5 bloque**/ width:100%} /**Tamaño 5 bloque**/ #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{position:absolute;top:20px;right:-25px;border-radius:50%;background:#000;width:32px;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:16px; /**Tamaño titulo**/ color:#444;text-decoration:none} /**color titulo**/ #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 -->

Estilo #3:

Maximo: 5

<!-- 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: #ff4c54; /**color 1 bloque**/ width:100%} /**Tamaño 1 bloque**/ #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c; /**color 2 bloque**/ width:93%} /**Tamaño 2 bloque**/ #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c; /**color 3 bloque**/ width:84%}/**Tamaño 3 bloque**/ #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f; /**color 4 bloque**/ width:77%} /**Tamaño 4 bloque**/ #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7; /**color 5 bloque**/ width:70%} /**Tamaño 5 bloque**/ #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #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{position:absolute;top:6px;right:-25px;border-radius:60%;background:#000;width:32px;height:32px;text-align:center;font-size:26px;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:16px; /**Tamaño titulo**/ color:#000; /**Color titulo**/ text-decoration:none} #PopularPosts1 ul li a:hover {color:#222; /**Color titulo al pasar el raton por encima**/ 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 -->

Estilo #4:

Maximo: 7

/* Entradas Populares Sidebar --------------------------------- */ #PopularPosts1 { border: 1px solid #8FE1D8; padding: 5px; background: #ffffff; } #PopularPosts1 ul li img{ border: 1px solid #8FE1D8; border-radius: 100px; } #PopularPosts1 ul li img:hover{ filter:alpha(opacity=60); opacity:.6; } #PopularPosts1 .item-title a{ text-transform: uppercase; font-family: 'Patrick Hand SC', cursive; font-size: 15px; color: #8FE1D8 }

Estilo #5:

Maximo: 7

/***** post populares*****/ /***** Imagen*****/ .PopularPosts .item-thumbnail img,.featured_thumb img{ height: 70px; /**Altura de la imagen**/ width: 70px; /**Ancho de la imagen**/ padding: 0; border-radius: 100%; margin-right: 10px; border: 5px solid #F5A9A9; /**Grosor del borde y color**/ } /***** Opacidad*****/ #PopularPosts1 ul li img:hover{ filter:alpha(opacity=90); /**Opacidad al pasar el puntero del mouse sobre la imagen**/ opacity:.2; } /***** Título*****/ .PopularPosts .item-title a { font-family: raleway; /**Tipo de letra**/ font-weight: bold; /**Estilo de texto en negrita**/ font-size: 11px; /**Tamaño **/ color: #F5A9A9; /**color **/ text-transform:uppercase; /**Texto en mayúsculas **/

¿Que quiere decir máximo?

Bueno esto significa el numero de entradas populares... es decir, si ustedes ponen un estilo de maximo 5: y en el numero de entradas populares a mostrar es de 7, solo las primeras 5 entradas populares estarán con la personalización.

⚓ Paso 3:

Una vez que ya hayan modificado y están conforme con el resultado, hacen clic en Aplicar al blog y listo, ya tienen un gadget de entradas populares, pueden modificar los colores y bordes.

Os enseño: 

/***** post populares*****/
.popular-posts ul{
padding-left:0px;}
.popular-posts ul li {
background: #c7ca85; /**Color de fondo**/
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 4px dashed #b59cac; /**Borde y color**/
}
/***** Imagen*****/
.PopularPosts .item-thumbnail img,.featured_thumb img{
height: 70px; /**Altura de la imagen**/
width: 70px; /**Ancho de la imagen**/
padding: 0;
border-radius: 100%;
margin-right: 10px;
border: 5px solid #4c0000; /**Grosor del borde y color**/
}
.popular-posts ul
  li:hover {
  border:4px solid #8f1414; /**Color del borde al pasar el cursor de mouse**/

background: #19d2d5; /**Color de fondo al pasar el cursor de mouse**/

Lo que esta en negrita... es la linea donde hay "codigos de color", lo que esta en rojo es el codigo del color, (no olviden dejar el ; si no, no les funcionara.) 

en esta PAGINA, podran encontrar muchos colores, si no les gustan los colores que se muestran al principio, le dan generate random colors , las veces que quieran hasta encontrar su color de preferencia
 lo que esta en este color, es el estilo del borde:

__________ Solid

.................... Dotted

--------------- Dashed

========= Double

esos son los tipos de bordes.

y así es como quedaría (lo que hice yo para mostrarles como jugar con bordes y colores..)

 jajaj lo se, no fueron mis mejores combinaciones de colores xD

ESPERO Y OS HALLA GUSTADO Y LES AYUDE MUCHO <3, NOS VEMOS EL PRÓXIMO LUNES CON OTRO TUTORIAL :D