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.
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.§:
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>
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>
Cada vez que implementamos un nuevo menú, galería,lista de enlaces, etc. a nuestro blog lo acompañamos con una hoja de estilos, el CSS, el que podemos definir a nuestro gusto cambiando colores, bordes, márgenes, fondo...Sin embargo, hay quienes no entienden muy bien las propiedades de la hoja para poder cambiarlos a su gusto. Es por ello que vamos a empezar a ver las diferentes propiedades CSS, indicando que valores se puede usar para cada uno y así sentirnos más cómodos al momento de personalizar nuestro CSS.
En futuros post veremos más formas de personalizar nuestro Blockquote.
