El Perro de Papel Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Como personalizar el texto citado de Blogger

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:

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.


¡No te pierdas nada!

¿Quieres un diseño diferente, personalizado y original para tu blog? ¿Tal vez un nuevo logotipo, tarjetas de visita o imprimibles? ¡Haz click aquí!¿Quieres mantener actualizado, optimizado y bonito tu blog? ¿Tal vez aprender a hacer tus propios diseños personalizados? ¡Déjame ayudarte! Saber Más


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

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

internet blog intermedio ...

Personalizar el enlace a los comentarios de Blogger

Hoy quiero compartir contigo un tutorial muy sencillito pero que a mí, personalmente, me encanta y, de hecho, en mis últimos diseños personalizados para Blogger estoy usando mucho. Creo que es uno de esos detalles que demuestran el cariño que ponemos en nuestro blog. Vamos a ver como personalizar el enlace a los comentarios de Blogger. El footer que aparece por defecto con la plantilla simple de B ...

general

Cómo quitar los dos puntos de los comentarios en blogger y/o cómo personalizar el texto

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 ...

internet blog tblog ...

Consultoría Blogger - Resolviendo dudas de tutoriales 4

Hola a todos!!! Ya estamos de nuevo a final de mes y vengo a resolver las dudas de tutoriales antiguos que os han surgido y que se habían quedado pendientes de resolver. Como personalizar el texto citado de Blogger Este es el código que Celia proporcionaba para poner el texto citado con diferentes características: .post blockquote{ font-family: "Poiret One", cursive; font-size: 20px; c ...

Cómo personalizar el contador de visitas blogger

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 blog intermedio ...

Cómo personalizar el gadget de entradas populares

No sé si te has fijado en cómo se ve ahora mi barra lateral. He enmarcado algunos de los gadgets en marcos del mismo color azul que el que uso como color principal del blog. ¡Me encanta ese azul! No es el típico pastel y creo que va mucho conmigo y lo que quiero transmitirte, es vivo, brillante y con fuerza. A mí me hace sentir seguridad y me relaja, no me costó mucho escogerlo... ¡y creo que acer ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

internet blog intermedio ...

Cambiar el tipo de letra del pie de las fotos en Blogger

Hoy quiero contarte cómo cambiar el tipo de letra de la leyenda de las fotos de Blogger. La que aparece por defecto es la que puedes ver en la imagen de arriba, como ves, no resalta nada y es un tanto fea. Por lo que si uno de tus objetivos es tener un blog bonito, cuidando cada detalle y encima utilizas muchas fotos... ¡es una buena idea personalizar este texto! Y además... ¡no se tarda nada! Sol ...

general diseño

Cómo poner la primera letra del texto distinta al resto en blogger

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 ...

internet blog intermedio ...

Cómo personalizar las fotos en Blogger

Seguimos con tutoriales para Blogger que, junto a imprimibles y clip arts, son de las cosas que más me pedís por email. Esta vez, las protagonistas serán las fotos de nuestras entradas. Vamos a ver cómo personalizarlas de una manera muy sencilla, para que aparezcan todas con el mismo efecto de manera automática en nuestras entadas del blog. Necesitas tener al menos una entrada con una foto publica ...

Tutorial

Personalizar un formulario en Blogger

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 ...