Cómo crear un ladillo en nuestras entradas de forma sencilla

En esta entrada os voy a detallar cómo podemos incluir ladillos en las entradas de un blog. Como es sabido, un ladillo es aquella porción de texto que se extrae del contenido general de una entrada para destacar algún elemento especialmente significativo del mismo. Su poder de atracción radica en dos aspectos clave, su posicionamiento en el cuerpo de la entrada y su contenido. Sobre este último cabe destacar que se refiere a un texto que tenga fuerza, llame la atención del usuario y le "incite" en cierta manera a leer todo el contenido.

Este efecto se logra si el texto del mismo tiene gancho, es sustancial y requiere para su plena comprensión de una lectura a fondo del contexto del mismo, lo cual obliga en cierta manera al lector a escanear la entrada para contextualizar este contenido.

A nivel formal, es decir, visual, tenemos muchas maneras de hacerlo, pero como debe estar claramente separado del propio texto de la entrada, necesitamos que tenga un formato específico y claramente diferenciado del resto del cuerpo. En muchas ocasiones habréis visto que se incluyen con unas comillas de tamaño bastante grande, con algunos adornos que separan este texto, o también el modelo de caja con un color de fondo diferente. Este caso es el que más capacidad visual tiene, pero ojo, tenéis que jugar con una buena combinación de colores para que no parezca un circo, se trata de destacarlo y no de crear algo tan diferente al contexto que parezca que no pertenece al mismo.

Vamos a ver cómo podemos incluir ese modelo de caja dentro de una de nuestras entradas. Para ello cuando editemos una entrada y ya tengamos el ladillo pensado, deberemos utilizar un poco de hojas de estilo CSS para crearlo. Un aspecto fundamental es que las entradas se tienen que crear desde la pestaña "Edición HTML" a la hora de montar vuestra entrada.

Vamos a poner un ejemplo ficticio de inclusión de un ladillo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus diam, aliquet eget vulputate eget, ultrices nec elit. Duis lorem metus, venenatis non porttitor ac, tincidunt ac metus. Vestibulum interdum tincidunt mauris non cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus ipsum, adipiscing ac aliquet luctus, dapibus eu quam. Integer laoreet mollis dolor, vel fermentum ipsum fermentum quis. Etiam mauris elit, tempor at hendrerit eget, aliquet at nibh. Mauris venenatis convallis eros sit amet mollis. Nunc convallis convallis lacinia. In tempor iaculis magna, nec sagittis risus bibendum ac. Sed in lacus sit amet sem volutpat elementum. Mauris ultrices ligula vitae metus malesuada a dapibus enim imperdiet. Vivamus a lectus urna, eget sollicitudin tellus. Maecenas in quam ligula, quis iaculis orci.

Este texto es un ladillo que incluimos en nuestra entrada.

In mauris magna, viverra tincidunt dignissim ut, iaculis ac leo. Morbi vestibulum ipsum mauris. Vivamus dignissim turpis at leo elementum semper. Mauris id arcu orci. In egestas, purus sit amet hendrerit tristique, nunc quam eleifend massa, in lobortis ante erat quis lacus. Mauris ut tempus est. Nullam semper blandit lectus, vitae aliquet nisi tempus nec. Curabitur velit leo, ultricies ut mollis sit amet, suscipit vitae massa. Proin condimentum nisi malesuada mauris imperdiet semper. Nulla aliquet mauris sit amet nulla placerat eget porttitor libero fermentum. Praesent id neque ac enim volutpat eleifend ac ac diam. Nullam sollicitudin molestie odio et ornare.


En este caso hemos insertado nuestro ladillo en la lado derecho de la entrada para que destaque junto con el texto al que puede estar haciendo referencia o que se encuentra en cualquier parte de la entrada. Su código es muy simple y lo podéis modificar fácilmente para adecuarlo a la estética de vuestro blog:

<div style="float:right; width:150px; background:#000000; color:#FFFFFF; padding:8px; margin:0 0 20px 20px;">Este texto es un ladillo que incluimos en nuestra entrada.</div>

Os comento el significado de cada elemento:

• La caja de texto se encierra entre las etiquetas <div> y </div>
• Para poner los estilos a la caja lo haremos desde el atributo "style"
• En este caso queremos que la caja fluya a la derecha del texto, ponemos la propiedad "float:right", si queremos que fluya a la izquierda pondremos "float:left"
• Le asignamos un ancho a la caja (suelen ser medidas pequeñas), en este caso lo indicamos con la propiedad "width:150px" (150 píxeles de ancho). El alto se asigna automáticamente en función del contenido.
• Seleccionamos un color de fondo mediante la propiedad "background", en este caso en color negro "#000000". Se pueden poner colores en formato hexadecimal para tener una gama más amplia de color (http://html-color-codes.info/codigos-de-colores-hexadecimales/).
• Seleccionamos el color del texto si lo queremos diferenciar del que tiene por defecto con la propiedad "color", en este caso hemos puesto el color blanco "#FFFFFF".
• Para dejar un espacio entre el texto y el perfil interno de la caja utilizamos la propiedad "padding" al que hemos dicho que deje 8px de distancia en cada uno de los lados de la caja (top, right, bottom y left).
• Algo parecido para la distancia entre el perfil externo de la caja y el texto que fluye a su alrededor. Para ello utilizamos "margin". Aquí definimos el espacio que queremos marcar con referencia al texto siguiendo el patrón de caja (top, right, bottom y left), es decir, 0 píxeles al top, 0 píxeles al right, 20 píxeles al bottom y 20 píxeles al left.

Con eso podemos hacer las combinaciones que queramos, obteniendo unos ladillos muy interesantes para nuestras entradas. Ahora sólo falta que los apliquéis a vuestro blog.

¡A por ello!

David