Tutorial: Cómo personalizar el ‘blockquote’ en Blogger


Hello! Hace tiempo que no les traía un tutorial, así que elegí un tópico en el cuál me han pedido ayuda por medio del formulario de tutoriales. Hoy trataré de explicarles sobre cómo personalizar el blockquote en Blogger. Las etiquetas blockquote es el contorno que la mayoría de los bloggers usamos para colocar las sinopsis de los libros ya sea en nuestras reseñas, Waiting on Wednesdays, cubiertas reveladas, etc. Algo como lo siguiente:

blockquoteexample

Paso 1. Las características del CSS

Lo primero que hay que saber es reconocer las características del CSS para así poder personalizar el blockquote a nuestro gusto.  Aquí les dejo las características básicas para personalizarlo:

Característica Sintaxis en CSS
Color del fondo background-color: #valor-hexadecimal;
Los seis números que representan un color.
La imagen del fondo background-image: url(‘enlace’);
Posición del fondo background-position: left top;
background-position: left center;
background-position: left bottom;Pueden usar una de las posiciones, siempre
y cuando estén usando una imagen de fondo.
Repetición del fondo background: repeat;Pueden remplazarlo con repeat-x, repeat-y & no-repeat.
Relleno (padding) padding: 10px;El padding es el espacio entre el texto y el borde de contenedor.
Pueden cambiar el valor de 10 por el que ustedes gusten.
También pueden remplazar padding por padding-top, padding-left,
padding-right; & padding-bottom;.
Margen margin: 10px;El espacio afuera del contenedor.
Pueden cambiar el valor de 10 por el que ustedes gusten.
También pueden remplazar margin-top, margin-left,
margin-right; & margin-bottom;.
Color del borde border-color: #valor-hexadecimal;Seis números que representan el color.
Estilo del borde border-style: dashed;Pueden remplazar dashed (guiones) con dotted (punteada) o solid (sólida).
Ancho del borde border-width: 3px;Remplacen el 3px con el valor que gusten.
Esquinas redondeadas -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Remplacen el valor de 10 por el que ustedes gusten.
Tipografía font-family: ‘nombre-de-la-fuente’, ‘fuente-alternativa’;Por ejemplo: Arial, Helvetica, sans-serif;
Tamaño de la tipografía font-size: 16px;Remplacen el valor 16 por el tamaño que ustedes deseen.
Color de la tipografía color: #valor-hexadecimal;Nuevamente los seis números que representan el color.

Paso 2. Personalizando el blockquote

Ahora usando las características que deseen pueden personalizar el blockquote. Aquí tienen mi ejemplo:
 blockquote {
 background-color: #c18eba;
 padding: 10px;
 margin: 10px;
 border-color: #a22992;
 border-style: dashed;
 border-width: 2px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 18px;
 color: #ffffff;
 }

Y el resultado es el siguiente:

blockquoteexample03

Paso 3. Añadiendo el CSS

Para añadir el código personalizado a sus plantillas, simplemente vayan a Plantilla - Editar HTML y busquen la etiqueta ]]></b:skin> (presionen CTRL+F). Una vez que la localicen, añadan su código personalizado ANTES del ]]></b:skin>. Ejemplo:

blockquoteexample04

Atención:

Si sus plantillas ya tienen el blockquote personalizado, entonces cuando agreguen el código que han personalizado pueda que sobrescriban los códigos. Para que su personalización tome prioridad, añadan !important al final de cada código. Ejemplo:

blockquote {
 background-color: #c18eba !important;
 padding: 10px !important;
 margin: 10px !important;
 border-color: #a22992 !important;
 border-style: dashed !important;
 border-width: 2px !important;
 -webkit-border-radius: 10px !important;
 -moz-border-radius: 10px !important;
 border-radius: 10px !important;
 font-family: 'Open Sans Condensed', sans-serif !important;
 font-size: 18px !important;
 color: #ffffff !important;
 }

Espero que el tutorial les ayude; cualquier duda pueden dejarla en los comentarios y las responderé cuanto antes 😀

Para solicitar un tutorial, pueden hacerlo a través de aquí 😛

Siempre sonrían,

Sobre Annaiss

Annaiss es una chica veinte-tantos años, es introvertida y una fangirl. Vive en USA y desde que estudió Español en el octavo grado de secundaria se enamoró de su idioma natal y ahora lo practica de la mejor manera que puede: blogging. Le gusta leer de todo género, aunque prefiere el Romance contemporáneo. Puedes encontrarla en Twitter, Facebook e Instagram.

Publicado en 20/02/2014 por Annaiss en Tutorial / 23 Comments

Etiquetas: , , , ,

23 Responses to “Tutorial: Cómo personalizar el ‘blockquote’ en Blogger”

  1. Hola Annaiss!, gracias por el tutorial, esta super completo y se ree entiende… Pero tengo un pequeño problema, cuando quiero modificar el blockquote en mi blog, aplico el codigo nuevo, pero no me aparece nada, solo la palabra en blanco, el blockquote sin estilo…. hice todo lo que dijiste, poniéndole “!important;” al finalizar el código, pero no pasa nada, sigue el blockquote en blanco. Espero que puedas ayudarme!
    Saludos.
    Jackiie recently posted…La cuna vacia – Sophie HannahMy Profile

  2. me encantó la explicación, muy fácil de entender. pero tengo una pregunta. se puede utilizar más de un cuadrito??
    porque yo siempre pongo el mismo y cuando quiero poner otro de otro color no me deja y se pone como el anterior :/
    me gustaría que me saques esa duda…
    gracias !

  3. Hola, es que he seguido tus pasos y no me sale el blockquote y ya hize el intento en una entrada pero me sale en blanco asi que necesitaria ayuda para que me digas que le puedo cambiat es que lo quieroen forma de rayas – – – – – – –

  4. yo tengo una duda(mejor dicho muchas)
    como coloco texto?
    como coloco imagen?
    al poner el blockquote a mi me salen las letras del blockquote pero no me sale ningun recuadro ni nada que hago?

  5. Me ha quedado genial el blockquote pero tengo para poner la imagen como vos la pusiste, me refiero a sobresalida del blockquote, me queda alineandola a la derecha pero dentro del blockquote no medio afuera como a vos, y me gustaria que quede asi. Si me pusieras ayudar? GRACIAS!

  6. ¡Sos una genia! Muchísimas gracias, hace poco estoy empezando y esto me super ayuda en el nuevo diseño que estoy tratando de darle mi Blog. Muchas gracias.

Leave a Reply

CommentLuv badge