Tutoblog para ti #13: Gadget entradas populares.

domingo, 26 de junio de 2016

¡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!

21 comentarios:

  1. Holaa! Soy parte de la iniciativa Cadena de comentarios y ya te sigo :)
    Muy bueno el tutorial, estan muy lindos los modelos!
    Nos leemos? https://lamagiaexistenloslibros.blogspot.com.ar

    Besos.

    ResponderBorrar
  2. Hola!! Qué chulos los estilos, en cuanto tenga un poco de tiempo lo pongo en mi blog, que aún me queda mucho por hacer con él.
    Mil gracias por el tutorial!!

    Un besazo enorme!!

    ResponderBorrar
    Respuestas
    1. Mil gracias a ti por comentar!
      Espero que te quede hermoso tu blog :)
      Saludos!

      Borrar
  3. ¡Gracias por el tutorial, guapa! Me encanta y además resultará super útil ^^
    Feliz semana,

    ¡Besos! :)

    ResponderBorrar
    Respuestas
    1. Gracias a ti por comentar!
      Qué bueno que resulte de utilidad :D
      Saludos :3

      Borrar
  4. Hola!!
    Muchas gracias por la entrada, muy interesante.
    Un saludo :)

    ResponderBorrar
  5. ¡Muchas gracias por la entrada! Siempre es genial aprender nuevos trucos para el blog =D

    Un beso ^^

    ResponderBorrar
    Respuestas
    1. Holaa, que bueno que te haya gustado el tutorial!
      Gracias a ti por comentar :D
      Beso!

      Borrar
  6. ¡Me encantó el estilo con el círculo!

    Después voy a intentar a ver si me sale en mi blog.

    Un beso grande

    Nati
    http://khaleesigeek.blogspot.com/

    ResponderBorrar
  7. Respuestas
    1. Holaa, gracias a ti por comentar!
      Espero que el próximo tutorial te guste :)

      Borrar
  8. No sabía lo de los estilos y me viene de maravilla. Como siempre me declaro FAN de tus tutoriales <3

    ¡SE MUUY FELIIIIIIIIIIIIIIIZ! :):)

    ResponderBorrar
    Respuestas
    1. Holaa, me halaga enormemente que seas fan de mis tutoriales!
      Se muy feliz tu también ♥ ♥

      Borrar
  9. Hola!
    Me encantan tus tutoriales... muchisimas gracias por ponerlos.
    Que precioso me quedará el blog cuando me ponga con ellos!
    Un besazo!

    ResponderBorrar
  10. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  11. Hola!
    Me encantó el tutorial, muchísimas gracias!
    Sabes si hay alguna manera para personalizar el texto que aparece (para que si, por ejemplo, en una reseña quiero poner la sinopsis del libro)?
    Saludos!

    ResponderBorrar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014