Blockquote con barra de desplazamiento

Muchas veces me he encontrado con la necesidad de introducir una cita muy larga y remarcarla con <blockquote>, pero no quería que ocupara todo el post y hacer la lectura incomoda.

Por ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida imperdiet ligula a tristique. In dignissim porta urna a interdum. Suspendisse a turpis eu ipsum posuere aliquet vitae et tellus. Donec ut eleifend quam. Quisque egestas gravida sollicitudin. Fusce vulputate mollis rhoncus. Praesent vulputate blandit quam ut posuere. Proin lobortis mattis orci, sit amet ullamcorper elit ullamcorper non. Donec lacus leo, tempus ut dapibus nec, condimentum eu orci. Nulla facilisi. Maecenas id diam metus. Donec sit amet nulla a justo adipiscing aliquam. Pellentesque adipiscing mauris pellentesque nulla porttitor faucibus pellentesque risus ultricies. Morbi non tincidunt augue. Nullam hendrerit dui sed arcu gravida tempus. Aenean eget mi a libero vehicula placerat. Nulla et turpis nisl.

Donec sit amet orci eu est pulvinar dapibus. Etiam augue tortor, bibendum non pellentesque vel, dictum non orci. Phasellus sed enim sed mi dignissim ultrices sed nec nibh. Fusce feugiat vulputate diam eu ultrices. Aenean accumsan tempor libero ac sodales. Pellentesque quis ante eu tortor aliquam feugiat sit amet eget quam. Donec ac sem dui, eu mattis orci. Nullam rhoncus tincidunt dui, id vestibulum est laoreet sit amet. Cras sit amet velit sit amet eros rutrum venenatis. Aliquam nisi augue, commodo ac cursus ac, tincidunt et eros. In nunc sem, tempor ut consectetur tempus, aliquam consequat metus. In eros lorem, eleifend in egestas sed, commodo tristique urna. Sed in nulla eget lacus pellentesque porta id a risus. Suspendisse eu tincidunt mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dolor lacus, mollis sed mattis in, euismod quis arcu. Cras non erat eget elit malesuada ullamcorper quis et metus. Morbi odio massa, viverra a tempor sit amet, luctus sit amet lacus. Donec eget sapien quam.

Maecenas mattis tristique posuere. Nulla facilisi. Aliquam viverra arcu vel tortor accumsan hendrerit. Morbi pretium, nunc nec tincidunt placerat, risus erat sollicitudin nunc, vel lobortis tortor enim at est. Suspendisse gravida justo at diam vestibulum vel tempor eros adipiscing. Cras et est dolor, ut cursus orci. Nam aliquet lobortis urna, volutpat vulputate est iaculis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porta, sem non luctus congue, est justo fringilla est, quis tempus nisi velit eleifend leo. Phasellus sed commodo ligula. Pellentesque semper varius ligula, quis adipiscing urna ultricies eget. Sed a dui a tellus eleifend lacinia id quis justo. Etiam porttitor, quam sit amet mattis commodo, ipsum augue sollicitudin turpis, nec ornare ligula quam sed nisi. Duis rhoncus lobortis egestas.

Integer arcu sapien, condimentum non tempus a, volutpat molestie nisl. Proin consequat molestie enim, ac pulvinar risus mattis a. Nam viverra interdum ultrices. In enim felis, tristique ac cursus vitae, viverra ut tellus. Vestibulum ultricies arcu vitae metus aliquet eu mattis orci tincidunt. Phasellus ac arcu eu dui commodo condimentum ac sit amet sem. Aenean consequat imperdiet luctus. Praesent quis neque quis mauris rhoncus gravida ac eget tellus. Sed id urna sed massa dignissim vestibulum suscipit a dolor. Phasellus porta nulla sit amet justo scelerisque venenatis.

Cras condimentum venenatis ante, non imperdiet nibh dictum ut. Ut faucibus lorem pellentesque diam scelerisque venenatis. Curabitur egestas, sem vitae pulvinar pellentesque, urna odio pulvinar sem, porttitor fermentum diam eros eget risus. Quisque adipiscing nisl nec lacus consectetur vel facilisis massa fermentum. Ut iaculis nibh id sem placerat eleifend. Aliquam quam dolor, porta a tempor sed, consequat sed tellus. Curabitur condimentum aliquet magna vulputate posuere. Suspendisse potenti. Nulla sollicitudin fermentum risus congue aliquet. Suspendisse potenti. Nullam non tellus sem. Fusce placerat blandit nisl, eget aliquam orci mollis ac. Phasellus cursus vestibulum libero, in gravida lectus laoreet eget. Etiam sem urna, bibendum ut ultrices at, sodales sit amet nisl. Praesent iaculis lacus eu leo lacinia vitae sodales diam viverra. Fusce erat nibh, euismod sit amet mattis sed, lobortis at risus.

Praesent feugiat adipiscing consectetur. Sed ultrices est non purus luctus vitae venenatis ante tristique. Nunc a tellus non turpis aliquet dapibus eu sed sapien. Aliquam magna risus, mattis vitae facilisis quis, dapibus vel ipsum. Phasellus lacinia, urna a consectetur vehicula, metus velit convallis mauris, non ornare est libero ac tellus. Sed dapibus arcu vel nisl convallis vulputate. Nunc quis massa eros. Mauris risus nulla, dictum in cursus ut, semper id lorem. Cras odio diam, dapibus eu egestas eget, mattis sed velit. Praesent et consequat nibh. Curabitur sed tempus magna. Quisque vel euismod nulla. Mauris condimentum, magna ac pharetra gravida, nulla risus convallis massa, at egestas risus leo quis justo. Mauris volutpat leo eget urna posuere eget ullamcorper nulla gravida. Aenean mattis fermentum purus nec luctus. Mauris quis lacus elit. In vel consequat est.

In nec lorem mauris. Proin elementum gravida dictum. In non tellus velit, nec ornare libero. Proin libero neque, vehicula nec adipiscing et, dignissim nec ipsum. In posuere, lacus ut faucibus elementum, ante magna laoreet nibh, nec rutrum nunc magna id purus. Integer leo neque, mollis sagittis scelerisque ut, auctor quis nunc. Vestibulum euismod est et sapien ullamcorper euismod. Nullam consectetur odio eget nibh tristique ac dignissim nunc suscipit. Proin urna nisl, pretium pulvinar ullamcorper eget, rhoncus vitae leo. Donec a massa urna, vitae imperdiet metus. Integer aliquet porta bibendum. Cras lacinia aliquet diam, nec sagittis enim convallis sed. Fusce sed nunc augue, a accumsan velit. Quisque viverra neque et arcu auctor sit amet volutpat arcu vestibulum. Suspendisse sit amet purus orci. Nunc varius mi vel sem posuere bibendum.

Cras viverra, lectus non accumsan ullamcorper, velit sapien faucibus mi, vitae consectetur lectus risus eget odio. Donec congue iaculis scelerisque. Aenean quam massa, egestas eget gravida quis, bibendum ac nunc. Suspendisse gravida lectus vel purus facilisis nec condimentum odio molestie. Nullam tempus urna ac eros consectetur vitae scelerisque massa cursus. Donec ut lacus tortor, nec ullamcorper eros. Integer facilisis laoreet tellus, nec gravida est tempor pretium. Morbi aliquet semper luctus. Quisque et dolor massa, et convallis lectus. Aliquam hendrerit ullamcorper dui hendrerit tempus. Curabitur adipiscing lacinia purus id auctor. Praesent ultricies ligula non augue vestibulum ac dictum risus mattis. Nam porttitor nisi quis tellus pretium tempus. Vivamus rutrum sollicitudin dictum.

Nunc lectus tortor, iaculis non pharetra eget, pharetra ac odio. Sed dapibus mauris sed nisi porta sit amet tincidunt massa porttitor. Sed vel felis nulla. In sagittis arcu nec leo lacinia semper. Etiam egestas pharetra velit vel consequat. Nam posuere, ante nec lobortis vulputate, leo augue tristique justo, et adipiscing quam leo condimentum massa. Integer viverra lobortis luctus. Nulla ut velit tortor. Praesent turpis velit, ullamcorper sit amet fermentum ac, rhoncus at ipsum. Cras sit amet augue nibh. Etiam nec cursus justo. Mauris at nulla id arcu laoreet fermentum. Suspendisse odio orci, accumsan sed convallis quis, aliquet sed urna. Maecenas nisi eros, tristique commodo lacinia ut, ultricies non dui. Praesent fringilla lectus eu nibh dapibus elementum. Aenean ac lacus metus.

Vivamus sit amet ornare dolor. Curabitur at turpis metus, in rutrum elit. Curabitur erat velit, scelerisque at hendrerit at, lobortis ac orci. Donec hendrerit malesuada tortor in iaculis. Sed vel tellus quis nibh pharetra euismod eget non magna. Morbi fermentum aliquet dolor, lobortis consequat nunc varius id. Morbi vestibulum pellentesque velit, vel adipiscing nisl ultricies nec. Ut at ante sit amet tellus malesuada venenatis. Nulla facilisi. Sed ut est in lacus feugiat porttitor nec sit amet erat. Suspendisse lobortis, elit in auctor faucibus, nunc purus dictum lectus, a mollis erat lacus sed metus. Integer mauris nisl, auctor eu aliquam quis, cursus eget dui. Etiam dictum luctus diam non fringilla. Sed felis dui, vehicula vel tristique in, laoreet id neque. Etiam tempor, orci quis ornare volutpat, elit nisl condimentum metus, eget facilisis ante velit eget lacus. Mauris rhoncus nulla vel mi lacinia condimentum.

Etiam euismod volutpat ullamcorper. Vestibulum ligula nisi, condimentum ac congue vel, accumsan lacinia arcu. Ut id nibh ipsum. Nullam hendrerit gravida tortor vitae vulputate. Sed at enim ipsum. In eget neque vitae nisl tincidunt malesuada condimentum nec lorem. Proin congue, est non luctus iaculis, ipsum ligula ornare sem, quis volutpat magna lorem non nibh. Vivamus mi ante, cursus eu ornare vel, semper eu lorem. Ut pellentesque nibh nec velit varius volutpat. Vivamus viverra tortor non justo interdum tristique vitae volutpat felis. Sed venenatis mollis tincidunt. Curabitur ultrices nisi quis odio tincidunt eu porttitor metus tristique. Nunc leo felis, sagittis a tempus quis, facilisis ut purus. Fusce vel dui mauris. Donec nec ullamcorper diam. Mauris accumsan vehicula tortor, a cursus neque bibendum vel. Etiam nibh risus, malesuada et pharetra suscipit, imperdiet nec lectus. Ut elementum magna sed enim vulputate eleifend.

Mauris congue cursus quam quis volutpat. Vestibulum malesuada volutpat odio gravida porttitor. Fusce venenatis lorem in est ultrices tempus. Nulla posuere sollicitudin enim, non vulputate tellus euismod quis. Mauris vehicula viverra nunc non auctor. Nulla a risus vel justo semper auctor. Maecenas sed rutrum arcu. Etiam eu massa neque, eget vestibulum lorem. Pellentesque cursus, felis vitae volutpat egestas, tellus nunc molestie purus, sit amet varius elit mauris eget neque. Nunc pellentesque, metus eget convallis lacinia, nibh lectus adipiscing erat, in interdum elit erat quis tortor. Donec vel massa dolor, ac mollis risus. Sed consectetur, justo a euismod congue, orci nisl facilisis dui, a sagittis arcu ipsum in odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel mollis metus.

Vivamus nec lacinia ante. Aliquam semper luctus ante, ut semper dui rhoncus id. Sed in neque orci, tempus condimentum dui. Curabitur dignissim dui et dui cursus quis consequat tortor gravida. Donec et urna nec risus consectetur scelerisque. Etiam tellus tortor, malesuada eu ultrices at, adipiscing a mauris. Vivamus mattis ullamcorper venenatis. Ut non auctor sapien. Integer eu massa at nisi lobortis volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Vivamus id dui turpis. Morbi sem lectus, egestas ut bibendum nec, vulputate a sem. Nullam eget odio non leo laoreet laoreet sed sit amet dui.

Suspendisse molestie, enim a tincidunt rutrum, magna nunc vulputate eros, eget tempus nunc mi ut tellus. Praesent purus arcu, vestibulum sit amet posuere a, rhoncus a felis. Donec a justo eu justo ultrices mollis. Cras a tincidunt turpis. Fusce dictum aliquet molestie. Aliquam nec magna sed leo semper posuere id ac tellus. Sed id enim leo, quis pharetra lorem. Aenean nec magna nunc, vitae blandit elit. Maecenas tempor vestibulum arcu et iaculis. Cras tincidunt, sapien eget sagittis eleifend, erat neque porta lorem, id dapibus risus erat eget tellus. Pellentesque dictum dui sed velit feugiat pretium. Vestibulum in sem ut lectus condimentum lobortis. In scelerisque, metus sed gravida luctus, nulla magna laoreet justo, in eleifend mauris nulla sed magna. Suspendisse sem nulla, faucibus eu cursus ac, imperdiet eget dolor.

Cras sit amet libero sit amet tortor facilisis gravida. Praesent lacus libero, molestie id pellentesque varius, pellentesque ut nisi. Etiam non nunc sed lectus volutpat euismod. Nunc rutrum nulla et tortor sollicitudin elementum. Suspendisse velit purus, laoreet nec accumsan in, imperdiet vel sem. Vivamus euismod luctus ipsum, a blandit urna aliquet eget. Quisque at molestie dolor. Ut neque erat, porttitor quis tincidunt id, dictum eget mauris. Sed blandit scelerisque metus rhoncus rutrum. Nunc sit amet viverra elit. Morbi ut dui nisl. Ut malesuada dictum pulvinar. Sed fringilla augue in arcu suscipit congue. Cras convallis ullamcorper libero non laoreet. Nulla convallis accumsan consectetur. Phasellus laoreet semper elit, ac suscipit dui venenatis interdum. Sed eu sem nisl. Mauris posuere tincidunt urna ac sagittis.

Mauris condimentum sagittis enim, nec venenatis purus vulputate at. Nam porttitor tortor a est aliquet ac facilisis nisi congue. Curabitur euismod quam a arcu scelerisque quis tincidunt turpis imperdiet. Ut in metus rhoncus nunc elementum fermentum ullamcorper pellentesque metus. Nunc placerat facilisis quam, in faucibus quam faucibus elementum. Nulla congue, mi quis fringilla condimentum, enim tellus aliquet odio, quis aliquam dui ligula ullamcorper diam. Suspendisse congue mauris eu arcu sodales fringilla. Phasellus mattis mi at sapien dictum vestibulum. Quisque suscipit neque sit amet lacus porttitor ac rhoncus dolor scelerisque. Nam condimentum tincidunt nisl, at viverra ante semper ut. Aenean viverra orci sed nibh cursus lobortis. Nunc justo metus, vehicula a adipiscing in, consectetur a mi. Curabitur ut turpis ac magna lobortis dapibus. Curabitur a turpis commodo diam malesuada venenatis sed non est. Phasellus tristique accumsan massa, nec consequat metus vulputate in. Suspendisse potenti. Fusce pulvinar elementum scelerisque. Pellentesque nibh lectus, dignissim blandit volutpat id, malesuada vitae nulla. Suspendisse potenti.

Nullam nisl turpis, tristique eu pharetra ac, molestie in eros. Etiam quis eros magna, eget mattis libero. Aliquam non tortor libero. Praesent consequat est id sem auctor non tristique magna ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas accumsan auctor turpis a pretium. Vivamus semper libero ut diam adipiscing et mollis nulla convallis. Vivamus eget auctor augue. Donec eleifend lacinia ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit mi, scelerisque et lobortis quis, aliquet eu orci. Phasellus sed justo lacus. Fusce laoreet ultrices justo ac pretium. Ut eget orci non dolor dapibus tempor. Pellentesque id dolor leo, ut fermentum sem. Morbi vestibulum laoreet elit ut semper. Pellentesque enim neque, fermentum in feugiat eu, tempus nec nulla. Nulla adipiscing vehicula metus, non venenatis risus rutrum at.

Donec lacinia elit dignissim erat malesuada sed gravida mauris euismod. Proin rutrum, odio et sodales rutrum, erat ligula rhoncus ante, non rhoncus nisl arcu sed velit. Donec viverra odio sed diam elementum pulvinar. In pulvinar mauris ullamcorper sem bibendum pulvinar. Morbi vel eros nibh. Nam a sagittis libero. Suspendisse at aliquam mauris. Phasellus nisl felis, auctor sed congue a, vulputate ut nibh. Praesent varius, lectus vel faucibus ultrices, ante lacus varius turpis, eu posuere quam justo varius ante. Curabitur lacinia elementum risus vel elementum. Maecenas feugiat rutrum sagittis. Morbi porttitor ligula ac sapien auctor quis pellentesque sapien tempus. Vestibulum et nisl non sapien posuere congue sed vitae enim. In volutpat leo quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Nam consectetur lacus id sem lobortis dapibus. Donec nec felis ut justo rhoncus consectetur. Maecenas ac augue tellus, sit amet rhoncus nisl. Duis nulla ipsum, placerat quis lacinia eu, placerat eget tellus. Aliquam ut eleifend quam. Sed aliquet lobortis purus. Vestibulum commodo ornare nisl, sit amet imperdiet odio pharetra non. Proin massa sem, lacinia eleifend euismod vitae, bibendum et purus. Donec viverra pretium risus id vulputate. Vivamus ut odio lorem, sit amet lobortis lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sagittis lectus et leo cursus sed facilisis nulla sollicitudin. Curabitur in eros dolor.

Duis nulla mi, porta quis pulvinar sit amet, varius eu dui. Maecenas pellentesque tristique sollicitudin. Nunc neque augue, tincidunt sed mattis id, volutpat id nulla. Nulla sed magna vitae mi varius sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut facilisis scelerisque nulla. Vestibulum quis tortor ligula. Phasellus eros erat, accumsan nec rutrum nec, sollicitudin lacinia risus. Quisque consequat nisi ut libero egestas commodo. Nam hendrerit malesuada semper. Ut interdum, lacus at tincidunt accumsan, metus ligula vehicula augue, vel auctor risus diam a massa. Praesent iaculis, nibh non vehicula interdum, urna arcu pellentesque orci, eget posuere ligula purus vitae nisl. Nulla facilisi. In ut justo a urna iaculis eleifend. Nunc at tempor dolor. Aliquam vel lacus erat, vitae molestie magna. Ut ac mauris sem.

Como ves, es un ejemplo para una cita bastante larga, y para ofrecer una lectura mas ágil, la he enmarcado en el formato de <blockquote> pero con una barra de desplazamiento lateral para que el lector vaya desplazándose por el texto del interior.

Si este también es tu caso, y quieres este estilo, entra en tu plantilla en Diseño / Edición HTML, y busca las lineas:

.post blockquote {

…

}

y justo debajo del cierre ( “}” ) copia y pega el siguiente código:

.post blockquote p { margin: .75em 0; } .smallquote { color: #3b3b3b; background: #e6e6e6 url(URL DE LA IMAGEN) top left no-repeat; border:2px solid #E0D5C2; color: #3b3b3b; font-family:sans-serif; font-size:13px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:22px; margin: 1em 2px; padding:10px; margin-bottom:15px; margin-top:15px; height:400px; }

Para utilizarlo, deberás añadir la clase smallquote al bloque, editando el post en HTML y modificando el inicio del <blockquote class=”smallquote”>

También habrás observado que el código está en un blockquote más pequeño todavía y con otra imagen, normalmente lo utilizo para introducir código y diferenciarlo de una cita normal, si quieres inserta el siguiente código justo debajo del anterior:

.post blockquote.litlequote { color: #3b3b3b; background: #f4f485 url(URL DE LA IMAGEN) top left no-repeat; border:2px solid #E0D5C2; color: #3b3b3b; font-family:sans-serif; font-size:13px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:22px; margin: 35em 35px; padding:30px; margin-bottom:15px; margin-top:15px; height:350px; width:500px; }