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.
Tu Correo

ME APUNTO

Powered by ConvertKit

/* Layout */
.ck_form.ck_minimal {
/* divider image */
background: #f9f9f9;
font-family: ‘Helvetica Neue’, Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border: solid 1px #d1d1d1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
clear: both;
margin: 20px 0px;
text-align: center;
}

.ck_form.ck_minimal h3.ck_form_title {
text-align: center;
margin: 0px 0px 10px;
font-size: 28px;
}

.ck_form.ck_minimal h4 {
text-align: center;
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
padding-top: 0px;
margin-top: 0px;
}

.ck_form.ck_minimal p {
padding: 0px;
}

.ck_form, .ck_form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ck_form.ck_minimal .ck_form_fields {
width: 100%;
float: left;
padding: 5%;
}
/* Form fields */

.ck_errorArea {
display: none; /* temporary */
}

#ck_success_msg {
padding: 10px 10px 0px;
border: solid 1px #ddd;
background: #eee;
}

.ck_form.ck_minimal input[type=”text”], .ck_form.ck_minimal input[type=”email”] {
font-size: 18px;
padding: 10px 8px;
width: 68%;
border: 1px solid #d6d6d6; /* stroke */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
background-color: #fff; /* layer fill content */
margin-bottom: 5px;
height: auto;
float: left;
margin: 0px;
margin-right: 2%;
height: 42px;
}

.ck_form input[type=”text”]:focus, .ck_form input[type=”email”]:focus {
outline: none;
border-color: #aaa;
}

.ck_form.ck_minimal .ck_subscribe_button {
width: 100%;
color: #fff;
margin: 0px;
padding: 11px 0px;
font-size: 18px;
background: #33CCCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
cursor: pointer;
border: none;
text-shadow: none;
width: 30%;
float: left;
height: 42px;
}

.ck_form.ck_minimal .ck_guarantee {
color: #626262;
font-size: 12px;
text-align: center;
padding: 15px 0px 0px;
display: block;
clear: both;
}
.ck_form .ck_powered_by {
display: block;
color: #aaa;
font-size: 12px;
}

.ck_form .ck_powered_by:hover {
display: block;
color: #444;
}

.ck_converted_content {
display: none;
padding: 5%;
background: #fff;
}

.ck_form.ck_minimal.width400 .ck_subscribe_button, .ck_form.ck_minimal.width400 input[type=”email”] {
width: 100%;
float: none;
margin-top: 5px;
}

.ck_slide_up, .ck_modal, .ck_slide_up .ck_minimal, .ck_modal .ck_minimal {
min-width: 400px;
}

.page .ck_form.ck_minimal {
margin: 50px auto;
max-width: 600px;
}

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)