Magazine

Estilos de blockquote o texto citado

Publicado el 21 diciembre 2013 por Jonathan Lr @NovedadBlogger

Blockquote o texto citado 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. Blockquote icono
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. Blockquote #01
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. Blockquote #02

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. Blockquote #03
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. Blockquote #04 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. Blockquote #05 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 &#39;andale mono&#39;,&#39;lucida console&#39;,monospace;line-height:18px}

Cualquier duda o sugerencia, hazla saber en los comentarios ;)

También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :