Como personalizar el texto citado de Blogger

agosto 30, 2014

Como personalizar el texto citado de Blogger

¿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:


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.







Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

10 pensamientos ¡falta el tuyo! ;)

  1. hola yo he venido a ti en busca de este cambio. Se aplica a todos Crear incluso los viejos o tengo que hacerlo manualmente?. Se trata de personalizar los ingredientes del blog de cocina de recetas. Gracias
    Francesca

    ResponderEliminar
    Respuestas
    1. ¡Hola Francesca!

      ¿Puedes explicarte un poco mejor? No sé exactamente a qué te refieres ¡lo siento!

      Muchas gracias ¡y feliz domingo!

      Eliminar
    2. Le envié un correo electrónico!
      que tengas una buena noche
      Francesca

      Eliminar
  2. Me encanta Celia gracias por compartirlo :) un besazo

    ResponderEliminar
  3. Hola Celia, y si quiero rellenar mis texto citados, ¿qué haría?
    He intentado hacerlo con la etiqueta blackground-color: #333333 pero no puedo a ver si me lo puedes explicar porque tenía en mente hacerlo. Muchas gracias por el tutorial

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Hay un error en el código que me pones, pero no sé si es una errata...

      pones: blackground-color: #333333

      Y es: background-color: #333333;

      Ya me contarás :)

      ¡¡Feliz tarde!!

      Eliminar
  4. No me funciona.
    He puesto:
    }
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
    color: #F5A9BC;
    border-top: 3px double #81F7BE;
    border-bottom: 3px double #81F7BE;
    border-left: 0px double #81F7BE;
    border-right: 0px double #81F7BE;
    text-align: felt;

    /* Comments

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Si te fijas el código va entre las dos { }

      Por el trocito de código que me pegas, tú lo has puesto después de }

      Las llaves sirven para encerrar el estilo que asignamos a un determinado "apartado" de nuestro blog, en este caso al ID texto citado, prueba a meter tu código entre las dos llaves como puedes ver en los diferentes ejemplos del tutorial y me cuentas si se ha solucionado :)

      ¡Feliz tarde!

      Eliminar
  5. ¡Hola!
    Pero... ¿qué debo hacer si sólo deseo incluirle ese tipo de letra a un gadget de texto?

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.