Cómo redondear las esquinas de nuestro blog - Tutorial blogger


Aprovechando que he tenido que hacer algunos cambios en mi blog y tengo los cambios recientes, os voy a explicar como redondear la parte central de nuestro blog, para que quede más bonita.






Es muy fácil de modificar, tendremos que tocar un poquito el código, pero es mínimo, ya veréis que son dos lineas.

Con esta pequeña modificación podemos conseguir que el diseño sea algo diferente, ya que podemos poner un fondo de imagen, y poner la parte central de un color liso con el detalle de las esquinas. Esto suaviza las lineas y es menos duro el cambio.

Debéis tener en cuenta, que si vais a utilizar un fondo central de color, todas las imágenes que utilicéis para el blog y que estén dispuestas en la zona central, deberán tener el fondo del mismo color o que éste sea transparente. Creo que el blanco es el mejor fondo para una buena lectura, pero dependerá del diseño de tu blog y de tus gustos, los colores pastel bien claritos también quedan perfectos.

Pues vamos allá con la parte técnica, que es bien fácil.



Por defecto en las plantillas de blogger sólo encontramos el modelo cuadrado, pero con una sencilla instrucción se puede modificar. Ésta misma instrucción puede utilizarse para cualquier otra parte del blog, es decir, que si queremos redondear una imagen, por ejemplo, añadiendo la misma instrucción a la imagen conseguiríamos el redondeo de las esquinas también.

En primer lugar, abre la plantilla de blogger.





Una vez abierta, busca en el código el siguiente texto (os recuerdo, que para buscar texto dentro de la plantilla, podéis pulsar las teclar ctrl+G, de está manera podremos escribir o pegar el texto que queremos buscar):

.content-inner {
background-color: #ffffff;

Aprovechando que tocamos esta parte del código, también tenéis la instrucción 'background-color'. Modificando el código de color de esta instrucción conseguiríais que la parte central de vuestro blog canvie de color. Mi código de color es #ffffff, el color blanco, pero puede que el tuyo sea distinto. En todo caso, deberás hacer exactamente lo mismo, aunque tu código sea otro.

Vamos al lío, debéis enganchar justo debajo de  'background-color: #xxxxxx;'  lo siguiente:

border-radius:70px;
-moz-border-radius:70px;
-webkit-border-radius:70px; 
}

El número que esta marcado en rojo es el radio de la curva, obviamente puede ser modificada a vuestro gusto, a mayor número mayor redondeo. Si pusieramos un 0 no existiría curva y nos saldría cuadrado.

¡Y listo! inmediatamente después de guardar los cambios ya tendremos las esquinitas del blog redondeadas.

Espero que os sirva el tutorial :)

Besos, Clàudia


4 comentarios:

  1. Muchísimas gracias, ahora porque no tengo fondo pero siempre me ha encantado con los bordes redonditos. Si le cambio el fondo, se lo hago.

    Sololeal❤️

    ResponderEliminar
  2. Me ha encantado el tutorial!! *___* Muy muy útil :D
    De hecho, ya lo he puesto en práctica en mi blog ^^
    Muchas gracias :-*

    ResponderEliminar
  3. Muchas gracias por el tutorial.

    ResponderEliminar

Gracias por decir la tuya :)