Tutorial Blogger: blondas enmarcando las entradas del blog

mayo 12, 2015

como poner blondas alrededor del blog

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í:

.content-inner {
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.


Powered by ConvertKit

Te encantará:

16 pensamientos ¡falta el tuyo! ;)

  1. Quede cositas aprendo siempre contigo, gracias guapa!!!.

    ResponderEliminar
  2. Ya 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.
    Gracias

    ResponderEliminar
    Respuestas
    1. 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 ;)

      Eliminar
    2. Pero es que las blondas están en los extremos...

      Eliminar
    3. Prueba a modificar el ancho total del fondo desde el Diseñador de Plantillas después de instalar las blondas y me cuentas :)

      En 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 ;)

      Eliminar
  3. Que buen tutorial, Celia! *-* GRACIAS!

    ResponderEliminar
  4. Curiosamente 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.

    ResponderEliminar
  5. Hola 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!.

    ResponderEliminar
  6. hola 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

    ResponderEliminar
  7. Celia, no dejes de traer estas cositas a las bloggers.
    Me encantan!! Besos!

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola, Celia,

    ¿Y cómo se podría poner también la blonda arriba y abajo, haciendo un marco completo?

    Muchas gracias,
    Saludos

    ResponderEliminar
    Respuestas
    1. Para ponerla arriba, tienes que incluirla en el diseño del header y cuadrar los lados. Y en el footer igual.

      Es un trabajo al detalle, pero cuándo se llevaban ese tipo de diseños, muchos blogs lo tenían así.

      ¡Saludos!

      Eliminar
    2. 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.

      Muchas gracias de nuevo!!

      Eliminar



¡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.