La mayoría de los Blogger saben de lo que estoy hablando cuando digo blockquote o texto citado, para los que desconocen esto, les explicaré cual es su función.
El blockquote o texto citado se usa para resaltar partes de texto sea frase o código que sean de importancia.
La forma de usarlo es encerrando el texto que quieres citar entre <blockquote> y </blockquote> o usando el icono que se encuentra en el editor de entradas.
Para personalizarlo nos vamos a Plantilla, Editar HTML y buscamos:
blockquote {
..............
..............
..............
}
Si no la encuentras, busca blockquote y borra hasta el } (algunas plantillas no tienen este código), lo sustituyes por cualquiera de los códigos que daré a continuación.
Para añadir el blockquote que prefieres, solo pega el código HTML antes del ]]></b:skin>.
Blockquote #01
Este blockquote tiene la clásica barra izquierda de color ploma, un fondo del mismo color y un borde en forma de guiones.Código:
blockquote{background-color:#F5F5F5; border-color:#CCC; border-style:dashed dashed dashed solid; border-width:1px 1px 1px 5px; color:#666; padding:10px}
Blockquote #02
En la parte superior de la izquierda tiene la típica imagen de una comilla que caracteriza a muchos blockquotes y un color plomo de fondo.Código:
blockquote {
width: 75%;
background: #F6F6F6;
position: relative;
padding: 20px 30px;
font-style:italic;
border: none;
margin: 0 auto;
margin-bottom: 15px;
}
blockquote:before {
background:#2dcb73 url(http://2.bp.blogspot.com/-x6UNdKXyTP4/Uho8Vvg32_I/AAAAAAAAAQI/M8P-4g3M6Uk/s1600/Blockquote.png) no-repeat;
content: "\f10e";
position: absolute;
left: -32px;
text-align: center;
line-height: 32px;
color: #FFF;
top: 0;
width: 32px;
height: 32px;
}
Blockquote #03
Tiene la imagen de una comilla en la parte superior de la izquierda al igual que la anterior, y no hace falta mencionar el mismo color de fondo.Código:
blockquote {
background: url(http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png)
no-repeat;
margin: 20px;
color: #666;
border-bottom: 1px solid #e8e8e8;
background-color: #f9f9f9;
padding: 20px 0px 9px 30px;
color: #000;
margin-left: 10px;
margin-top: -9px;
width: 520px;
-webkit-border-radius: 6px; border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-style: italic;
line-height: 30px;
padding-right: 20px; }
Blockquote #04
Nos lineas como puntos al inicio y al final del blockquote y la redundante imagen de la comilla. Código:blockquote { background:url(http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png)no-repeat;
padding-left:32px;
padding-top:3px;
margin-left:25px;
color:#777; font-style:italic;
font-size:14px;
line-height:22px;
border-top: 1px dotted #b5b5b5;
border-bottom: 1px dotted #b5b5b5;
margin-top:10px; margin-bottom:10px;}
Blockquote #05
Este es más simple que las anteriores ya que solo tiene una barra naranja a la izquierda, con bordes y fondo de color plomo. Código:blockquote{margin: 20px;
color: #666;
border: solid 1px #c3c5c9;
padding: 20px;
font-weight:300;
background: #F8F8F8;
border-left: 20px solid #ef4423;}
pre{margin:20px 0;white-space:pre}
pre,code,tt{font:13px 'andale mono','lucida console',monospace;line-height:18px}
Cualquier duda o sugerencia, hazla saber en los comentarios ;)