lunes, 6 de septiembre de 2010

Poner borde / enmarcar las entradas en blogger.

Poner borde / enmarcar las entradas en blogger.


[1] Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código: (busca con control + F).

.post { 

[2] Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:

border:1px solid #000;

El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.

[3] Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:

padding-left: 10px;

El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:

border-bottom:0px dotted $bordercolor;

[4] Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:

background: #ddd;







Si quieres más información sobre los bordes puedes visitar la siguiente entrada: Tipos de bordes.

Padding es la separación o distancia que habrá entre el borde y el comienzo del texto. Margin es la distancia de separación entre el borde y la parte exterior del elemento. Cambia los valores de padding y margin según tus necesidades y la estructura de tu blog. Cada plantilla de Blogger es un mundo. Si te quedan dudas fíjate en esta imagen extraída de comocreartuweb.



5) Por último clica en vista previa y si todo está bien, guarda tu plantilla.





Actualización
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código, teniendo en cuenta que se verá correctamente en Firefox, ya que en IExplorer las esquinas se verán cuadradas:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;

2 comentarios:

  1. Hola! Me ha gustado mucho tu entrada, pero estoy teniendo problemas para enmarcar el contenido de mi blog... el caso es que en mi plantilla html no existe la secuencia .post{ Alguna sugerencia? Muchísimas gracias : )
    LaMelenaDeLeón

    ResponderEliminar
  2. Hola me a servido pero me gustaría saber si se puede reducir el espacio entre entrada y entrada en la página principal lo quiero reducir en este blog:https://misempleo.blogspot.com/

    ResponderEliminar