Personalizar gadget de entradas populares

31.5.15

Hola amigos! Bonita semana para todos, en el tutorial de hoy vamos aprender a personalizar el gadget de post populares de blogger, son 4 ejemplos: en el ejemplo #1 y #2 tiene efecto hover, el cual cambia de color cada cuadro cuando pasamos el puntero del mouse sobre él.
Para colocarlos vamos al css del blog y pegamos el código modificando todas las variables a nuestro gusto, las lineas del código tiene una corta explicación para saber qué acción es la que realizan.





Ejemplo #1
/***** 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;}



Ejemplo #2

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




Ejemplo #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;}


Ejemplo #4

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



...

¡Compartir este post!
Etiquetas: , , , , , , ,

más post bonitos que de seguro te van a interesar

28 comentarios

  1. cosmeticaOlgalunes, junio 01, 2015

    Gracias, acabo de hacer las fotos redonditas de las entradas populares...me gusta)
    Un saludo.

    ResponderBorrar
  2. Jarita`s Cookieslunes, junio 01, 2015

    Hola! muchas gracias por el tutorial! hace tiempo que teníamos en mente cambiarlo un poco! besis

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Que bien! ahora es cuando! los 4 son muy buena opción

      Borrar
  3. Unknownlunes, junio 01, 2015

    Muy bueno! GRACIAS!

    ResponderBorrar
  4. Sonia Esserlunes, junio 01, 2015

    ¡¡Muchas gracias, Wendy!! Son preciosos... el problema es elegir solo uno.

    ¡Un muackiles!

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Sii, ese es el problema siempre !! Pero cualquiera queda muy chulo

      Borrar
  5. Krikalunes, junio 01, 2015

    Las cuatro opciones quedan preciosas, qué pena que ahora en WP no pueda trastear tanto ;-) Un besito!

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Hola krika! Ohh, bueno d seguro también en WP hay opciones ;D

      Borrar
  6. Yaquelinlunes, junio 01, 2015

    Super, me encanta redondeado.

    ResponderBorrar
  7. mayjoyitaslunes, junio 01, 2015

    Muchísimas gracias!!!... Me ha quedado estupendo. Llevaba tiempo queriendo ponerle un borde de color a las fotos y no sabía como. Un abrazo.

    ResponderBorrar
  8. Xabimartes, junio 02, 2015

    hola debo de ser una inutil ,no he sido capaz de cambiarlas ,estoy como los monos prueba y error ja ja pero siempre error
    gracias de todas formas
    besos

    ResponderBorrar
  9. Unknownmartes, junio 02, 2015

    Muchas gracias por el tutorial! :DD
    Está bello! ♥
    Saludos bella!

    Las Alas de Anne-Sophie

    ResponderBorrar
  10. Pikapicmiércoles, junio 03, 2015

    Un tutorial estupendo, Wendy!!
    Creo que lo pondré en práctica. Muchas gracias por enseñarnos tanto, eres un solete, no me cansaré de decírtelo.
    Un beso, guapa!!

    ResponderBorrar
  11. Unknownmiércoles, junio 03, 2015

    era justo lo que necesitaba y estaba buscando como una loca!!! lo pondre en práctica
    ¡besotes!

    ResponderBorrar
  12. Loca por las compras onlinedomingo, junio 07, 2015

    Hola, que bueno encontrar Tu blog, necesito ayuda en mi blog, apenas esta dando sus primeros pasos, estoy muy comprometida en sacarlo adelante, SI te pasas y me dices que Te parece y Como podria mejorar seria de gran ayuda, gracias, saluditos 😊 locaporlascomprasonline.blogspot.com

    ResponderBorrar
    Respuestas
    1. Raydemiércoles, junio 10, 2015

      Hola, claro! Te has inscrito a la escuelita asi que ahi podrás aprender unas cuantas cositas ♥

      Borrar
  13. El trastero de las Doncellasviernes, septiembre 11, 2015

    Hola, vengo a plantear la cuestión del... "más difícil todavía".
    Una vez personalizada y puesta a nuestro antojo, se me crea la necesidad de crear una "excepción de entradas" para que no salga en esa lista. Por ejemplo, por mucho que vean una entrada que contenga la etiqueta "chocolate", no quiero que esas entradas salgan en mi lista de lo más visto.
    ¿Sería posible? Me he pillado los dedos con ello y no sé cómo puedo salir del paso, ¡Ya no se me ocurre cómo! y mis conocimientos son muy escasos!!

    ResponderBorrar
    Respuestas
    1. Raydelunes, septiembre 14, 2015

      Hola! ¡Siento mucho el retraso para responder! me temo decirte que en esta ocasión no puedo ayudarte ya que este gadget no tiene muchas opciones para poder seleccionar las entradas desde diseño :/

      Borrar
  14. Anónimodomingo, noviembre 15, 2015

    Gracias <3 tu tuto me ayudó ahora mi blog esta más chulo , saludos

    ResponderBorrar
  15. Anónimoviernes, diciembre 18, 2015

    Le puedo borrar donde dice: /***** post populares*****/
    /***** Imagen*****/ y esas cosas al código? Lo siento si esta pregunta es un poco tonta (voy empezando) saludos!

    ResponderBorrar
    Respuestas
    1. Raydesábado, diciembre 19, 2015

      Hola, claro que puedes borrarlo, esto es para identificar el código dentro de la plantilla

      Borrar
  16. Unknownlunes, abril 25, 2016

    Muchas gracias por hacer esta entrada, me encanto, blogger me estaba dando problemas porque las imagenes de los post populares me salian gigantes pero gracias a tus codigos pude solucionarlo y darles un estilo muy lindo.

    ResponderBorrar
    Respuestas
    1. Raydemartes, abril 26, 2016

      De nada Kat Unda, el fin de este blog es ayudar a amigas bloggeras ♥

      Borrar
  17. Roma Garcíasábado, agosto 27, 2016

    ¡Hola! Yo copio y pego esto en mi CSS y no me sale nada :/

    ResponderBorrar
    Respuestas
    1. Raydesábado, agosto 27, 2016

      ¡hola! Trata de pegar el código varias lineas arriba de b:skin

      Borrar

Gracias por tus comentarios

31.5.15

Personalizar gadget de entradas populares

Hola amigos! Bonita semana para todos, en el tutorial de hoy vamos aprender a personalizar el gadget de post populares de blogger, son 4 ejemplos: en el ejemplo #1 y #2 tiene efecto hover, el cual cambia de color cada cuadro cuando pasamos el puntero del mouse sobre él.
Para colocarlos vamos al css del blog y pegamos el código modificando todas las variables a nuestro gusto, las lineas del código tiene una corta explicación para saber qué acción es la que realizan.





Ejemplo #1
/***** 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;}



Ejemplo #2

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




Ejemplo #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;}


Ejemplo #4

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



¡Comparte en rrss!
a la/s

28 comentarios:

  1. cosmeticaOlgalunes, junio 01, 2015

    Gracias, acabo de hacer las fotos redonditas de las entradas populares...me gusta)
    Un saludo.

    ResponderBorrar
  2. Jarita`s Cookieslunes, junio 01, 2015

    Hola! muchas gracias por el tutorial! hace tiempo que teníamos en mente cambiarlo un poco! besis

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Que bien! ahora es cuando! los 4 son muy buena opción

      Borrar
  3. Unknownlunes, junio 01, 2015

    Muy bueno! GRACIAS!

    ResponderBorrar
  4. Sonia Esserlunes, junio 01, 2015

    ¡¡Muchas gracias, Wendy!! Son preciosos... el problema es elegir solo uno.

    ¡Un muackiles!

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Sii, ese es el problema siempre !! Pero cualquiera queda muy chulo

      Borrar
  5. Krikalunes, junio 01, 2015

    Las cuatro opciones quedan preciosas, qué pena que ahora en WP no pueda trastear tanto ;-) Un besito!

    ResponderBorrar
    Respuestas
    1. Raydelunes, junio 01, 2015

      Hola krika! Ohh, bueno d seguro también en WP hay opciones ;D

      Borrar
  6. Yaquelinlunes, junio 01, 2015

    Super, me encanta redondeado.

    ResponderBorrar
  7. mayjoyitaslunes, junio 01, 2015

    Muchísimas gracias!!!... Me ha quedado estupendo. Llevaba tiempo queriendo ponerle un borde de color a las fotos y no sabía como. Un abrazo.

    ResponderBorrar
  8. Xabimartes, junio 02, 2015

    hola debo de ser una inutil ,no he sido capaz de cambiarlas ,estoy como los monos prueba y error ja ja pero siempre error
    gracias de todas formas
    besos

    ResponderBorrar
  9. Unknownmartes, junio 02, 2015

    Muchas gracias por el tutorial! :DD
    Está bello! ♥
    Saludos bella!

    Las Alas de Anne-Sophie

    ResponderBorrar
  10. Pikapicmiércoles, junio 03, 2015

    Un tutorial estupendo, Wendy!!
    Creo que lo pondré en práctica. Muchas gracias por enseñarnos tanto, eres un solete, no me cansaré de decírtelo.
    Un beso, guapa!!

    ResponderBorrar
  11. Unknownmiércoles, junio 03, 2015

    era justo lo que necesitaba y estaba buscando como una loca!!! lo pondre en práctica
    ¡besotes!

    ResponderBorrar
  12. Loca por las compras onlinedomingo, junio 07, 2015

    Hola, que bueno encontrar Tu blog, necesito ayuda en mi blog, apenas esta dando sus primeros pasos, estoy muy comprometida en sacarlo adelante, SI te pasas y me dices que Te parece y Como podria mejorar seria de gran ayuda, gracias, saluditos 😊 locaporlascomprasonline.blogspot.com

    ResponderBorrar
    Respuestas
    1. Raydemiércoles, junio 10, 2015

      Hola, claro! Te has inscrito a la escuelita asi que ahi podrás aprender unas cuantas cositas ♥

      Borrar
  13. El trastero de las Doncellasviernes, septiembre 11, 2015

    Hola, vengo a plantear la cuestión del... "más difícil todavía".
    Una vez personalizada y puesta a nuestro antojo, se me crea la necesidad de crear una "excepción de entradas" para que no salga en esa lista. Por ejemplo, por mucho que vean una entrada que contenga la etiqueta "chocolate", no quiero que esas entradas salgan en mi lista de lo más visto.
    ¿Sería posible? Me he pillado los dedos con ello y no sé cómo puedo salir del paso, ¡Ya no se me ocurre cómo! y mis conocimientos son muy escasos!!

    ResponderBorrar
    Respuestas
    1. Raydelunes, septiembre 14, 2015

      Hola! ¡Siento mucho el retraso para responder! me temo decirte que en esta ocasión no puedo ayudarte ya que este gadget no tiene muchas opciones para poder seleccionar las entradas desde diseño :/

      Borrar
  14. Anónimodomingo, noviembre 15, 2015

    Gracias <3 tu tuto me ayudó ahora mi blog esta más chulo , saludos

    ResponderBorrar
  15. Anónimoviernes, diciembre 18, 2015

    Le puedo borrar donde dice: /***** post populares*****/
    /***** Imagen*****/ y esas cosas al código? Lo siento si esta pregunta es un poco tonta (voy empezando) saludos!

    ResponderBorrar
    Respuestas
    1. Raydesábado, diciembre 19, 2015

      Hola, claro que puedes borrarlo, esto es para identificar el código dentro de la plantilla

      Borrar
  16. Unknownlunes, abril 25, 2016

    Muchas gracias por hacer esta entrada, me encanto, blogger me estaba dando problemas porque las imagenes de los post populares me salian gigantes pero gracias a tus codigos pude solucionarlo y darles un estilo muy lindo.

    ResponderBorrar
    Respuestas
    1. Raydemartes, abril 26, 2016

      De nada Kat Unda, el fin de este blog es ayudar a amigas bloggeras ♥

      Borrar
  17. Roma Garcíasábado, agosto 27, 2016

    ¡Hola! Yo copio y pego esto en mi CSS y no me sale nada :/

    ResponderBorrar
    Respuestas
    1. Raydesábado, agosto 27, 2016

      ¡hola! Trata de pegar el código varias lineas arriba de b:skin

      Borrar

Gracias por tus comentarios