Cómo poner blondas enmarcando el blog.
Es una duda que me ha llegado varias veces por email, pero si tuviera que contestar una a una... ¡no me daría la vida! La verdad es que hay varias formas de hacerlo y puede que esta no sea la más sencilla, pero es la que a mí me funciona y por eso es la que he elegido compartir contigo.
Necesitas acceder a tu cuenta de google photos (donde se alojan las imágenes de tu blog de blogger) o tener una cuenta en dropbox (puedes abrir una siguiendo ESTE TUTORIAL). Como otras veces, vamos a trabajar con las URLs de las imágenes, por lo que es muy importante que estén subidas a una plataforma online de manera pública. Sino... te aparecerá el icono del folio cortado y no se verá.
ELIGIENDO LAS IMÁGENES
Lo primero es elegir las blondas que vas a usar para enmarcar las entradas, voy a compartir contigo las que más uso yo. Puedes añadirlas directamente o tomar las medidas para diseñar las tuyas. Muy importante: si decides diseñarlas tú, recuerda que el fondo debe ser transparente, usa Photoshop, Illustrator o Corel Draw y guárdala en formato .PNG.
Ahora elige la pareja que prefieras para las pruebas y cárgalas en tu cuenta de Google Fotos o Dropbox para conseguir los enlaces que vamos a necesitar.
AÑADIENDO BLONDAS A TU BLOG
He utilizado el mismo blog de pruebas que usamos para añadir la imagen detrás del menú. El que está basado en la plantilla Vintage Feelings que puedes ver AQUÍ.
Para instalar correctamente las blondas necesitas conocer el ancho de tu blog. El código, por supuesto, admite modificaciones, una vez instalado podrás variar los píxeles para adaptarlo a tu ancho, pero como me es imposible mirar uno por uno todos los blogs para dar soluciones, te aconsejo que te plantees la opción de modificar el ancho de tu blog.
En Plantilla > Personalizar > Ajustar ancho
Puedes ver el ancho actual de tu blog. El de mi blog de pruebas es 1070. Lo suficiente para que se vea bien en cualquier monitor, la letra sea legible y poder usar una barra lateral mínimamente decente donde no se amontonen los gadgets y los títulos.
Ahora que ya tenemos nuestras blondas online y hemos comprobado el ancho de nuestro blog, ¡vamos a lo interesante! Añadir las blondas al cuerpo del blog.
EL CÓDIGO QUE NECESITAS
Estas son las líneas de código que añadiremos a nuestra plantilla HTML para que se vean nuestras blondas:
.content-fauxborder-left{
padding: 0 24px;
background: url(URL BLONDA IZQUIERDA) repeat-y left;
}
.content-fauxborder-right{
background: url(URL BLONDA DERECHA) repeat-y right;
width: 60px;
}
Vamos a ver donde añadirlo y cómo modificarlo:
1.- Entra en tu plantilla HTML, pincha en cualquier zona dentro del cuadrado donde aparece todo tu código y pulsa a la vez Control y F para abrir el buscador interno de la plantilla de blogger.
2.- Ahora busca:
/* Header
----------------------------------------------- */
3.- Justo arriba pega las 8 líneas nuevas. Así:
background-color: #ffffff;
}
.content-fauxborder-left{
padding: 0 24px;
background: url(URL BLONDA IZQUIERDA) repeat-y left;
}
.content-fauxborder-right{
background: url(URL BLONDA DERECHA) repeat-y right;
width: 60px;
}
/* Header
----------------------------------------------- */
4.- Ha llegado el momento de trabajar con las URLs de nuestra imágenes. Yo las he subido a Google Fotos (antes Picasa), al ser el alojador de imágenes predeterminado de blogger es mucho más rápido que dropbox.
Hacemos click en la imagen para verla a tamaño real y pinchamos de nuevo con el botón derecho del ratón seleccionando: Copiar URL de la imagen.
5.- Y colocamos la URL de cada imagen donde corresponde. En mi caso el código queda así usando las blondas azules:
.content-fauxborder-left{
padding: 0 24px;
background: url(https://lh3.googleusercontent.com/-TmOXsV6IB4g/VPv9AdPN90I/AAAAAAAAiLc/xFQNqrNz2hw/w23-h207-no/body_izq_b.png) repeat-y left;
}
.content-fauxborder-right{
background: url(https://lh5.googleusercontent.com/-jt62LlGwFRo/VPv9AT-dr3I/AAAAAAAAiLg/JbPGghiC3Ck/w23-h207-no/body_der_b.png) repeat-y right;
width: 60px;
}
¡Ya está! Blondas enmarcando el cuerpo del blog.
Pero recuerda lo que te dije antes, si tu ancho del blog es diferente, tendrás que ir jugando con los valores en px que te he marcado en rosa hasta conseguir que tus blondas se vean perfectamente. Es cuestión de ir probando y dedicarle tiempo a entender el código. Cuando lo hayas hecho un par de veces... ¡te terminará saliendo solo!
¿Qué? ¿Te animas a usarlo en tu blog? ¡Si lo haces, déjame el enlace en comentarios para verlo!
¡HOLA EMPRENDEDORA!
¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER
Aprende a conectar con tu público ideal¡Y DISFRUTA DE TU TIEMPO LIBRE!
RESUMEN SEMANAL
Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.
Quede cositas aprendo siempre contigo, gracias guapa!!!.
ResponderEliminarYa lo tengo, pero como mi ancho es menor estoy moviendo los valores px, pero ni se inmuta... tengo que disminuirlos o aumentarlos para que se ajuste a mi ancho.
ResponderEliminarGracias
A veces es más sencillo adaptar el ancho del blog al diseño de las blondas desde el Diseñador de Plantillas si ves que modificando los px te da problemas, guapa ;)
EliminarPero es que las blondas están en los extremos...
EliminarPrueba a modificar el ancho total del fondo desde el Diseñador de Plantillas después de instalar las blondas y me cuentas :)
EliminarEn realidad las dos blondas están enmarcando los laterales del fondo del cuerpo de tu blog.
Modificando los px se puede hacer, pero es más complicado. La solución más rápida es modificar el ancho, si no te importa cambiarlo, claro ;)
Que buen tutorial, Celia! *-* GRACIAS!
ResponderEliminarCuriosamente si copio el código con las urls que habías puesto tú sólo se ve la derecha, y parcialmente, por más que modifico los parámetros la de la izquierda no se ve ni por asomo. Y lo más asombroso es que si utilizo mis urls no se ven ni la una ni la otra. Seguiré insistiendo. No obstante. Un abrazo.
ResponderEliminarHola Celia!!! Tu blog siempre es de referencia para cuando quiero cambiar algo en mi blog!!! que buena entrada!!! es mi biblioteca jijiji!!!!, mi pregunta es como haces para que te salga el codigo en HTML??? a mi me sale el código en XML y no me lo reconoce!.
ResponderEliminarhola y cual es el codigo para adornar la parte de arriba de la cabecera del blog ? como en esta imagen https://www.etsy.com/listing/198055991/blogger-blog-design-blogger-theme?ga_order=most_relevant&ga_search_type=all&ga_view_type=gallery&ga_search_query=templates%20blogger&ref=sr_gallery_19
ResponderEliminarCelia, no dejes de traer estas cositas a las bloggers.
ResponderEliminarMe encantan!! Besos!
Este comentario ha sido eliminado por el autor.
ResponderEliminares genial este tutorial
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola, Celia,
ResponderEliminar¿Y cómo se podría poner también la blonda arriba y abajo, haciendo un marco completo?
Muchas gracias,
Saludos
Para ponerla arriba, tienes que incluirla en el diseño del header y cuadrar los lados. Y en el footer igual.
EliminarEs un trabajo al detalle, pero cuándo se llevaban ese tipo de diseños, muchos blogs lo tenían así.
¡Saludos!
Muchas gracias, Celia, pero... ¿me podrías especificar un poco más? ¿qué código o método tendría que emplear tanto en el header como en footer? en el header había pensado incluir la blonda (bueno, en realidad no es una blonda, es una línea con imagen) en la imagen de cabecera, pero en el footer no tengo tan claro cómo hacerlo.
EliminarMuchas gracias de nuevo!!