¡Hola a todos, limoneros! ¿Qué tal habéis pasado las vacaciones de Semana Santa? Lamentablemente ya se han terminado... Ha sido un abrir y cerrar de ojos, no me ha dado tiempo para nada (ノ ゜Д゜)ノ ︵ ┻━┻ Como podéis ver por el título, hoy os traigo otro tutorial ☆ヾ(*´・∀・)ﾉ Pero antes de entrar en materia, os dejo los dos tutoriales anteriores, por si les queréis echar un vistazo.
Cómo enmarcar un texto en Blogger | Cómo personalizar el anuncio de cookies en 5 minutos |
Hace un mes o así estaba cotilleando por la bloggosfera y descubrí algo que se llama "Bloque de citas". Después de cuatro años en estos lares, aprendí que las comillas que salen en el editor de entradas de Blogger [Estas → ❝ ] sirven para citar un texto automáticamente. La verdad es que como nunca había tocado ese botón, no me había planteado lo que hacía. Cuando marcamos el texto que queremos citar, queda algo tal que así:
¡HOLA! ¡Soy un texto citado! Quiéreme :3
A simple vista, desde el editor de entradas parece que mueva la frase a la derecha y que no haga nada más. Pero si tenemos personalizado el entrecomillado, cuando vayamos a la vista previa se nos verá todo correcto. ¿Y cómo lo personalizamos? La verdad es que es bastante sencillo. Pero antes de empezar a toquetear, os recomiendo que tengáis abierta la página de códigos hexadecimales de los colores, así iremos un poquito más rápido [HTML COLOR CODES]. Y ahora... ¡Seguid estos pasos y veréis que fácil es!
Lo primero que debemos hacer es ir a nuestra plantilla > Editar HTML > Ctrl+F > y buscar, dentro de la plantilla este elemento → ]]></b:skin>
Una vez lo hemos encontrado, simplemente debéis pegar encima el siguiente código:
Después, podéis mirar en la Vista previa por si os sale algo raro. Como el código no cambia nada de la plantilla en sí, no se puede ver desde aquí el efecto que hace el bloque de citas. Le damos a guardar y ¡listo! Si dejáis el código así, os quedaría el bloque de citas igual que el mío. Pero, como lo que nos interesa es personalizarlo a vuestro gusto, os enseño también cómo hacerlo.
![]()
![]()
¿Y cuál es la diferencia entre el bloque de citas y enmarcar un texto como ya os había enseñado? Pues que con el primero, el texto se cita automáticamente, no tenéis que trastear el HTML del editor de entradas y podéis tener el mismo estilo de citas para todas las entradas del blog que pongáis. Con una vez que trastees el HTML, siempre se verá así, a menos que vosotros decidáis cambiarlo. En cambio, con el enmarcado de texto, podéis personalizar cada cita como vosotros queráis, teniendo diferentes estilos en una misma entrada y diferentes estilos en cada entrada del blog. Ahora solo depende de vosotros decidir qué queréis usar.
Lo primero que debemos hacer es ir a nuestra plantilla > Editar HTML > Ctrl+F > y buscar, dentro de la plantilla este elemento → ]]></b:skin>
Una vez lo hemos encontrado, simplemente debéis pegar encima el siguiente código:
blockquote {
background: #FFFFFF; /*Color de fondo */
padding: 15px; /*Espacio entre el texto y el bloque*/
margin: 20px; /*Espacio de fuera del bloque*/
border-left: 3px solid #85BAC3; /*Borde izquierdo del bloque */
border-right:3px solid #85BAC3; /*Borde derecho del bloque */
font-family: 'Open Sans Condensed', sans-serif; /*Fuente del texto*/
font-size: 18px; /*Tamaño del texto*/
color: #000000; /*Color del texto*/
text-align: center; /*Estilo del texto*/
font-style: italic; /*Letra en cursiva*/
}
Después, podéis mirar en la Vista previa por si os sale algo raro. Como el código no cambia nada de la plantilla en sí, no se puede ver desde aquí el efecto que hace el bloque de citas. Le damos a guardar y ¡listo! Si dejáis el código así, os quedaría el bloque de citas igual que el mío. Pero, como lo que nos interesa es personalizarlo a vuestro gusto, os enseño también cómo hacerlo.
- Background es el color de fondo del bloque de citas. En este caso, es de color blanco, pero podemos ponerle cualquier otro fondo. Por otro lado, también podemos poner una imagen como fondo del bloque de citas, para eso solo tendréis que cambiar la línea de background por esta otra → background: url(URL DE LA IMAGEN);
- Padding es la separación que habrá entre los bordes del bloquote y el texto de dentro. Podéis aumentarlo o disminuirlo a vuestro gusto, pero os recomiendo que siempre lo pongáis, puesto que queda mejor visualmente hablando.
- Margin es la separación que habrá entre el bloque y los bordes de la entrada.
- Border es, evidentemente, el borde del bloque de citas. En este caso solo tenemos el borde derecho [border-right] y borde izquierdo [border-left]. Podemos tener hasta cuatro bordes distintos: Cuatro bordes iguales: border:3px solid #85BAC3;Borde derecho: border-right:3px solid #85BAC3;Borde izquierdo: border-left:3px solid #85BAC3;Borde inferior: border-bottom:3px solid #85BAC3;Borde superior: border-top:3px solid #85BAC3;
- 3pxes el grosor [en píxeles] que tendrá el borde. Cuánto más elevado sea el número, más grosor tendrá el borde.
- Solid es el estilo del borde. En este caso es una línea contínua, pero podéis probar muchas más: dotted, double, dashed...Encontraréis como quedan en esta imagen → AQUÍ
- Todo lo que lleve # es el código de color. Podéis cambiarlo a vuestro gusto, con los códigos HTML de los colores. Incluso podéis combinarlos, para tener un borde de un color y los demás de otro, por ejemplo.
- Font-family es, como su nombre indica, el tipo de fuente que va a tener el texto que citemos, podéis cambiarla por Arial, Helvetica... Font-size es el tamaño que tendrá la fuente y color el color que tendrá el texto. Además, también podemos modificar el estilo de la letra font-style. En este caso está en cursiva [italic], pero podemos ponerla en negrita [bold] o sin ningún estilo [normal].
- Text-align será la alineación del texto. En este caso está centrado, pero puede ser alineado a la derecha [cambiamos el center por right], a la izquierda [cambiamos center por left], o justificado [cambiamos center por justify].
- Además, también tenéis la opción de poner los bordes redondeados, simplemente añadiendo el código border-radius:10px; Aquí también podréis poner qué borde queréis que se vea redondo (left, right, bottom, top) y cuántos píxeles.
¿Pero qué pasa si no os termina de gustar este tipo de bloque de citas? Pues tengo otra opción que quizá os gustará más. En esta segunda opción vamos a resaltar un texto de forma parecida a la anterior, pero en vez de estar "encerrado"vamos a entrecomillarlo. El bloque de citas quedaría tal que así:
En este caso, usamos unas comillas y no unas líneas verticales/horizontales. ¿Y cómo podéis tener este entrecomillado?Solo necesitáis copiar el código encima de ]]></b:skin> , tal y como habíamos hecho con el ejemplo anterior. Este es el código que necesitáis:
blockquote {
background:#ffffff; /* Color de fondo */
text-align: center;
color: #000000; /*Color del texto*/
padding:10px;
}
blockquote:before {
content: "\201C"; /* inicio comilla */
font-family: Georgia;
font-size:40px; /* tamaño de la comilla */
font-weight: bold; line-height:0px;
color:#000000; /* Color de la comilla inicial*/
vertical-align:middle;
}
blockquote:after { /* final */
content: "\201D";
font-family: Georgia;
font-size:40px; /* tamaño de la comilla*/
font-weight: bold;
line-height:0px;
color:#000000; /* Color de la comilla final*/
vertical-align:middle;
padding-top:10px;
}
Igual que con el ejemplo anterior, dadle a la vista previa por si os sale algo raro y, si no sale nada, dadle a guardar ¡y listo!Este código también se puede personalizar, con los mismos parámetros que el anterior. Como habréis imaginado, todo lo que hay entre /* */ es lo que significa esa línea de código. Así, /* Color de la comilla final */ es el color de la comilla que cierra el texto. Podéis personalizar a vuestro gusto el fondo del bloque de citas, el tamaño de las comillas, el color de las mismas...¡Tenemos muchas posibilidades!
Una vez habéis insertado uno de los dos códigos en la plantilla ya podéis usar las comillas que salen en el editor de entradas de Blogger, viendo en la vista previa como quedan una vez personalizadas. Si queréis ver cómo quedan antes de guardar el código definitivo, os recomiendo hacerlo en un blog de pruebas. Así, simplemente escribís un texto base entrecomillado y lo publicáis. Luego solo teneis que pegar el código en la plantilla e ir haciendo los cambios que queráis, pudiendo verlos en la vista previa sin tener que guardar y salir de la plantilla.
Fuente: Ciudad blogger - Un blog bonito para ti
¡ESPERO QUE ESTE TUTORIAL OS HAYA SIDO DE UTILIDAD! Si tenéis alguna duda o consejo, o incluso si queréis pedirme un tutorial, no tenéis más que comentar.
Gracias ♥
Psst, pstt. ¿Os queréis perder la próxima entrada? Si la respuesta es no, apuntaos al blog → SÍGUEME