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!
Gracias, gracias!, ya está hecho. Es como si me hubieras leído la mente.
ResponderEliminarBesicos!!!
¡Hola guapa!
EliminarTe ha quedado genial :D
¡Besos y buenas noches! ^^
Genial Post!!!
ResponderEliminarya 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.
¡Pues ya me contarás qué tal ha quedado cuando te pongas a ello! ;)
Eliminar¡¡Besos y buenas noches, guapa!!
Muchas gracias Celia, me ha encantado, ya lo he puesto en practica. Es fenomenal y super bien explicado.
ResponderEliminarMuchas gracias de nuevo
¡Que mono! Mucho más integrado en el diseño general del blog :D
Eliminar¡Me alegra que te haya servido! ¡Feliz finde! ^^
¡Genial! Era en algo que no había pensado para mi blog, pero que me viene de perlas.
ResponderEliminarYa está incluido :)
¡Estupendo! :)
ResponderEliminarPor cierto ¡geniales los banners con los pies! Muy gráficos jajaja
¡Feliz finde!
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?
ResponderEliminarTe dejo el enlace a mi blog.
Muchas gracias!!!
http://www.martuscavr.blogspot.com.es/
¡Hola Marta!
EliminarPrueba 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!!
Gracias!! Ya lo he puesto en mi blog!! (www.aprendofrancesenprimaria.blogspot.com). Me encanta!!
ResponderEliminarMe alegro mucho, Noelia :D
EliminarListo ya! implementado en mi blog. Muchísimas gracias por tu tutorial.
ResponderEliminarBeso
Gracias a ti por tu visita, Adriana! ;)
EliminarHola! 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.
ResponderEliminarSi pudieras ayudarme te lo agradeceria mucho.
Te dejo el link de mi blog para que puedas ver el error : http://itsinfinitebooks.blogspot.com.ar/
Hola Jazz!
EliminarMe sale que el blog ha sido eliminado.
Saludos!
Gracias Celia!
ResponderEliminarBesotes
Holaa lo intente hacer pero no me sale el ]]> en el html :(
ResponderEliminar¡Hola Lana!
EliminarAsegú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!
Con que página web creaste el blog??
ResponderEliminar¡Hola, Miryam!
EliminarMi blog está en blogger :)
¡Beso!
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¡Gracias! me ha servido de ayuda para poner las Entradas populares en mi blog :)
ResponderEliminarA ver si le hago un lavado de imagen...
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¡Hola, Vir!
EliminarEsta 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!
hola Celia! estoy intentando ponerlo en el blog y no me sale, ya va dos veces y nada de nada
ResponderEliminarhola Celia! estoy intentando ponerlo en el blog y no me sale, ya va dos veces y nada de nada
ResponderEliminar