Cómo poner bordes en el blog


Primero recordemos algunos conceptos que ya vimos sobre la estructura de un blog.


estructura de un blog bordes
#outer-wrapper
es lo que envuelve a todo nuestro blog
#main-wrapper es donde escribimos nuestros artículos o entradas
#sidebar-wrapper es la columna en donde insertamos los gadgets.
#header-wrapper es la cabecera de nuestro blog
#footer-wrapper es el pie de página de nuestro blog


Repasados los conceptos, para poner bordes en el blog debemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la parte a la que le queremos añadir bordes (outer-wrapper, main-wrapper ...). Recuerda que para agilizar la búsqueda podemos teclear las teclas Ctrl + F.
4) Situados en la parte que queramos modificar por ejemplo main-wrapper (donde escribirmos las entradas) veremos que nos encontramos con algo así:


Pues deberemos añadirle otra línea con esto: border: 1px solid black; quedando así:




Si queremos modificar los valores de la línea debemos saber que:

border hace referenica al brode que queremos poner. Si quisiéramos poner sólo una línea a la derecha (right) deberíamos poner border-right, al igual que haríamos si quisiéramos a la izquierda (left), bottom (abajo) y arriba (top).

1px hace referencia al grosor de la línea. Cuanto más valor le demos, más gorda será la línea.

solid hace referencia al tipo de línea. En este caso será una línea sólida. Podemos cambiarla por dotted y será con puntos en lugar de una línea recta.

black hace refencia al color de la línea, podemos cambiarla por otro color como grey (gris) o el que nos guste más. También podemos cambiarlo por un color en código como por ejemplo #152435.

Recuerda que debe acabar siempre con ;

5) Damos a vista previa y si nos gusta guardamos la plantilla.

25 comentarios:

  1. Hola!, quisiera saber cómo puedo hacer para agregar un borde izquierdo en el sidebar, sin que quede pegado al texto.
    Desde ya muchas gracias, y como es vox-populi, excelente tutorial!!!!
    Ariel

    ResponderEliminar
  2. Hola Ariel. Mira estas dos entradas, ahi tienes las soluciones:

    1) http://www.quierocrearunblog.com/2009/08/anadir-una-linea-de-separacion-entre.html

    2) http://www.quierocrearunblog.com/2009/08/todo-sobre-los-bordes-y-lineas-en-tu.html

    Recibe un fuerte saludo.

    ResponderEliminar
  3. hola! muy bueno tu blog! me a ayudado en mucho!te queria preguntar.. como puedo hacer para tener bordes en cada elemento de la sidebar? porque puse todo lo que me decias y aparecio el borde y todo pero de toodaa la sidebar..
    queria saber si se puede y que es lo que tengo q hacer...
    desde ya,muchas gracias!

    ResponderEliminar
  4. Hola Tio Alegria. A ver que me aclare. Tu quieres que cada elemento de la sidebar sea como un bloque con todos sus bordes. Es decir, tal y como esta en este blog en la sidebar derecha. ¿Es esto?

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

    ResponderEliminar
  6. Hola tienes una página muy interesante ahora entiendo la estructura de un blog

    Tengo un blog (http://comoarreglomipc.blogspot.com) al que quiero incluir una sección fija dentro de la plantilla en la parte entradas del blog

    ¿Me podrías ayudar?

    Gracias

    ResponderEliminar
  7. Hola efveto. Gracias por tus palabras y por tu visita. ¿Lo que me comentas serían hacer un menú? Emplea el buscador de arriba a la derecha buscando menú. Te aparecerán varios muy interesantes para tu fenomenal blog.

    Un saludo.

    ResponderEliminar
  8. Hola! genial el tutorial!! añado un borde a mi sidebar pero la línea queda PEGADA al texto. Cómo puedo separarlo para que quede un espacio entre la línea y lo que hay dentro?

    (creo que te lo preguntó alguien esto mismo, pero en tus dos enlaces no encuentro la solución, al añadir el comando border-left: 1px solid #000000; se vuelve a desaparecer toda la barra que he añadido usando border: 1px solid black;

    Gracias!

    ResponderEliminar
  9. Hola Beatriz. Gracias por tus palabras y gracias por comentar. Prueba a añadir el siguiente código a continuación de border: 1px...

    padding-left: 10px;
    margin:0 0 1.0em;
    }

    Coméntame los resultados.

    ResponderEliminar
  10. holaa! muy buena tu pagina!!
    quisiera saber como hago para que estos bordes de las entradas (main-wrapper) no vayan de arriba hasta abajo sino de la manera como está en tu sidebar derecha... muchas gracias espero tu respuesta

    ResponderEliminar
  11. Hola Niko Kool. Me apunto tu pregunta y cuando pueda publicaré una entrada sobre padding y margin, que es lo que se necesita para lo que me preguntas.

    Un saludo y gracias por tu visita y comentario.

    ResponderEliminar
  12. a mi si que me gustaria saber como hicistes para que cada elemento de la sidebar derecha sea como un bloque

    ResponderEliminar
  13. Hola David Rubio. Gracias por tu visita y gracias por comentar. Es muy largo explicarlo por un comentario. En cuanto pueda crearé una entrada sobre ello. Pero te anticipo que se hace con padding y margin (modificando la plantilla).

    Saludos.

    ResponderEliminar
  14. suena complicado pero viendo el resultado creo q merece la pena

    saludos

    ResponderEliminar
  15. Hola David. En cuanto pueda lo haré. No puedo decirte cuándo, ya que tengo muchas cosas pendientes en este blog y apenas tengo tiempo para ello. Espero que lo entiendas. Un saludo, gracias por tu visita y por tu comentario :)

    ResponderEliminar
  16. hola. no encuentro como colocar una colunma a la izquierda de mi blog? ayuda...

    ResponderEliminar
  17. holaa, mira puse un borde pero solamente se ve en la parte de arriba y de abajo pero se corta en una parte la linea, como hago para que quede toda seguida ?

    http://www.already-bad.blogspot.com

    asi me kedo el codigoo:
    #sidebar-wrapper {
    width: 400px;
    float: $endSide;
    border-left:5px dotted white;

    que hice mal ? desde ya muchas gracias.

    ResponderEliminar
  18. @RD-Juegos. Por favor, acuérdate de respetar las normas. Tengo pendiente crear esa entrada. Pido un poco de paciencia ;) Gracias

    @Anaa. Hola Ana, fíjate bien en la explicación que di en la entrada. En el código que me has puesto el borde hace referencia a left (izquierda). "border hace referenica al brode que queremos poner. Si quisiéramos poner sólo una línea a la derecha (right) deberíamos poner border-right, al igual que haríamos si quisiéramos a la izquierda (left), bottom (abajo) y arriba (top)." Un saludo

    ResponderEliminar
  19. hola! tengo un problema, cuando intento aumentar el grosor de la linea esta no aparece, sólo me deja ponerla de 1px y yo quería poner 5, como se puede solucionar?

    gracias de antemano.

    ResponderEliminar
  20. como puedo hacer para que mis elementos en mi sidebar ocupen todo el espacio por ejemplo como el tuyo..ya que en el mio queda espacio que sobra en la sidebar...
    ojala me puedas ayudar y muy buen dato
    saludos

    http://todoespoker.blogspot.com

    ResponderEliminar
  21. Hola, buscando ayuda llegue aqui xD. Quiciera saber como puedo hacer de que ma cabecera de mi blog encaje en los bordes, porque por mas grande que sea la imgaen, no termina de encajar en la parte de arriba. http://img59.imageshack.us/img59/1999/ell.png ¿como puedo lograr que mi imagen encaje perfectamente en los bordes?

    ResponderEliminar
  22. Hola

    No encuentro la seccion main-wraper (la plantlla es de un proveedor de Blogger) Puede ser POST?

    Gracias

    ResponderEliminar
  23. Hola tengo el mismo problema que Pedro no encuentro main-wraper !!!!
    gracias d antemano y x tu gran blog

    ResponderEliminar
  24. Hola, no entiendo de lenguaje html, pero he intentado hacer esto en el blog q estoy haciendo para mis alumnos y no encuentro esto de main wrapper. Con q otro lenguaje puedo encontrarlo?

    ResponderEliminar
  25. doy expandidas y sin expandir en diseño antiguo y nuevo cntrl F, busco #main-wrapper, main, wrapper... pero no me sale nada que tenga que ver... puede ser por la plantilla?? que hago? D:
    respóndeme en alguno de mis blogs si es posible para que me pueda enterar

    ResponderEliminar