Qu茅 es y c贸mo personalizar el Blockquote en Blogger

Si eres nuevo en Blogger, entonces te habr谩s topado con una herramienta para nada particular, la cual est谩 presente en todo lugar donde exista un campo para escribir y un editor de texto.

驴Qu茅 es un blockquote o texto citado?

Ya sea un documento de Word o el mismo editor de entradas de Blogger o WordPress, el 芦blockquote禄 o 芦cita禄 es una herramienta que sirve para enmarcar o destacar cierta parte importante dentro de un texto. Est谩 representado con el icono de un par de comillas y lo puedes encontrar desde el editor de texto de Blogger, desplegando 芦m谩s opciones禄.

Para citar una parte de texto basta con seleccionar el texto a destacar, y hacer click sobre la herramienta 芦blockquote禄

El resultado depender谩 de los estilos que tu plantilla tenga para esta funci贸n en particular.

Ejemplo de blockquote o texto citado

Como notaste, el estilo del 芦blockquote禄 de mi blog es simple, un peque帽o coloreado y aumento de ancho en el borde izquierdo.

Para personalizar el estilo de un blockquote en Blogger, haremos uso de CSS.

C贸mo personalizar el blockquote en Blogger

Si utilizas las plantillas dise帽adas por Blogger, entonces tu texto citado no tendr谩 ning煤n estilo, es decir, tan solo lo ver谩s como un pedazo de texto apartado del resto y nada m谩s.

blockquote sin estilo css

Para personalizar el blockquote en Blogger no necesitar谩s disponer de mucho tiempo, nada m谩s con buscar la etiqueta ]]></b:skin> en la edici贸n HTML de tu plantilla y pegar justo antes el c贸digo del estilo de blockquote que m谩s te agrade.

Estilo #1: Contorneado lineal

.post blockquote {
background-color:#F5F5F5; /* Color de fondo */
border-color:#CCC; /* Color del borde */
border-style:dashed dashed dashed solid; /* Borde punteado */
border-width:1px 1px 1px 5px; /* Ancho del borde */
color:#666; /* Color del texto */
padding:10px; /* Espacio entre el texto y el contorno */
}

Estilo #2: Comillas verdes

C贸digo:

.post blockquote{
width: 75%; /* Ancho del bloque */
background: #F6F6F6; /* Color del fondo */
position: relative; /* Posici贸n del bloque */
padding: 20px 30px; /* Espacio entre el texto y el contorno */
font-style:italic; /* Texto en estilo cursiva */
border: none; /* Sin bordes */
margin: 0 auto; /* Espacio entre el bloque y elementos externos */
margin-bottom: 15px; /* Espacio entre la parte inferior del bloque y elementos externos */
}
.post blockquote:before {
background:#2dcb73 url(http://2.bp.blogspot.com/-x6UNdKXyTP4/Uho8Vvg32_I/AAAAAAAAAQI/M8P-4g3M6Uk/s1600/Blockquote.png) no-repeat; /* Imagen de la comilla */
content: "\f10e"; /* Icono de la comilla */
position: absolute; /* Posici贸n del elemento */
left: -32px; /* Espacio desde la izquierda*/
text-align: center; /* Alineaci贸n del texto */
line-height: 32px; /* Espacio por encima y debajo del elemento */
color: #FFF; /* Color del texto */
top: 0; /* Espacio desde arriba */
width: 32px; /* Ancho */
height: 32px; /* Altura */
}

Estilo #3: Bordeado naranja

C贸digo:

.post blockquote{
margin: 20px; /* Espacio entre el bloque y elementos externos */
color: #666; /* Color del texto */
border: solid 1px #c3c5c9; /* Borde del bloque */
padding: 20px; /* Espacio entre el texto y el borde del bloque */
font-weight:300; /* Grosor del texto */
background: #F8F8F8; /* Color de fondo */
border-left: 20px solid #ef4423; /* Borde izquierdo */
}

 Estilo #4: Estilo literario

C贸digo:

.post blockquote {
background:url(http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png)no-repeat; /* Imagen de la comilla */
padding-left:32px; /* Espacio izquierdo entre el texto y el borde del bloque */
padding-top:3px; /* Espacio superior entre el texto y el borde del bloque */
margin-left:25px; /* Espacio izquierdo entre bloque y elementos externos */
color:#777; /* Color del texto */
font-style:italic; /* Estilo de letra cursiva */
font-size:14px; /* Tama帽o del texto */
line-height:22px; /* Espacio por encima y debajo del texto */
border-top: 1px dotted #b5b5b5; /* Borde superior */
border-bottom: 1px dotted #b5b5b5; /* Borde inferior */
margin-top:10px; margin-bottom:10px; /* Espacio superior entre el bloque y elementos externos */
}

En el transcurso de las semanas ver茅 si encuentro y agrego algunos otros estilos de blockquote o texto citado para Blogger. Por otro lado, si ya tienes un poco de conocimiento acerca de CSS y sus clases, puedes crear t煤 mismo tus propios estilos y destacar el texto de la forma y la apariencia que m谩s te guste.

Puedes hacerlo de la siguiente manera, copiando y pegando lo siguiente en los estilos CSS de tu plantilla Blogger.

.post blockquote {
/* Aqu铆 van todos los atributos CSS */
}

Deja un comentario