Encuadrar un texto

En otra ocasión les traje una divertida caja para incluir los códigos html .

Ahora bien, cada cosa tiene su código. Por ejemplo, cuando insertamos un códiho html al editar una entrada en el formato REDACTAR, si no lo ubicamos dentro de esta caja especial se transforma al publicarlo y no nos da el resultado esperado. Por eso, la caja que les traje la vez anterior es ideal.

Pero no ocurre lo mismo cuando queremos encuadrar o resaltar un simple texto, el código que necesitamos es diferente.

Lo aclaro porque hoy les traigo justamente el código necesario para esto, y no quiero que se confundan al utilizarlo.

"ESTE CODIGO NO SIRVE PARA HTML"

Bien, una vez aclarada esta cuestión paso a darles el material necesario.

El sistema de implementarlo es sencillo. Podríamos hacerlo de dos formas, pero les voy a mostrar la que me pareció más fácil, que es incrustarlo al pie de la entrada. Cada vez que crees una nueva entrada aparecerá la caja, si no la utilizas la borras y listo. El otro sistema es retocar la plantilla, pero no funciona en algunas, al menos no funcionaba en mis plantillas, así que opté por este método, que ya he probado.

Primero trabajaremos el código, el básico es el siguiente:

<fieldset>

<legend>Título</legend>

... Aquí va el texto ...

</fieldset>

Fieldset es el texto y legend es el título

Resultado

El resultado es algo como esto

Si quieres algo un poco más sofisticado puedes jugar con los estilos agregando condicionales que variarán la forma y estilo de tu cuadro. Por ejemplo este otro código

<fieldset style="border:6px groove #ccc; background:#F8ECE0;">

<legend style="font-weight:bold; color:#61380B;">Título</legend>

... Aquí va el texto ...

</fieldset>

En este caso agregamos la condicional style="..." y dentro de las comillas colocamos

Para fieldset (texto)

• el estilo y tamaños del borde : border:6px groove #ccc;
• el color de fondo : background:#F8ECE0;

Para legend (título)

•  la fuente: font-weight:bold;
• El color de fuente: color:#61380B;

El resultado de este código modificado sería éste:

Título

... Aquí va el texto ...

Si quieres agregarle un borde doble cambia la palabra groove por double (puedes variar también el grosor de píxeles), dando un resultado cómo éste

Título

... Aquí va el texto ...

Eso es todo, desde el primer código sencillo hasta el más complejo.

Ahora veremos las condicionales para modificarlo

Esta es la lista

Para el texto y contenedor (fieldset)

• border:6px groove #ccc; /* Borde */
• background:#F8ECE0; /* Color de fondo */
• color:#000; /* Color del texto de todo el contenido */

Para el título (legend)

• text-align:left; /* Puedes cambiarlo por center o right */
• font-weight:bold; /* Estilo de la fuente del título */
• color:#61380B; /* Color del título */

Ahora veremos dónde pegar el código

1. Configuración
2. Formato
3. Plantilla de entrada
4. Revisa la vista previa y si el blog se muestra sin inconvenientes guarda los cambios

Como verás, es sencillo. Una vez que lo tengas guardado en la plantilla de entrada ya lo tendrás para todas las entradas que escribas a partir de ese momento. Esto simplifica las cosas ya que si tienes algún error es sencillo quitarlo, ya que no tocamos la plantilla fuente como solemos hacerlo cuando vamos a diseño de html.

Este truco de agregar lo que queremos en nuestras entradas desde la configuración sirve para muchas cosas. Por ejemplo en algunos de mis blogs he agregado también desde allí la publicidad para que salga en todas las entradas.

Pruébalo

Si tienes algún comentario lo puedes dejar debajo de esta entrada. Si tienes 

alguna pregunta también. ¡Que lo disfrutes...!

FUENTE: Ciudad Blogger