El Blockquote o bloque con cita (Traducido), es uno de los elementos más usados en los blogs. Por ejemplo:
Para más códigos y demás cosas visiten Gema Blog de aquí fue que yo hice esta entrada, es decir, basándome en ella.
Un blog que trate sobre artistas o modelos, el artista o modelo dice algo, y esto lo resaltamos, ¿pero cómo?.
¡Aquí está la respuesta!. Si te has dado cuenta, cuando pones el blockquote o cita donde están las comillas cuando vas a poner una entrada, le das un clic y escribes. Pero... ¿qué pasa?, Cuando publicas la entrada, lo que aparece es un texto en cursiva separado con una separación de varios espacios.
Y ya. Lo que vamos hacer es personalizarlo.
De la siguiente manera:
- Nos vamos a diseño
- Pinchamos donde dice edición html
- Hacemos el conjunto de teclas: Ctrl + F
- Y buscamos el siguiente código:
.post blockquote { font: italic 13px georgia; margin: 1em 20px; }
Esto, si no le hemos cambiado nada. Es decir, así es que aparece por defecto. Y lo podemos cambiar por este:
.post blockquote {
color:#fff;
width:350px;
margin-top: 10px;
font-size:100%;
padding-left: 18px;
padding-right: 18px;
padding-top: 18px;
padding-bottom: 18px;
background-image:url(url-imagen-fondo);
font: normal helvetica, sans-serif;
}Y puede quedar como la imagen siguiente. Es la que yo uso.
También hay otras, que tienen unas comillas cuando comienzan. Este es el código de ellas:
He aquí dos imágenes:
.post blockquote {
color: #0f5718;
font-size: 90%;
display: block;
margin-right: 20px;
line-height: 140%;
margin-left: 20px;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 70px;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
}
He aquí dos imágenes:
Para más códigos y demás cosas visiten Gema Blog de aquí fue que yo hice esta entrada, es decir, basándome en ella.
0 comentarios: