9 de junio de 2016

Añadir un marco a una entrada del blog

Añadir un marco a una entrada del blog en Blogger


Hoy voy a modificar el aspecto de una de las entradas de mi blog para diferenciarla de las restantes.
En principio solo voy a colocarle un marco para resaltar su contenido.


Aprendiendo a añadir un marco a una entrada en Blogger


Para eso voy de nuevo a editar esta entrada y abro la pestaña de HTML como hicimos en el caso explicado anteriormente.
(Ver "Modificar el color de fondo de las entradas de un blog").

En la primera línea está el código que ya habíamos escrito, y añadimos los atributos marcados en negrilla,

<div style="background: #f0ffff; border-radius: 25px; border: 20px groove darkblue; padding: 80px 150px;">

border-radius redondea las esquinas del marco que hemos creado
border:20px indica el grosor del marco
groove es un estilo de borde pero tenemos otros 7 estilos más
Estilos bordes CSS
Añado el color del marco, darkblue, un azul oscuro.

Y modifico la propiedad padding (establece la anchura de algunas o todas las zonas de relleno de los elementos), estableciendo 80px de relleno vertical y 150px de relleno horizontal.

El resultado final es el siguiente,

Resultado marco en entrada blog