Prácticamente todas las plataformas de blogs, incluidas bloguero, tienen la función de «citar texto». Esto es útil cuando desea resaltar secciones de otros textos o cuando necesita resaltar información dentro de su propio artículo. El texto citado se puede personalizar para que se vea diferente del cuerpo principal de su artículo y estas diferencias lo hacen destacar.
En este artículo, describiré cómo utilizar la función de «citar texto» en los blogs de Blogger y cómo personalizar su apariencia.
Cómo citar texto
Seleccionar el 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 «
» alrededor del texto.
El aspecto predeterminado es una sangría simple y esto realmente no ayuda a diferenciarlo del resto del artículo. Por lo tanto, es útil cambiar la apariencia del texto citado predeterminado.
Edición de la apariencia 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 Blogger Favicons.
Primero, abra su panel de control 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 esté 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 uso para mi texto citado en mi blog personal TechComet son como sigue:
blockquote { margin:1em 20px; background: #dfdfdf; padding: 8px 8px 8px 8px; font-style: italic; }Esto produce el siguiente efecto cuando selecciono texto para citar:
El texto está ligeramente sangrado, está en cursiva y tiene un fondo gris claro. Estos cambios realmente hacen más llamativo el texto citado y es fácil diferenciarlo del cuerpo principal del artículo.
Hay una serie de 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 el margen es del resto del texto. He puesto 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 «fondo». He elegido un color gris claro. Los colores en el código HTML están representados por seis “dígitos hexadecimales”. Puede obtener una lista de colores y sus dígitos hexadecimales correspondientes de aquí.
Relleno
La cantidad de «relleno» que utilice determina la distancia a la que se encuentra el texto citado del 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 cifra es la distancia (en píxeles) desde la parte superior del cuadro de texto de la cita hasta el comienzo del texto, la segunda cifra es la sangría derecha, la tercera cifra es la sangría inferior y la cuarta cifra 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 cursiva el texto citado para que realmente se vea diferente del resto de su artículo.
font-style: italic font-style: boldFronteras
No he optado por agregar un borde a mi texto citado, sin embargo, si lo desea, puede hacerlo usando la etiqueta «borde». Debe elegir el grosor, el estilo y el color de su borde.
border: 2px solid #dfdfdf border: 2px dotted #dfdfdfConclusión
En la mayoría de los blogs modernos, a menudo hay secciones que se citan de otros sitios web y blogs. Para hacer que su blog se destaque y agregarle un toque «profesional», le recomendaría dedicar algo de tiempo y personalizar el aspecto de su texto citado.
¡Háganos saber cómo se cita el texto en sus artículos!
