Tutoblog para ti #13: Gadget entradas populares.

¡Holaa lectores! Hoy les traigo un tutorial un poquito extenso pero que realmente vale la pena aprender.
El gadget entradas populares, como bien lo dice el nombre, sirve para destacar las publicaciones más visitadas y comentadas del blog.
Blogger brinda este gadget, pero en lo personal no me gusta mucho, por eso en el tutorial de hoy les traigo tres bellas formas de personalizarlo y darle un toque más original a sus blogs.
Espero que les guste el tutorial y les resulte de utilidad...

☕ 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 (Un signito más dentro de un cuadrito azul).

☕ 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:

/***** 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:

/***** post populares*****/

/***** Imagen*****/

.PopularPosts .item-thumbnail img,.featured_thumb img{

height: 70px; /**Altura de la imagen**/

width: 70px; /**Ancho de la imagen**/

padding: 0;

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 **/

letter-spacing:2px;}

Estilo 3:

/***** 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 **/

letter-spacing:2px;}

☕ 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 hermoso gadget de entradas populares!


Hasta aquí llegaron el tutorial de hoy, espero que les haya gustado  y resultado de su utilidad, el próximo domingo subiré otro tutorial, el cual ustedes deben eligir mediante una votación (Gadget de votación titulado "Tutoblog #14", en la parte superior del blog).

 Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.

¡Un abrazo literario!