¿Sabes que Blogger permite marcar nuestros textos citados para diferenciarlos del resto del texto de la entrada? ¿Y qué podemos personalizar, desde nuestra plantilla HTML, el formato de nuestro texto citado? Pues sí, es el tema que vamos a tratar hoy. Otro de esos pequeños detalles que marcan la diferencia y tardamos dos minutillos en configurar.
Citar un texto en Blogger
Primero vamos a ver como activar esta opción, por si no lo has hecho nunca, ya que vamos a necesitar tener publicada una entrada con un texto en forma de cita para poder personalizar el formato. Puedes hacerlo en un blog de pruebas si tu blog es público y ya tiene visitas.1.- Creamos una nueva entrada de prueba, escribimos el texto que queremos citar, lo seleccionamos y pinchamos en Cita. Es la opción de las comillas que encontrarás en la barra de herramientas superior de tu panel de edición de entradas, te la he marcado en azul en la siguiente captura de pantalla:
2.- Una vez hemos marcado nuestra frase como una cita, publicamos la entrada y puedes ver el formato por defecto que asigna Blogger a las citas:
Lo único que hace es dejar más margen entre el texto normal y el citado, pero mantiene el mismo tipo de letra. Vamos a darle algo de color para que vaya a juego con el resto de nuestro diseño ¿vale?
Personalizar el texto citado de Blogger
1.- Abrimos nuestra plantilla HTML teniendo una entrada con texto citado publicada.
Ruta: Plantilla >> Editar HTML
2.- Pinchamos en cualquier zona dentro del cuadrado que contiene el código de nuestra plantilla para que se abra en buscador interno de Blogger, no el general de la web. Pulsamos Control + F a la vez para abrir el buscador.
3.- Buscamos: /* Posts
4.- Dentro de esa parte del código, encontraremos el estilo asignado a los diferentes elementos que componen nuestro post. Vamos a crear uno nuevo para el texto citado.
5.- Bajamos hasta el final, termina justo donde empieza: /* Comments que son los comentarios de tu blog.
6.- Encima de /* Comments creamos nuestro nuevo ID para el texto citado con el siguiente código:
.post blockquote{
}
Quedaría así:
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
.post blockquote{
}
/* Comments
----------------------------------------------- */
Cambiar tipo de letra del texto citado
7.- Ahora vamos a aplicarle el formato que queramos. Empezamos por el tipo de letra:
.post blockquote{
font-family: #;
}
Puedes sustituir el símbolo # por cualquiera de los tipos de letra que aparecen en Blogger por defecto o añadir una nueva desde Google Fonts. Vamos a ver, paso a paso, como instalar una nueva fuente:
8.- Entramos en Google Fonts: click aquí. Y buscamos una letra que combine a la perfección con el resto de nuestro diseño. Yo he elegido ésta para la prueba:
9.- Cuando hayas encontrado la tuya, solo tienes que hacer click en el botón azul de la derecha: Add to Collection.
10.- Abajo se abrirá una ventana emergente gris, donde pincharemos en Use (a la derecha).
11.- En la nueva ventana, bajaremos hasta el apartado 3:
12.- Copiamos ese código y volvemos a nuestra plantilla HTML. Abrimos de nuevo el buscador interno y buscamos: </head>.
Pegamos nuestro código de Google Fonts justo encima, así:
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
</head>
13.- Y añadimos una / justo entre ' y >. Tiene que ser exactamente ahí para que Blogger reconozca la nueva fuente. Quedaría así:
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>
</head>
14.- Ya tenemos nuestra nueva fuente, ahora vamos a indicarle a Blogger que queremos que la muestre en el texto citado. Para ello volvemos a nuestro código anterior:
.post blockquote{
font-family: #
}
Y sustituímos la almohadilla por el código que Google Fonts nos ofrece en el apartado 4:
En mi ejemplo, quedaría así:
.post blockquote{
font-family: 'Poiret One', cursive;
}
Y el resultado en Vista Previa:
Se ve muy pequeña, vamos a aplicarle el tamaño que queramos.
15.- Añadimos una nueva variable a nuestro código:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
}
16.- Y color:
.post blockquote{font-family: 'Poiret One', cursive;font-size: 20px;color: #F5A9BC;}
Puedes cambiar mi código de color por el que mejor se adapte a tu diseño de esta web:
Colores HTML
Mi resultado hasta ahora:
17.- Podemos indicarle a Blogger que muestre nuestro texto citado siempre en mayúsculas:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
}
O en minúsculas:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: lowercase;
}
Si no quieres ninguna de las dos opciones, borra esta línea de código. Yo voy a dejarlo en mayúsculas para ilustrar el siguiente paso.
18.- Y añadir un espaciado diferente entre nuestras letras:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
}
Añadir bordes al texto citado
19.- Una vez tengamos nuestro tipo de letra definida, podemos añadir bordes decorativos:.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border: 1px solid #81F7BE;
}
Donde puedes variar:
Grosor del borde: 1px. Puedes aumentarlo sin problema hasta que quede como quieres.
Tipo de borde: solid.
Puedes cambiarlo por:
dashed >> línea discontínua:
dotted >> línea punteada:
double >> línea doble. Para que se vea bien, tienes que aumentar el número de píxeles, por ejemplo:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border: 3px double #81F7BE;
}
Color del borde: #81F7BE;
Puedes cambiarlo por el que quieras sacando el código de color de la web que vimos para el color del tipo de letra un poco más arriba.
20.- Como hemos visto en otras entradas, podemos desglosar los bordes, aplicando un formato diferente a cada uno de ellos:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 3px double #81F7BE;
border-bottom: 3px double #81F7BE;
border-left: 0px double #81F7BE;
border-right: 0px double #81F7BE;
}
Donde pongas 0px, el borde no aparecerá. Pero ya lo tendrás creado por si más adelante quieres cambiarlo. Solo tienes que ir cambiando el grosor, tipo y color de cada uno de los bordes hasta que quede tal y como quieres sabiendo que:
border-top: borde superior.
border-bottom: borde inferior.
border-left: borde izquierdo.
border right: borde derecho.
Margenes y alineación del texto citado
21.- Para terminar, podemos modificar la alineación del texto:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 3px double #81F7BE;
border-bottom: 3px double #81F7BE;
border-left: 0px double #81F7BE;
border-right: 0px double #81F7BE;
text-align: center;
}
Resultado:
Donde puedes cambiar center por:
left >> alineado a la izquierda.
right >> alineado a la derecha.
33.- Y modificar el espaciado entre el texto citado y los bordes:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 3px double #81F7BE;
border-bottom: 3px double #81F7BE;
border-left: 0px double #81F7BE;
border-right: 0px double #81F7BE;
text-align: center;
padding: 10px;
}
Resultado:
Puedes aumentar o reducir el número de píxeles hasta conseguir el espaciado que quieras. O, incluso, desglosar el padding:
.post blockquote{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #F5A9BC;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 3px double #81F7BE;
border-bottom: 3px double #81F7BE;
border-left: 0px double #81F7BE;
border-right: 0px double #81F7BE;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
Resultado:
En Vista Previa no se aprecia el espaciado a la derecha (right) y a la izquierda (left) debido a que el texto del ejemplo es muy corto, pero si fueran varias líneas de texto se vería así:
¡Y ya hemos terminado! Una vez tengas tu texto citado tal y como quieres, solo tienes que guardar los cambios y cada vez que desde Edición de Entradas selecciones un trozo de texto y le apliques el formato cita, aparecerá así automáticamente.
Puedes usarlo para resaltar texto importante, insertar títulos dentro de tus entradas o hacer referencia a fuentes externas de donde extraes la información. Eso ya es decisión tuya.
Si te animas a usarlo, ¡déjame el enlace a tu blog en comentarios! Me encantará verlo, siempre hace ilusión saber que este tipo de tutoriales, con un paso a paso detallado, ¡son útiles! Merece la pena el tiempo invertido en editarlos.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure