Todo para tu blog; trucos blog; personaliza tu blog con html

Para insertar un texto en una caja tal que se muestre así;

Contenido del párrafo

Debereis usar el siguiente código;

Para poder personalizar vuestro código teneis diferentes variables que pueden cambiar la apariencia de la caja de texto, empezaremos con border, su valor como podeis comprobar es númerico simplemente cambiando el 1 por 4 puede variar la apariencia de nuestro bloque de texto tal que así

Contenido del párrafo

La siguiente variable es solid black se refiere al color del color del borde de nuestro bloque tal que si lo cambiamos por blue (por ejemplo) nos quedaria así

Contenido del párrafo

La siguiente variable se refiere a el ancho de el bloque de texto padding; 10px, como podreis observar nos enfrentamos a otro valor númerico deberemos personalizarlo según el efecto final que deseemos conseguir

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu enim ut lorem tincidunt condimentum. Curabitur ac odio non tellus eleifend convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis arcu. Praesent ante ante, porttitor et, interdum in, mollis eu, libero. Nullam magna neque, dapibus nec, dictum in, pulvinar sed, lectus. Aliquam erat volutpat. Suspendisse sit amet nunc. Maecenas vel purus. Aenean nec mauris non orci fringilla scelerisque. In at nulla nec ipsum gravida auctor. Vestibulum enim nisl, lacinia at, condimentum id, tempor a, est. Sed faucibus quam a nisl. Quisque orci nunc, pharetra a, blandit eget, ullamcorper ac, nunc. Morbi consectetuer aliquet risus.

Donec id tortor. Suspendisse eget ipsum sit amet felis convallis auctor. Integer porttitor dictum velit. Pellentesque pharetra. Aenean sed leo quis neque pulvinar auctor. Sed porttitor felis scelerisque nulla vestibulum blandit. Pellentesque non lacus ac leo malesuada eleifend. Donec eu justo pulvinar libero pretium aliquam. Integer a tortor in eros molestie ultricies. Etiam condimentum, dolor laoreet lobortis convallis, neque lacus auctor libero, eget lacinia augue nisi nec nisl. Mauris ultricies nulla ac lectus. Donec eros. Cras in lectus. Proin non eros. Duis tortor purus, volutpat nec, laoreet ac, consectetuer laoreet, erat.

El siguiente código que podemos personalizar es el color del fondo de el bloque background-color: rgb(193, 8, 43) para poder conocer el color de un color determinado podemos consultar en páginas como Color blender

Para utilizar esta herramienta tan sólo tendréisque mover los cursores para conseguir el color deseado.
Si ampliais la imagen, podreís observar que ya nos da el código con las tres cifras por lo que tan sólo tendremos que copiar y pegar el que escojamos en el código que estamos trabajando.
tal que nos quedara así; (¡¡¡¡OJO!!! Deberéis insertar el código con las tres cifras, con las comas y espacios correspondientes)

Los siguiente códigos que corresponden a las propiedades de la fuente (letras que utilizamos para redactar el post) son más fácilmente configurables font-size: 11px; font-weight: bold; simplemente seleccionando el código en la redacción del post podremos darle el tamaño,el color y el estilo que queramos (normal, italic o bold)
Habreis observado que me he dejado una valor font-family: arial,helvetica; para poder personalizar la familia de fuente que querais actualizar y en el caso de querer armonizarla con el conjunto de vuestro blog y no sabéis cual estáis utilizando os podéis dirigir a edición html y localizar la fuente que se está utilizando Lo localizareis en

;

Vemos que estamos utilizando Verdana,Arial,Sans-Serif lo implementamos en font-family: Verdana, Arial, Sans-Serif; por font-family: Verdana,Arial,Sans-Serif; quedando tal que así en nuestro ejercicio;

Con este post aparte de conseguir aprender un nuevo efecto para vuestro espacio, espero que hayáis aprendido nuevas claves para poder personalizar vuestro espacio en el futuro.