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



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

28 comentarios

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

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

    ResponderBorrar
    Respuestas
    1. Que bien! ahora es cuando! los 4 son muy buena opción

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

    ¡Un muackiles!

    ResponderBorrar
    Respuestas
    1. Sii, ese es el problema siempre !! Pero cualquiera queda muy chulo

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

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

      Borrar
  5. 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
  6. 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
  7. Muchas gracias por el tutorial! :DD
    Está bello! ♥
    Saludos bella!

    Las Alas de Anne-Sophie

    ResponderBorrar
  8. 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
  9. era justo lo que necesitaba y estaba buscando como una loca!!! lo pondre en práctica
    ¡besotes!

    ResponderBorrar
  10. 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. Hola, claro! Te has inscrito a la escuelita asi que ahi podrás aprender unas cuantas cositas ♥

      Borrar
  11. 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. 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
  12. Gracias <3 tu tuto me ayudó ahora mi blog esta más chulo , saludos

    ResponderBorrar
  13. 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. Hola, claro que puedes borrarlo, esto es para identificar el código dentro de la plantilla

      Borrar
  14. 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. De nada Kat Unda, el fin de este blog es ayudar a amigas bloggeras ♥

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

    ResponderBorrar
    Respuestas
    1. ¡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;}



28 comentarios:

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

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

    ResponderBorrar
    Respuestas
    1. Que bien! ahora es cuando! los 4 son muy buena opción

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

    ¡Un muackiles!

    ResponderBorrar
    Respuestas
    1. Sii, ese es el problema siempre !! Pero cualquiera queda muy chulo

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

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

      Borrar
  5. 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
  6. 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
  7. Muchas gracias por el tutorial! :DD
    Está bello! ♥
    Saludos bella!

    Las Alas de Anne-Sophie

    ResponderBorrar
  8. 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
  9. era justo lo que necesitaba y estaba buscando como una loca!!! lo pondre en práctica
    ¡besotes!

    ResponderBorrar
  10. 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. Hola, claro! Te has inscrito a la escuelita asi que ahi podrás aprender unas cuantas cositas ♥

      Borrar
  11. 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. 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
  12. Gracias <3 tu tuto me ayudó ahora mi blog esta más chulo , saludos

    ResponderBorrar
  13. 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. Hola, claro que puedes borrarlo, esto es para identificar el código dentro de la plantilla

      Borrar
  14. 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. De nada Kat Unda, el fin de este blog es ayudar a amigas bloggeras ♥

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

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

      Borrar

Gracias por tus comentarios