Resaltar frases en los posts con el plugin Pull-quotes
(pull)Destacando frases con Pull-quotes(/pull)En blogpocket hemos venido utilizando un bloque de texto para resaltar noticias en los posts. El código lo divulgó Walter Kobylanski allá por marzo de 2003 y el de blogpocket (tanto el CSS como el HTML) lo tienen al final de este post.
La forma de destacar frases, que les presento en este post, es una versión de aquella en forma de plugin. El script se puede descargar en CafeLamarck.it. Una vez instalado el plugin, lo único que hay que hacer -al editar el post- es enmarcar , entre las etiquetas pull y /pull (ambas entre paréntesis), el texto que nos interese destacar.
El plugin se puede configurar editando el archivo fancy_pullquotes.php.
Se pueden cambiar las etiquetas para introducir el texto a resaltar que por defecto son “pull” y “/pull”, ambas entre paréntesis. También se puede modificar el color del texto que inicialmente es verde.
Para cambiar el tamaño de letra, el espacio entre líneas o cualquier otro parámetro, es necesario alterar la instrucción que asigna el CSS a la variable $quote_incipit. Yo lo he hecho para conseguir un ancho del bloque de 300px y un tamaño de letra de 20px. El resultado es el que se puede ver en este mismo post.
También he realizado una pequeña modificación al plugin original para que no aparezca el texto entre las etiquetas pull y /pull (entre paréntesis). De la instrucción siguiente hay que eliminar la variable $quote_text.
$total_quote = $total_quote.”.$quote_text_div[$i].’<span style=”filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;”> ‘.$quote_text_div[$i+1].$div_close.$quote_text;
El plugin modificado lo pueden descargar aquí: Fancy Pullquotes modificado.
Vía | BlogMundi
Código para implementar un bloque de texto con CSS y HTML:
CSS:
.cajita {
float: right;
border: 1px;
border-style: dashed;
border-color: #939393;
margin-left: 10px;
margin-bottom: 10px;
padding: 3px;
font-family: ‘Trebuchet MS’, Verdana, sans-serif;
font-size: 12px;
text-align: right;
width: 160px ;
background : #ebeef1;
}HTML:
<div class=”cajita”>
Este texto aparecerá dentro de una cajita flotante a la derecha del párrafo.
</div>
También puedes leer:
