Estilos de Blockquote

Vamos a presentarles algunos estilos de blockquotes que podemos lucir en las entradas de nuestros blog. Como primer paso vamos a establecer el CSS del mismo para este ptimer ejemplo. Para ello colocamos el siguiente codigo sobre ]]></b:skin> :


blockquote {

background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUqItYR9a5v_DJeDExeYfv5cnZioxRPlvfxurpPT3MRHeidijqNycgNw74UOulKffNxZMr8lQaI7K1O5oE_rRdnsTwrniTMLvdcsuiKX2ZcqwKet1pJd65Bv9_ctZSYaMLFA1eN1X5Us/s1600/bulb-off.gif ) no-repeat right bottom ;

margin: 0 20px;

padding: 20px 70px 20px 20px;

color:#595959;

font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;

border:1px solid #DDD;

}



blockquote:hover {

background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Njd-XTzd-rKHmWnf1rPaLKUfk0wJAObQvU3Hewvoaa2yfX8RKI5Rk8vmf814ib3prXHOYNMsKqCIQFIVt-xgIa3yc-49fUBdXKtG-iV4CKhd8e_yBVUaTNa-ftR6fmYCDfhWs2Fv8-k/s1600/bulb-on.gif
) no-repeat right bottom ;

color:#E0E089;

}





blockquote p {

margin: 0;

padding-top:10px;

}



Luego para hacer un llamado al estilo utilizamos este codigo que es el que vamos a utilizar de manera definitiva al momento de implementar el blockquote:


<blockquote><div>Aqui el escrito correspondiente al Blockquote</div></blockquote>


Ahora vamos con el ejemplo: (Debes colocar el cursor sobre el escrito)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus lacus, rhoncus at volutpat et, placerat in velit. Nunc ut justo quam, eget porttitor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel mauris eget mauris ornare sollicitudin. Cras interdum ante eu tortor viverra vel tincidunt nisi suscipit. Nam dapibus augue nec nisi scelerisque iaculis. Cras ac justo dui, ut aliquam odio. Praesent vestibulum porttitor dictum. Aliquam consequat ligula quis urna gravida euismod.