Formato para blockquote de los post definido en la sección CSS de la plantilla.
.post blockquote {
margin: 10px 10px 6px 0px;
width: 50%;
background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoleft.png) left top no-repeat;
float: left;
position: relative;
}
.post blockquote div {
padding: 0 48px;
background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoright.png) right bottom no-repeat;
font: normal 80% /1.7em verdana, helvetica, sans-serif;
color: #5f5f5f;
text-align: justify;
}Código html para el blockquote.
<blockquote cite="http://www.lipsum.com"><div>Quisque ... ... ...in massa.</div></blockquote>Como se ve se usan dos imágenes (quoleft.png y quoright.png) para simular las comillas de apertura y cierre que tendremos que situar en algún sitio, por ejemplo en Picasa. La primera se posiciona de forma absoluta dentro del elemento blockquote, y la segunda está posicionada en la esquina inferior derecha como imágen de fondo de dicho elemento.
En el texto de ejemplo siguiente, el código html del blockquote se encuentra justo al terminar la frase en azul y antes de empezar la frase en naranja. Redimensiona la ventana del navegador para ver como fluye el texto alrededor del blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem lacus, adipiscing vel volutpat ac, egestas id enim. Nulla elit felis, iaculis id interdum at, euismod at enim. Morbi eget mauris velit. Aliquam arcu neque, auctor in tempus ut, condimentum quis libero. Ut tellus lacus, rhoncus ac adipiscing ut, convallis a lectus. Praesent ut odio neque, sit amet lobortis ante. Vestibulum ac semper sem. Curabitur sed lacus ut magna lobortis luctus. Pellentesque turpis est, blandit eu aliquam in, accumsan eu urna. Nullam vel mi nec massa sagittis fermentum id in lectus. Quisque blandit posuere metus ut ultrices.
Cras justo nisi, vulputate non vulputate a, iaculis nec nunc. Nullam nec leo eget tellus facilisis sodales. Vivamus posuere varius libero, sit amet faucibus risus dapibus id. Nullam a laoreet orci. Suspendisse urna massa, pretium vestibulum scelerisque sit amet, dictum ac risus. Cras tempor dui enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc faucibus urna ut nisl porta vitae cursus massa dictum. Aenean nulla odio, placerat eu facilisis a, semper et sem. Ut placerat arcu ac augue lacinia lacinia quis sed tortor.Quisque quis purus sem, sed elementum metus. Curabitur vehicula lacinia risus ut vestibulum. Ut quis massa vel odio tincidunt blandit. Nam tempus purus quis elit tempor ut condimentum tortor imperdiet. Fusce purus erat, vehicula quis ornare et, fringilla nec augue. Curabitur convallis libero eget libero egestas id condimentum nibh vestibulum. Donec mollis fringilla congue. Nulla placerat suscipit felis, varius scelerisque dui euismod non. Nulla nulla leo, adipiscing a suscipit lobortis, cursus quis libero. Curabitur eget iaculis tortor. Pellentesque eget nunc et nisi sagittis rutrum id eget elit. In dui lacus, ornare eleifend sagittis sit amet, laoreet eget dolor. Ut enim augue, pellentesque ac faucibus vitae, varius in massa.
Sed euismod facilisis neque. Duis cursus, justo a imperdiet molestie, erat nibh malesuada orci, at lobortis diam quam quis leo. Phasellus blandit tristique purus, in varius urna pellentesque vel. Ut tempus consectetur massa eget euismod. Nulla facilisi. Morbi congue luctus ultrices. Nullam nibh sapien, tristique eu sagittis rhoncus, facilisis in orci.Nunc venenatis, felis sit amet dictum consectetur, dolor nisi dignissim eros, sed molestie ante quam vel lacus. Phasellus varius molestie dolor, a tempus tellus ultricies sit amet. Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ipsum volutpat fringilla. Mauris condimentum gravida massa, eu auctor ligula auctor vehicula. Morbi eu magna lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quam arcu, tempus ut fringilla varius, dignissim mattis ipsum. Fusce quis dui augue, at aliquet nunc. Donec ultricies augue nec lacus sollicitudin sit amet fringilla enim vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. In vehicula dignissim tortor eu auctor. Morbi fringilla lacinia posuere. Praesent vitae ultricies lorem.
Pellentesque mollis, nunc a ullamcorper eleifend, tortor tellus rhoncus diam, eget pulvinar ligula mauris sed tortor. Nam sit amet nisi urna, quis tempor arcu. Ut sollicitudin venenatis commodo. Duis luctus nulla et massa viverra nec posuere massa ornare. Curabitur vel leo non est sollicitudin ultricies a sit amet neque. Nullam luctus placerat placerat. Vestibulum adipiscing, orci sed porttitor facilisis, lorem odio hendrerit justo, eu sodales velit felis in risus. Aliquam iaculis congue nulla, sit amet viverra odio tincidunt ac. Integer sollicitudin imperdiet neque varius vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras porttitor molestie elementum.
