 Por Pizcos B
el 26-Aug-2008 | "Blockquotes,
fáciles
de usar" En mi afán por mejorar la presentación de nuestras entradas ya os presente como girar las imágenes con Gimp para darle otro aire a las mismas. Hoy quiero hablar de un elemento que en muchos blog de diseño lo usan habitualmente pero que no veo que sea muy usado en el resto de los blogs. Este elemento son blockquote o bloque entre comillas.
Suelen ser esos textos entrecomillados que vemos en algunas entradas con fuentes más grandes y sirven para realzar una frase, una idea, etc.
Foto 0 en Blockquotes: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Foto 1 en Blockquotes: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Aunque se hablen de comillas, hoy en día, se pueden ver sin esas comillas, se sustituyen por una línea lateral, por unos paréntesis, una imagen de fondo, etc...
Vamos a ver como configurarlo y su uso, tal vez la parte que más se desconoce y Blogger nos permite un uso muy fácil de este elemento.
Editando nuestras plantillas HTML, veremos en la parte de nuestro CSS (dependiendo de la plantilla) la definición de una clase
.post blockquote {
margin:1em 20px;
}
Su uso es muy simple, cuando editamos nuestras entradas en redactar, nos encontramos en la barra con este elemento  , si seleccionamos el texto que queremos incluir como blockquote y pulsamos ese elemento veremos que se nos entrecomilla.
Ahora vamos a aprovechar este uso tan fácil para darle estilo, vamos de nuevo a nuestra plantilla HTML y buscamos la clase anterior
.post blockquote {
margin:1em 20px;
}
y lo sustituimos por
.post blockquote {
padding: 30px 20px 20px 50px;
background: url(URL ALOJAMIENTO IMAGEN) no-repeat;
float: right;
margin-left: 5px;
width: 200px;
height: 150px ;
font-style: italic;
font-size: 135%;
color:#999999 !important;
text-align: left;
}
donde
.post blockquote {
padding: 30px 20px 20px 50px; ? Márgenes interiores que deberemos ajustar según tamaño de letra e imagen
background: url(URL ALOJAMIENTO IMAGEN) no-repeat; ? Aquí insertaremos la imagen que vamos a usar. También podríamos especificar un color de fondo en vez de una imagen poniendo el código hexadecimal del color (#Código del color)en vez de (URL ALOJAMIENTO IMAGEN)no-repeat
float: right; ? Si queremos que la blockquotes aparezca a la izquierda o a la derecha
margin-left: 5px; ? Margen izquierdo, es decir como he elegido que la blockquote aparezca a la derecha de la entrada, le doy 5 pixeles de margen con respecto al texto de la misma. Si hemos elegido que aparezca a la izquierda con la propiedad float. left; aquí deberemos indicar el margen con respecto al texto que nos aparecerá a la derecha, margin-right: 5px;
width: 200px; ? Ancho de nuestra imagen
height: 150px ; ? Alto de nuestra imagen
font-style: italic; ? Estilo de la fuente
font-size: 135%; ? Tamaño del texto de la blockquote
color:#999999 !important; ? Color del texto
text-align: left; ? Alinea con del texto, izquierda, derecha, justificado...
}
también podríamos no usar una imagen y solo usar un color de fondo y ponerle un borde a la izquierda o derecha, etc. en definitiva está abierto a muchas posibilidades.
La imagen que yo uso es esta
Foto 3 en Blockquotes: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Y para usarlo como os he explicado más arriba, una vez guardados estos cambios, cada vez que queramos usar blockquotes solo tendremos que escribir el texto en nuestra entrada y pulsar . Solo una dato más, en vista previa no se ve el efecto.
Leído 5 veces
|
Hola, Invitado
En línea: 73 visitantes
+ fotos
