Anteriormente habíamos visto que era un
blockquote y cómo personalizar el que viene por defecto en nuestro blog.
Hoy les traigo otra forma de personalizar el blockquote, esta vez en forma de burbuja de diálogo que puede ser útil para blogs de literatura, donde se haga reseñas y se destaque alguna cita de un libro, pero en general puede usarse en cualquier blog.
Si te gustó, sólo sigue estos pasos:
1.§ Ingresamos a Plantilla y luego a Editar HTML.
2.§ Damos un clic dentro de la plantilla y con
CTRL+F buscamos
blockquote o
.post blockquote
Si tenemos la etiqueta en la plantilla, lo borramos junto con su contenido y lo reemplazaremos por el siguiente código.
Si no lo tenemos en la plantilla, no hay problema, agregaremos todo el código encima de
]]></b:skin>
3.§ Agregamos el código teniendo en cuenta lo indicado en el paso 2.§:
blockquote {
width: 400px;
background: #EE646F;
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-style: italic;
font-weight: bold;
line-height: 18px;
padding: 20px 11px 10px 11px;
text-align: center;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
blockquote:after {
border: solid 10px transparent;
border-top-color: #EE646F;
border-bottom: 0;
bottom: -20px;
content: "";
display: block;
height: 0;
left: auto;
right: -350px;
overflow: hidden;
position: relative;
width: 0;
}
Para cambiar el color de la burbuja, cambiamos los
colores seleccionados en negrita.
Si queremos aumentar o disminuir el nivel de redondeado de las esquinas, cambiamos los tres valores que están en cursiva.
4.§ Damos clic en Guardar Plantilla.
5.§ Para usarlo, cada vez que estemos creando un nuevo post, seleccionamos el texto que irá en el blockquote y damos clic al botón en forma de comillas en el editor de post que está en la parte superior.
O si trabajamos con el modo HTML también podemos hacerlo agregando <blockquote>Aqui texto</blockquote>
