Cómo darle estilo a sus citas en Blogger

Prácticamente todas las plataformas de blogs, incluido Blogger , tienen la función «citar texto». Esto es útil cuando desea resaltar secciones de otros textos o cuando necesita resaltar información de su propio artículo. El texto citado se puede personalizar para que se vea diferente al cuerpo principal de su artículo y estas diferencias lo hacen destacar.

En este artículo, describiré cómo utilizar la función «citar texto» en los blogs de Blogger y cómo personalizar su apariencia.

Cómo cotizar texto

Seleccionar texto para citar es bastante fácil. En Blogger, por ejemplo, puede «citar texto» seleccionándolo y presionando el botón «citar texto».

También puede seleccionar texto para citar agregando la etiqueta “<blockquote> ” alrededor del texto.

El aspecto predeterminado es una simple sangría y esto realmente no ayuda a diferenciarlo del resto del artículo. Por lo tanto, es útil cambiar el aspecto del texto entre comillas predeterminado.

Editar el aspecto del texto citado

Editar el aspecto del texto citado requiere editar el diseño HTML básico de su blog. Cubrí cómo editar esto en mi artículo anterior sobre Favicons de Blogger.

Primero, abra su panel de Blogger y seleccione » Diseño «.

A continuación, en la ventana principal de Blogger, seleccione » Editar HTML» .

Esto abrirá el editor de plantillas HTML. Aquí, marque » Expandir plantillas de widgets» para asegurarse de que todo el código HTML de su blog sea visible. 

Luego, desplácese hacia abajo y busque la sección que contiene la palabra » blockquote «. Todas las opciones relevantes para el texto citado irán entre «{» y «}».

Personalización del aspecto del texto citado

Las opciones que utilizo para mi texto citado en mi blog personal TechComet son las siguientes:

Esto produce el siguiente efecto cuando selecciono texto para citar:

El texto está ligeramente sangrado, en cursiva y hay un fondo gris suave. Estos cambios realmente hacen que el texto citado sea más llamativo y es fácil diferenciarlo del cuerpo principal del artículo.

Hay varias opciones diferentes que puede agregar a su texto citado y las discutiré a continuación.

Margen

Primero, querrá sangrar su texto para que no esté en la misma línea que el resto de su artículo. Puede hacer esto ajustando la cantidad de píxeles que tiene el margen del resto del texto. He configurado el mío en 20px. Ajuste este valor como mejor le parezca.

Color de fondo

A continuación, puede cambiar el color de fondo ajustando la etiqueta » background» . He elegido un color gris claro. Los colores en el código HTML están representados por seis » hexdigits «. Puede obtener una lista de colores y su correspondiente hexdigit desde aquí .

Relleno

La cantidad de «relleno» que utiliza determina la distancia entre el texto citado y el borde del cuadro creado por el color de fondo. Cuanto menor sea el número de píxeles, más cerca estará el texto del borde del cuadro.

La primera figura es la distancia (en píxeles) desde la parte superior del cuadro de texto de la cita hasta el inicio del texto, la segunda figura es la sangría derecha, la tercera figura es la sangría inferior y la cuarta figura es la sangría izquierda (en En resumen, las 4 cifras comienzan desde arriba y van en el sentido de las agujas del reloj).

Estilo de fuente

También puede poner en negrita o en cursiva el texto citado para que se vea realmente diferente al resto de su artículo.

Fronteras

No he optado por agregar un borde a mi texto citado, sin embargo, si lo desea, puede hacerlo utilizando la etiqueta » borde» . Debes elegir el grosor, estilo y color de tu borde.

Conclusión

En la mayoría de los blogs modernos, a menudo hay secciones citadas de otros sitios web y blogs. Para hacer que su blog se destaque y darle un toque «profesional», le recomendaría dedicar un tiempo y personalizar el aspecto de su texto citado.

¡Háganos saber cómo se cita el texto en sus artículos!

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario