Cómo personalizar el gadget de entradas populares

enero 15, 2015

Cómo personalizar el gadget de entradas populares

No sé si te has fijado en cómo se ve ahora mi barra lateral. He enmarcado algunos de los gadgets en marcos del mismo color azul que el que uso como color principal del blog. ¡Me encanta ese azul! No es el típico pastel y creo que va mucho conmigo y lo que quiero transmitirte, es vivo, brillante y con fuerza. A mí me hace sentir seguridad y me relaja, no me costó mucho escogerlo... ¡y creo que acerté con él! 

Pero me estoy desviando del tema. Te hablaba de mi sidebar. En especial quiero que te fijes en las Entradas Populares o, en mi caso, Lo Más Leído. Son las entradas que más visitas han recibido esa semana. Y se ven así:



Creo que el resultado es muy limpio y profesional. Al menos para mi gusto. Y hoy quiero enseñarte cómo puedes hacer tú lo mismo en tu blog usando el gadget de entradas populares que puedes encontrar en tu panel de Diseño de Blogger.

Antes de empezar a tocar el código para conseguir un resultado parecido, necesitas haber instalado el gadget de Entradas Populares con la siguiente configuración:





Lo que te he marcado en azul es opcional, puedes poner el Título que quieras que aparezca encima de tu gadget y el periodo de tiempo a tener en cuenta para seleccionar las entradas más leídas. Pero es importante que aparezca la imagen en miniatura y el fragmento de texto ¿vale?


CÓMO PERSONALIZAR EL GADGET DE ENTRADAS POPULARES EN BLOGGER


1.- Entramos en nuestra plantilla HTML. Pinchamos en cualquier zona dentro del cuadrado de código, pulsamos a la vez Control + F y buscamos:

]]></b:skin>


2.- Justo encima pegamos:

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


Si copias el código tal cual, aparecerán como las mías, siempre y cuando tengas mi tipo de letra (Patrick Hand SC instalada desde Google Fonts). Puedes ver cómo instalar nuevas tipografías desde Google Fonts en el siguiente tutorial:

Añadir nueva fuente en los títulos de las entradas de blogger

Tienes que seguir el tutorial hasta el paso 14, justo cuando instalamos el código de la nueva fuente en nuestra plantilla. La diferencia es que en vez de ponerlo en el código h3 (los títulos) tienes que ponerlo en el código que estamos viendo hoy. Ahora te explico exactamente donde, empezamos a desglosar el código para personalizarlo.


3.-

#PopularPosts1 {
border: 1px solid #8FE1D8;
padding: 5px;
background: #ffffff;
}

El gadget de entradas populares. Es decir, el cuadrado grande que contiene las diferentes entradas.

Puedes personalizar:

Border -> el borde de color azul que enmarca mis entradas populares. Para personalizar bordes te será útil echar un vistazo a esta entrada:

Diferentes tipos de bordes en HTML


Background -> el color de fondo del gadget de entradas populares. En mi caso blanco. Tú puedes usar el color que estés ya usando en tu diseño o buscar uno que te guste en la siguiente web:

Colores HTML 

Y cambiarlo por el mío que es #ffffff.


Añadiendo SOLO esta parte del código el resultado es:


Un sencillo borde azul y el fondo blanco, ni más ni menos. Los títulos aparecen con el mismo formato que el fragmento de texto de la entrada y las imágenes cuadradas y sin el marquito azul.


4.- Ahora que hemos visto para que sirve el primer fragmento del código y lo hemos personalizado, vamos a por el segundo:

#PopularPosts1 ul li img{
border: 1px solid #8FE1D8;
border-radius: 100px;
}

El formato de nuestras imágenes en miniatura. Lo que hace que se vea el borde azul (border) y que aparezcan redondas en vez de cuadradas (border-radius). Ya sabes como personalizar el borde para adaptarlo a tu diseño. Y si la quieres menos redondeada, solo tienes que reducir el número de píxeles del border-radius.

Nuestro resultado personalizado hasta ahora es:


¡Mucho más original! Pero si te fijas y pasas el ratón por las entradas populares de mi sidebar... ¿ves que la imagen se vuelve traslúcida? Pues es lo siguiente que vamos a hacer.


5.- El siguiente fragmento del código original a personalizar es:

#PopularPosts1 ul li img:hover{
filter:alpha(opacity=60);
opacity:.6;
}


Es lo que hace que nuestra imagen tenga menos opacidad cuando pasamos el cursor del mouse sobre ella. Si quieres prescindir de ese efecto, solo tienes que eliminar estas cuatro líneas de tu código original.


6.- Y, por último ¡dar formato a nuestro títulos para que se vean diferentes al resto de la entrada! Este detalle lo conseguimos con el cuarto y último fragmento del código con el que estamos trabajando:

#PopularPosts1 .item-title a{
text-transform: uppercase;
font-family: 'Patrick Hand SC', cursive;
font-size: 15px;
color: #8FE1D8;
}

Puedes personalizar:

text-transform: uppercase -> hace que se vea en mayúsculas todo el texto. Si prefieres que se vea normal y no destaque todo, puedes eliminar esta línea del código.

font-family -> aquí es donde tienes que sustituir mi tipo de letra (marcada en verde) por la tuya.

font-size -> el tamaño de la letra.

color -> el color de la letra.

¡ Y ya lo tienes! Tu gadget de entradas populares personalizado, completamente a tu gusto, integrado con el resto de tu diseño.



No ha sido tan complicado ¿verdad?

Si te animas a intentarlo 
¡déjame el enlace a tu blog en comentarios para verlo!




Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

27 pensamientos ¡falta el tuyo! ;)

  1. Gracias, gracias!, ya está hecho. Es como si me hubieras leído la mente.
    Besicos!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Te ha quedado genial :D

      ¡Besos y buenas noches! ^^

      Eliminar
  2. Genial Post!!!

    ya estoy a ponerlo en practica en el blog a ver que tal me queda, no quiero recargarlo mucho, sino lo guardo para las plantillas que estoy creando!!

    Gracias Celia.

    ResponderEliminar
    Respuestas
    1. ¡Pues ya me contarás qué tal ha quedado cuando te pongas a ello! ;)

      ¡¡Besos y buenas noches, guapa!!

      Eliminar
  3. Muchas gracias Celia, me ha encantado, ya lo he puesto en practica. Es fenomenal y super bien explicado.
    Muchas gracias de nuevo

    ResponderEliminar
    Respuestas
    1. ¡Que mono! Mucho más integrado en el diseño general del blog :D

      ¡Me alegra que te haya servido! ¡Feliz finde! ^^

      Eliminar
  4. ¡Genial! Era en algo que no había pensado para mi blog, pero que me viene de perlas.

    Ya está incluido :)

    ResponderEliminar
  5. ¡Estupendo! :)

    Por cierto ¡geniales los banners con los pies! Muy gráficos jajaja

    ¡Feliz finde!

    ResponderEliminar
  6. genial! hecho, aunque lo he adaptado un poco a mi blog y me sale un punto negro que no se por qué puede ser... ¿sabrías decirme?
    Te dejo el enlace a mi blog.
    Muchas gracias!!!
    http://www.martuscavr.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. ¡Hola Marta!

      Prueba a añadir a tu segundo y tercer fragmento de código esta línea:

      list-style: none;

      Justo antes de cada }

      Y me dices si te funciona ;)

      ¡¡Besos y feliz semana!!

      Eliminar
  7. Gracias!! Ya lo he puesto en mi blog!! (www.aprendofrancesenprimaria.blogspot.com). Me encanta!!

    ResponderEliminar
  8. Listo ya! implementado en mi blog. Muchísimas gracias por tu tutorial.
    Beso

    ResponderEliminar
  9. Hola! Me sirvio mucho tu post, pero lo que me pasa es que el contenido de las entradas populares me sale para un costado saliendose del marco, nose que hacer.

    Si pudieras ayudarme te lo agradeceria mucho.

    Te dejo el link de mi blog para que puedas ver el error : http://itsinfinitebooks.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Jazz!

      Me sale que el blog ha sido eliminado.

      Saludos!

      Eliminar
  10. Holaa lo intente hacer pero no me sale el ]]> en el html :(

    ResponderEliminar
    Respuestas
    1. ¡Hola Lana!

      Asegúrate de estar usando el buscador interno de Blogger y no el externo de tu navegador.

      Entra en tu plantilla, pincha dentro, en cualquier parte donde aparece el código y pulsa Control y F a la vez. Se abre un cuadradito arriba de la plantilla a la derecha y ahí puedes buscar el código del tutorial :)

      ¡Saludos!

      Eliminar
  11. Respuestas
    1. ¡Hola, Miryam!

      Mi blog está en blogger :)

      ¡Beso!

      Eliminar
  12. Hola!!! me encanta tu blog!! intenté este diseño pero pego el codigo justo arriba de ]]> y no pasa nada!!! a que crees que pueda deberse??

    ResponderEliminar
  13. ¡Gracias! me ha servido de ayuda para poner las Entradas populares en mi blog :)
    A ver si le hago un lavado de imagen...

    ResponderEliminar
  14. Hola! Muchas gracias! Me hace quedado bastante bien, lo que no puedo entender es porque habiendo puesto que muestre solo 5, me aparecen 10... ¿Será que toqué algo de más? Saludos

    ResponderEliminar
    Respuestas
    1. ¡Hola, Vir!

      Esta configuración solo afecta a los colores y tipografías, no al número de entradas que se muestran así que no tengo ni idea de porqué puede ser.

      Prueba a eliminar el gadget y a volver a instalarlo.

      ¡Feliz finde!

      Eliminar
  15. hola Celia! estoy intentando ponerlo en el blog y no me sale, ya va dos veces y nada de nada

    ResponderEliminar
  16. hola Celia! estoy intentando ponerlo en el blog y no me sale, ya va dos veces y nada de nada

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.