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.
Podría interesarte: Cómo crear links de descarga directa en Dropbox

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.

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/s600/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/s600/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
}

Fuente: este post proviene de El Ciberespacio, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: Blogging

Recomendamos

Relacionado

Blogging Tutoriales

Una de las cosa que más me gustan de Blogger, es la capacidad de insertar y personalizar un formulario de contacto, sin la necesidad de recurrir a servicios como JotForm o Foxyform. Sin duda, un gran acierto, pues muchos de estos servicios tienen una limitación en cuanto a la cantidad de mensajes que puedes recibir en tu correo. Añadirlo es bastante sencillo, pues esta función se trata de un gadg ...

Tutorial

Tener una lista de suscripción es muy importante en el camino de convertirse en un Blogger de éxito, sin embargo muchos piensan que una vez hecha la lista vale todo el resto, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilita ...

general propuestas

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

desde0

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

CSS: Nivel B1

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con ...

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...

internet

A veces ocurre que debido a la configuración de nuestra plantilla en Blogger, nuestro blog o sitio web se puede ver en algunos navegadores y en otros no. Sucedió hace algunas semanas que uno de nuestros sitios web, se podía ver en todos los navegadores excepto en Firefox. Al intentar cargar la página en dicho navegador, cargaba y luego la página se quedaba en blanco. Buscando información pudimos ...

general

Hoy vengo con un tutorial facilito y extra rápido, ¡pero espero que muy útil! Últimamente he notado que tengo muy pocos comentarios. Como bloggers entenderéis la importancia que esto tiene. Por un lado nos motiva, pues si bien una ve sus estadísticas y visitas, a pesar de ello, a mi si no me dejan comentarios me da un poco la sensación de que hablo sola. Y por otro nos guía a la hora de saber sobr ...

general diseño

Alguien me dejó un día en el formualrio una petición para que explicara, por favor, cómo poner la primera letra del texto de manera distinta en Blogger. Así: Supongo que querrá imitar el estilo revista. Aparentemente vio un tutorial por ahí pero no lo entendió y quería que yo lo explicara con mis palabras. Para que te quedes tranquila de todos modos, yo tampoco lo entendí. Vamos, en mi opinión no ...

Linux

sed significa s tream ed itor y es un comando de uso común en Linux/Unix. El nombre proviene de un portmanteau de esas dos palabras. No es un editor de texto, aunque sí modifica el texto. En su lugar, sed recibe la entrada de texto como un «stream» y edita el stream de acuerdo con sus instrucciones. En general, la gente usa sed como una versión de línea de comandos de find and replace. E ...