¡Es hora de tutear!, debido a la gran cantidad de consultas de html y java que hemos recibido en casi dos años, os englobaremos aquí todo lo que sabemos (y vayamos aprendiendo).
, pero por culpa de youtube nunca podemos subir el vídeo que acompaña el tutorial. Prometemos que será el siguiente, y por mientras, abrimos apetito con este pequeño tutorial de cómo usar las
Blockquotes y cómo personalizarlas.
Está dedicado a Iona, que hace poco nos envió una consulta a través del formulario.
En ella nos preguntaba: "Hola, sólo quería saber cómo hacéis para tener diferentes recuadros que "envuelvan" los textos de una entrada. Como si fueran diferentes Blockquotes. Ya está, gracias"
¡Pues bien, vamos a empezar el tutorial!
¿Qué son las Blockquotes?
Antes de empezar a explicar qué códigos usar y cómo meterlos en las plantillas o entradas,
¿sabéis qué es una blockquote? Si sabemos inglés podemos deducir su nombre, pero un ejemplo gráfico sería éste:
Esto que véis es una blockquote (una cita en bloque). Cada blog debe tener su propia blockquote y para eso utilizaremos los códigos CSS.
Para hacerla aparecer en el texto, tan sólo seleccionamos lo que queramos resaltar y le damos a ese botón que os señalamos en la imagen.
Lo que pregunta
Iona, además, es tener varias de estas Blockquotes para adornar nuestros textos. A los otros recuadros los llamaremos "
divs" coloquialmente, ¿vale?
Nosotros solemos usar una blockquote y unas cuantas divs en cada entrada, dependiendo de lo que queramos destacar. Lo mejor es tener un orden.
Una div es algo como esto. Puedes poner las que quieras en el texto y las puedes personalizar directamente en la entrada
Personalizando las Blockquotes
Para personalizar las blockquotes debemos irnos al interior de la plantilla: Panel de Control/Diseño/Edición HTML.
Una vez allí, utilizamos el atajo del teclado
CNTRL + F y buscamos
".post-blockquote".
AVISO: Algunas plantillas lo llamarán de manera diferente, para buscar vuestra blockquote sin saber exactamente cómo se llama, iremos debajo de .post-footer y buscaremos algo parecido.
Nos encontraremos con unos códigos parecidos a estos:
.post blockquote {
width:400px;
margin: 10px 0 10px 26px;
padding: 20px;
font-size:55px;
font-family: verdana;
color: #ffffff; ---> El color de la letra
background: #000000; ---> El color del fondo
border: 5px dotted #ffffff; --> El color del borde
}
Por supuesto, el que veis es un ejemplo, vosotros debéis hacer el vuestro. Aquí tenéis una buena página para encontrar colores.
Los bordes se pueden personalizar por completo. El "
px" son los "
pixeles", o sea, el tamaño, puedes poner el número que quieras. Para cambiar los tipos de bordes, aquí tenéis algunas sugerencias:
DOTTED
DASHED
SOLID
GROOVE
Si queréis que la blockquote
sea redonda, agregad esto justo encima de la llave
{
border.radius: 10px;  
-moz-border-radius:10px;  
-webkit-border-radius:10px;
Personalizando las "Divs"
Como comentábamos, las Divs son esos recuadros de diferentes colores y formas que
se agregan directamente en la entrada. Vamos a ver qué se esconde en el código:
<div style="background-color: #000000; border: 2px dashed white; margin: 0px 22px; padding: 20px; text-align: justify;"> TEXTO </div>
Aquí vemos un sencillo ejemplo. No distan mucho de las blockquote, pero estas se agregan
DIRECTAMENTE EN LA ENTRADA no en el código, ¿vale? Para personalizarlas sólo debéis cambiar los colores y los bordes.
Aquí tenéis algunos ejemplos para que veáis que con estos pequeños monstruitos se puede hacer de todo:
EJEMPLO 1
EJEMPLO 2
¡Y ya está! Espero que os haya gustado el tutorial y además, os sirva de ayuda.
¿Tenéis problemas? Ya sabéis, un comentario y listo ;)
