29/1/13

Como añadir un borde alrededor de la columna en Blogger

La semana pasada vimos paso por paso cómo diseñar un blog (el mío en este caso ;)

Y ya os expliqué también cómo podemos centrar las pestañas de las páginas en Blogger, que es un detalle que yo tengo y que probablemente no supierais hacer.

Y hoy para terminar esta serie de posts del Making off de mi blog, vengo a traeros un tercer truco.

No es necesario saberlo. En la mayoría de los blogs queda mejor sin él, pero puede ser el detalle que marque la diferencia en un blog más sosete como el mío.

Mirad qué poca gracia tiene sin línea rosa:



Además es muy fácil. Quizá tengáis que poner un poco más de atención de lo normal, pero una vez de que lo habéis entendido es realmente fácil.

Os lo explico en un paso por paso detallado para que no haya lugar a dudas o errores, pero no olvidéis antes hacer copia de seguridad de vuestra plantilla por lo que pudiera pasar...

De hecho, también sabéis que suelo recomendar hacer un pantallazo del antes y el después para que sepáis cómo estaba antes de hacer ese cambio concreto.

En el tutorial que os escribí el otro día sobre cómo instalar el botón Pin it en Blogger, no hacía falta porque ya en el propio código yo escribí "comienzo código pin it" y "fin codigo pin it", pero hay en cosas que no se puede hacer así, por lo que no está de más tener fotos de cómo estaba antes haber cambiado eso, por si en el futuro queremos quitarlo.

En fin, para poner el borde alrededor de la plantilla simple:


Plantilla

Edición HTML

✎ Ticamos Expandir plantillas de artilugios

✎ Y buscamos (pulsando Ctrl + F):

content-outer

Poco más abajo veréis que pone:

margin-bottom: 1px;
}

Nota: Lo que tengáis arriba de eso puede variar dependiendo de si habéis quitado la sombra que sale alrededor de la columna tal y como os expliqué hace un tiempo.

Si no lo habéis hecho veréis esto:


Y sí si lo habéis hecho (es decir, habéis borrado la sombra) veréis un hueco, ya que para borrar la sombra nos cargábamos las cuatro líneas esas que dicen shadow.

No pasa nada.

El reborde se añade justo encima de la línea que dice margin-bottom: 1px; independientemente de lo que haya encima de eso.

Cada línea/borde de nuestro diseño irá en una línea en la plantilla.

Por ejemplo, si yo escribo:

border-right: 7px solid #000000;

Quiere decir que me va a salir una línea/reborde de 7px de ancho en la derecha de la columna y en color negro


Vamos a verlo poquito a poco:

1) border-right:

Significa obviamente que es el borde/reborde de la derecha.

En las siguientes líneas, una detrás de otra, deberíamos ir añadiendo los siguiente bordes.

Como la primera dice right (derecha)
La siguiente línea será igual pero diciendo left (izquierda)
La siguiente top (superior) - aunque si tenéis barrita de Blogger arriba no hace falta
Y la siguiente bottom (inferior)

2) 7px

Es el ancho de la línea (la mía rosa por ejemplo, que es más fina que esta negra del ejemplo, es de 3px). Obviamente cuanto mayor sea el número que le pongamos, más gordita se verá la línea y viceversa.

3) solid

Quiere decir que es una línea sólida. Podemos cambiar esto por otras cosas.

En realidad se pueden poner bastantes cosas, pero yo recomiendo que si vais a poner un borde sea:

solid (línea sólida)
dashed (con guiones)
dotted (con puntitos) - que aviso, no quedan super redondeados ;)

4) #0000000

Es el color de la línea. Esto ya lo conocéis.

;

Se pone antes de pasar a la siguiente línea.

¿Veis que fácil?


Veamos un ejemplo:

Yo, para que mi borde se vea tal y como se ve en mi blog, tengo puesto:

border-right: 3px solid #fdb8b6;
border-left: 3px solid #fdb8b6;
border-top: 3px solid #fdb8b6;
border-bottom: 3px solid #fdb8b6;

Veis cómo se ve en mi plantilla aquí:


Podéis ir probando diferentes combinaciones e ir dando a Vista previa hasta que tengáis el reborde como os guste.

✎ Y una vez de que lo tenéis listo: Guardar plantilla

Por supuesto, si en el futuro queréis cambiar el diseño y quitar la línea, podéis borrar eso y ya está (para eso hemos hecho una "foto" del antes y el después de nuestra plantilla, para "recordar" cómo estaba hecho antes del cambio y saber deshacerlo sin problema)

Como veis es increíblemente fácil tener un diseño bonito y con apariencia profesional una vez de que hemos aprendido los básicos.

Y por si hay alguna despistada por ahí que aún falta por aprender los básicos y no le fue suficiente la publicidad que hice la semana pasada de mi curso... podéis comprarlo directamente aquí.

Creo que si aún sois relativamente nuevas en esto y no conocéis bien todas las funciones que Blogger nos ofrece o cómo podéis diseñar vuestro propio blog sin tener ni idea de Photoshop, Corel, Illustrator o cualquier otro programa de diseño... ¡este es, sin duda, vuestro curso!

Gracias a los testimonios que he recibido he sabido de primera mano que se hace muy fácil de seguir y de entender, y que aprendéis muchísimo. Es más, como una imagen vale más que mil palabras, lo que más me ha llamado la atención, mucho más aún que los preciosos emails dándome las gracias, ha sido el hecho de ver lo preciosos que han quedado todos los blogs hechos gracias a él...

Además, pronto voy a hacer una selección de mis preferidos para mostrar en una galería en mi blog. ¿A qué esperas para enseñarme el tuyo? ;)

Besos y nos vemos mañana a las 11 h.

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

72 comentarios

  1. Gracias por el tuto blanca!! y por el esfuerzo :)

    ResponderEliminar
  2. Mil gracias por todo!!!
    Animo a todas a comprar el curso, es fácil, fácil y se pueden hacer maravillas!!!!!!!!! Yo no tenía ni idea y me encanta el resultado tras el curso.

    ResponderEliminar
  3. Como siempre un tutorial fantástico. A ver si me pongo d euna vez con los últimos...
    bss!

    ResponderEliminar
  4. Gracias Blanca ya esta hecho y la verdad es que se queda muchísimo mas curioso.

    ResponderEliminar
  5. Un millón de gracias, voy volando a probarlo. Tengo 2 blogs desde hace un año he ido aprendiendo sola pero ahora al conocer tu blog me animo a hacer mas cosas. Uno con la plantilla watemark: pundecreu-loula.blogspot y el otro con la plantilla simple (es una tienda): loulabos.blogspot.com , estás invitada a visitarme y desde luego que acepto críticas, siempre pienso que son constructivas. Gracias de nuevo por estas aportaciones a nuestros blogs. Besos y feliz día.

    ResponderEliminar
  6. Gracias !! Con varios tutoriales tuyos, cambié completamente el look de mi blog !! Estoy super feliz con como quedó♥ Besitos

    ResponderEliminar
  7. Muchas gracias por tus tutoriales!!!!

    Te sigo desde hoy y te añado a mi blogroll!!!!

    Besitos!.

    ResponderEliminar
  8. Como molaaaaa!! Yo ésto por ahora no lo quiero llevar a la pràctica, pero me parece tan útil todo lo que nos explicas...
    Gracias.
    Mil besos

    ResponderEliminar
  9. Bien! Leído... te explicas tan bien, que parece fácil.

    Voy a ello... Intención: puntitos rojos. Ya veremos!

    ResponderEliminar
  10. Tengo un problema a mi no me sale nada de eso, donde lo pongo!!!!!!

    ResponderEliminar
    Respuestas
    1. Mi Jardín de Retales, puede ser porque tu usas la plantilla Ethereal, aunque no te lo puedo asegurar porque no conozco esa plantilla bien.

      Yo siempre hablo para la plantilla Simple, que es la más común, la más simple y con más opciones de personalización y la que vemos en mi curso para principiantes...

      Y luego sigo desde ahí, porque no podría hacer un tutorial personalizado para la gente que usa distintas plantillas...

      En cualquier caso debería de salirte algo parecido. Si no, busca en Internet.

      Besos,

      Eliminar
  11. Jo Blanca, no me extraña que la gente te adore, si es que a pesar de poder crear un curso especifico de detalles y así ganar un dinero lo ofreces aquí de gratis. Esos detalles creo que hacen marcar la diferencia de un blog a otro. enhorabuena.

    ResponderEliminar
  12. Me parece muy chulo! Aunque creo que voy a pasar que si no voy a acabar con un blog demasiado barroco...

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

    ResponderEliminar
  14. Claro que si Blanca! Con lo bien que explicas y lo fácil que lo pones.. ¿Como no van a quedar bien?

    Besos

    ResponderEliminar
  15. Me ha pasado lo mismo que a "Mi jardín de retales".. lo he puesto tal cual igual que tu y no me aparece el reborde por ninguna parte... y creo que yo si que uso la Simple. Mañana con más calma y mas sueño lo volveré a intentar a ver si hay mas suerte

    Si no seguiré tu consejo y buscare en el interné!

    Un abrazo!

    ResponderEliminar
  16. Como siempre genial! Mil gracias :) Besos

    ResponderEliminar
  17. Muchísimas gracias por tus tutoriales. Fáciles de entender. Me ha quedado estupendo.

    Un abrazo

    ResponderEliminar
  18. Lo acabo de poner en mi blog y estoy encantada. Muchisimas gracias por los tutoriales tan maravillosos que nos regalas!

    Kate

    ResponderEliminar
  19. En su día no lo hice por los exámenes y hoy me he puesto manos a la obra! ya está, color verdoso y sin sombra! queda genial! cuando lo pusiste en tu blog lo quise, así que este tutorial me ha servido de mucho.

    Besos
    Bea de Bocados Divinos

    ResponderEliminar
  20. Hola,
    Estaba intentando que la línea rosa me saliese alrededor de la parte central (que es verde) en vez de en la exterior (que es translúcida), pero no consigo. ¿Me podrías ayudar? Mil gracias por avanzado.

    Sweet Faery Creations

    ResponderEliminar
  21. Ah!!! Lo conseguí!!
    Por si quieres compartirlo, he ido a editar Html, he buscado:
    /* Posts
    ----------
    Y debajo de donde ponía
    .post-outer {
    background-color: $(post.background.color);

    He sustituido:
    border: solid 1px $(post.border.color);
    por los parámetros que yo quería:
    border-right: 3px dashed #faa9e6;
    border-left: 3px dashed #faa9e6;
    border-top: 3px dashed #faa9e6;
    border-bottom: 3px dashed #faa9e6;
    Aunque no te haya dado tiempo a contestar a mi duda (soy cabezota y hasta que no consigo lo que quiero, no paro. Debe ser mi parte maña, jejeje) Gracias de todos modos, porque tú me has inspirado para hacer estos cambios en mi blog.

    ResponderEliminar
    Respuestas
    1. Pues tampoco me sale lo de post por ningún lado...

      Eliminar
    2. Gracias CAROL!!!! A mi con esto también me ha salido!!!!

      Eliminar
  22. Hola, ya sé que esta entrada es vieja, pero ya por fín he puesto el marco en 2 min. Genial! Lo que no sé es si no lo voy a cambiar de nuevo! jajaja. No paro de modificar todo!

    ResponderEliminar
  23. No me funciona me pone "Se encontró más de un widget con el código id: HTML12. Los códigos ID de los widgets deben ser exclusivos.

    Error 500"

    ResponderEliminar
  24. ¡Hola! lo he puesto ya en dos blogs y ahora en el tercero (plantilla simple) no me sale..y no se que más hacer porque lo estoy haciendo igual...:(

    ResponderEliminar
  25. BLANCA! una pregunta.. si cambias la plantilla del blog desaparecen todos los cambios como los del borde??!
    Me parece un rollazo tenerlo que poner cada vez.. esto y otros muchos más cambios, no se si es así o lo estoy haciendo mal!

    ResponderEliminar
  26. Hola Blanca. Sólo comentar una cosita, ha cambiado lo de la edición html y no veo lo de expandir artilugios. Miedito me da tocar nada... ;/

    ResponderEliminar
  27. Blanca: AUXILIOOOOoooOOOooooOO . HAbía puesto mis bordecitos de lo más lindos, pero hice un cambio y quiero quitarlos. EL problema es que con la plantilla nueva de blogger, no lo encuentro.
    Por fis, échame una manito a ver si doy con el famoso border rigth, border left, border top, border bottom.
    Millones de gracias
    Besitos
    Ale

    ResponderEliminar
  28. hola Blanca, qué tal? Me permites una duda?
    Cómo puedo añadir una línea entre la entrada y el sidebar??? tu la tienes gris finita, no se como añadirla ;-(
    Besitos

    ResponderEliminar
  29. como le pongo una barra de navegacion a mi blog

    ResponderEliminar
  30. Hola Blanca tengo un poblemo, veo que la entrada es vieja, y como ha cambiado blogger, cabio la edicion html mucho, y ya no aparece ni eso, ni nada parecido! AUXILIO! podrias fijarte como hacer en el nuevo blogger?

    ResponderEliminar
  31. Hola Blanca,soy nueva en este mundo,llevo poquitos días y entre todo lo que voy viendo en tu blog y algunos otros estoy intentando crear yo misma el mio propio.Paso muchas horas buscando y probando...,la casa,el bebé y el resto de cosas no me dejan avanzar todo lo que quisiera.Pero hoy estoy muy contenta porque ya tengo algunos cambios,y estos son debidos a los blogs que como tu me enseñais.Muchas gracias y espero que pronto acabe de personalizarlo para ponerlo en funcionamiento.Un saludo

    ResponderEliminar
  32. Jopetas, pues a mí tampoco me sale eso en la plantilla htlm. Ais... que yo quiero ponerle coloritooooo. Bueno si algún día tienes tiempo y quieres nos cuentas cómo se hace ahora con los cambios bloggeriles de última hora. Un beso muy grande y gracias por todo.

    ResponderEliminar
  33. Necesito un reborde en mi vida.

    ResponderEliminar
  34. Gracias..gracias..gracias!!! MERCI! :) <3

    ResponderEliminar
  35. Hola Blanca!!
    Me encanta tu blog, estoy preparando para sacar el mio y esto ha sido todo un descubrimiento!!!
    He tenido diferentes blogs, pero nunca había sabido ponerlo 'bonito'.
    Me gustaría saber cómo se puede poner una línea como está, pero para separar la parte central, donde van los post; de la barra lateral derecha, donde se pone el archivo, perfil... (como la tienes tu también)
    Muchismas gracias!!!

    Un saludo!!
    Laura

    ResponderEliminar
  36. Hola Blanca, vine aquí a pedir tu ayuda!!! Bueno, el asunto es que Blogger ha cambiado y ya no aparece, al menos a mi, "Expandir plantillas de artilugios"... Soy nueva en esto de crear mi propio blog y con los estudios y demás se me hace un tanto difícil avanzar, gracias a ti y tus consejos, mejoré bastante. Se que con esto de rebordar quedará muchísimo mejor, así que por favor, si podrías ayudarme te lo agradecería por siempre♥ Desde ya Muchas gracias por todo, Te manda un saludo, Yo! :D

    ResponderEliminar
  37. Muchas gracias por este tutorial, super facil y muy bien explicado. Me encanta siempre poder encontrar tutoriales en español.

    Nota/Duda:

    Todavia no he visto algun tutorial que muestre como crear la division entre los "widgets" y tus entradas y comentarios. En tu blog esta division que estoy hablando la tienes color gris y bien finita creo que es 0.5px .No se si es que no has creado algun tutorial o soy yo que no lo encuentro. De tenerlo podrias dirigirme a el y de no tenerlo me encantaria ver un tutorial con ella.

    Gracias!! Otra vez excelentes tutoriales :D

    ResponderEliminar
    Respuestas
    1. Jessibeth, tienes que ir al Diseñador de plantillas - Avanzado - y donde dice Acentos, ponerlo gris.

      Hay dos: uno que es ese sepador que dices y el otro es para las pestañas/páginas. El que tu quieres es el de la izquierda (color de la línea del separador)

      Besos

      Eliminar
  38. ala otra cosa mas que le planto a mi blog ¡¡¡pero que mono me está quedando!!!!! MUCHISIMAS GRACIAS

    ResponderEliminar
  39. Hola!
    La verdad es que me encanta tu blog, aunque muchas de las cosas no puedo hacerlas como ésta porque tú usabas la interfaz antigua de blogger creo y entonces al editar el HTML (cosa que no entiendo y no sé hacer) no salen las mismas cosas que muestras.
    Por ejemplo en esta foto si yo busco "content-outer" no me sale ni nada parecido...
    Así que como puedo hacerlo con el blog de ahora? O es que soy simplemente torpe?

    ResponderEliminar
  40. Muchisimas gracias, me ha ayudado mucho!

    ResponderEliminar
  41. Ainss!! lo que me ha costado hacer esto..y todo porque no habia hecho un intro donde tocaba...
    Gracias.

    ResponderEliminar
  42. Mil gracias por el tutorial, me ha servido muchísimo!!!

    ResponderEliminar
  43. Hola Blanca! Estoy intentando hacer este tutorial para mi nuevo blog y ya no sale counter-outer. Ha cambiado blogger el diseñador de plantillas?? Es que tampo sale lo de expandir formato de artilugios. ¿Le puedes echar un vistazo? no se si es mi ordenador o es que lo han cambiado!!!
    Gracias!!!

    Mil besos

    Sonia

    ResponderEliminar
    Respuestas
    1. A mi me pasa lo mismo, has conseguido resolverlo??? Gracias!

      Eliminar
  44. Hola! Quisiera saber si es posible poner una imagen (o cenefa) como borde, en vez de una línea.

    ResponderEliminar
  45. Que bien queda!! Yo en vez del color de mis títulos lo he puesto del color de mi fondo ya que me quedaba muy cargado. Que alegría que estés aquí para solucionarnos la apariencia de nuestro blog, bueno y más cosas...

    ResponderEliminar
  46. Gracias por esta lección, siempre enseñas cosas muy útiles! Y feliz año nuevo

    ResponderEliminar
  47. Buenoooo! Hace unos meses no pude poner el borde peeeero HOY SIIII! Estoy creando un blog nuevo y me está quedando genial! ¡Gracias! :-)

    ResponderEliminar
  48. ¡Gracias, me encanta!
    No tenía ni idea y me estaba preguntando como habías puesto el borde de color rosa, y ya con este post me enteré. jejejeje ¡Y me ha salido a la primera! Bueno, menos las veces en las que he cambiado el color, pero lo importante es que me ha salido. jejeje
    Me encanta tu blog.

    ResponderEliminar
  49. Hola blanca sigo tus pasos pero cuando le doy a:''Plantilla'' no me sale ''Edición de HTML'' me sale ''editar HTML'' ayudame porfavor que ago?

    ResponderEliminar
  50. Blanca, la verdad que eres de gran ayuda. Seguimos tus explicaciones y aplicando!
    Besos

    ResponderEliminar
  51. Me encanta!! =) Gracias por todo lo que haces y lo bien que lo explicas!

    ResponderEliminar
  52. Buenisimo, muy bien explicado, lo aplique a mi blog.

    Gracias

    ResponderEliminar
  53. Blanca perdona pero es que no me sale "Edición de HTML" de que otra menera podría hacerlo,. Espero tu pronta respuesta. Graciassss

    ResponderEliminar
  54. Blanca ¿con la nuevo actualización de edición HTML cómo podemos hacer este post?Graciasss

    ResponderEliminar
  55. Muchas gracias!! Me ha encantado esta opción! Ya la tengo en mi blog (www.aprendofrancesenprimaria.blogspot.com). Gracias de nuevo!!!

    ResponderEliminar
  56. Hola Blanca! Me encanta tu blog y su diseño! Yo estoy manos a la obra con el mío que se basa en una tienda de corsetería. Mi pregunta es la siguiente....cómo hago para poner una decoración como la que pusiste en too el cuerpo del blog? me refiero a los volantitos de encaje que tiene todo el blog. Un saludito y sigue así! :)

    ResponderEliminar
  57. muy buenas Blanca, estoy haciendo un receso de tu curso como ganar dinero con tu blog. y me he puesto a indagar a ver como podria cambiar mi borde por uno de puntitos. y no consigo saber en la plantilla donde esta. He seguido este tutorial tuyo y no me sale la parte de margin. Tambien estaria interesada en saber como poner un borde personalizado del estilo a tu puntillita. gracias!!!!

    ResponderEliminar
  58. Blanca, a mí no me sale margin botton por ningún lado,¿ de que otra manera puedo hacerlo con la nueva versión html?
    besos, y gracias por tu ayuda

    ResponderEliminar
  59. Hola Blanca! Soy nueva, y estoy empezando poco a poco! Me ha encantado tu blog! Y me encanta este diseño que tienes para la entrada.
    Como le podría poner algo asi de ese estilo, te queda genial es estilo puntilla este! Y otra preguntita, como rodeo cada una de los cosas que pongan en mi barra horizontal ? Muchas gracias!

    ResponderEliminar
  60. Hola, Blanca!!
    Tengo una duda con respecto a los bordes en el blog, pero no de los que comentas, sino del borde blanco de puntilla que tienes puesto y que he visto en muchos otros blogs. Son dos las dudas que tengo: 1) ¿dónde se consiguen los bordes? buscando en las imgánes de google no he encontrado bordes de este tipo y 2) ¿cómo se ponen luego en el blog?
    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Ya somos dos con la misma duda jejeje llevo mucho teimpo buscando y nada...

      Eliminar
  61. ¡CÓMO ME ENVEJECTE CON LA AYUDA DE LAS HIERBAS !!!
    Nunca pensé que serían un milagro en el Internet hasta que entré
    Contacto con el Dr. Baz finalmente lo hice con la ayuda con sus poderosas HIERBAS que fue recomendado por una dama en el centro del bebé que ayuda
    Antes, nunca creer que era real hasta que lo confirme ahora porque tengo
    He intentado tantas cosas para asegurarme de quedar embarazada pero no hay suerte, inmediatamente
    contáctalo. Preparó las hierbas y me envió
    Que tomé, me quedé embarazada una semana después, y ahora tengo un hijo para
    espectáculo. Muchas gracias Dr. y yo recomendamos Dr. Baz para todo el mundo fuera
    Allí que está dispuesta a tener un hijo de su propia por ahí. Contactarlo para
    Ayuda también él es real y potente, lo he confirmado, en contacto con él en el correo electrónico:
    Número de WhatsApp +2348066141253
    DRBAZSPELLHOME@GMAIL.COM

    ResponderEliminar
  62. Mi vida es hacia atrás, estoy muy feliz de compartir este testimonio de cómo el Dr. Baz Ayurveda, que era confiable para recuperarse de la enfermedad del herpes, por lo que se detectó positivo el 23 de agosto de 2013, y desde entonces he estado buscando un Manera de tratar y curar la enfermedad para mí, pero todas las formas en que no probé la solución, hace unas semanas vi un testimonio de cómo algunas personas se acercaron por vía electrónica al Dr. Baz, que era confiable para curarlos de la enfermedad del Herpes, Sin embargo, yo había oído hablar de él en los medios de comunicación cuando, un simple joven pasado dio su testimonio sobre este mismo médico, y se fue sin mensajes Espero que el Dr. Baz, diciéndole todo mi problema, me dijo lo que Él iba a enviarme La parte que voy a tomar y después de tomar esta parte de la hierba me envió, me dijeron que volver al hospital para la verificación y después de haber hecho lo que iba a venir y decir la buena re Cuando vi el mensaje que estaba Tan sorprendido y todavía no creía que me curaría, y mi amigo historia soy VIH negativo Ahora, después de muchos momentos de dolor, no estoy, y mi enfermedad ha desaparecido, gracias a Dios guiando a este hombre .... usted puede enviarlo por correo electrónico a Drbazspellhome@gmail.com
    Número de WhatsApp +2348066141253
    {1} VIH / SIDA
    {2 CÁNCER
    {3} HERPES
    {4} DIABETES
    (5) HERBITTITIS B
    (6) HPV

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.