Que es un bloque de cita o
cita en bloque es un extracto en un documento escrito, para resaltar un texto como uno distinto. Todos hemos citado grandes autores
pero presentamos dichas palabras de una forma extraordinaria usando un bloque de cita maravillosa. Hemos creado
codigos CSS de varios bloques de cita, que son asombrosos y se ven bien.Estos
bloques de cita te daran una idea como crear tu propio bloque de cita personalizado para tu blog o pagina web.
Echemoles un vistazo a un grupo de ellos.
Bloque de cita Con bordes izquierdo Clasico
Codigo Bloque De Cita:
Bloque de Cita Con Coma Invertidas
Codigo de Bloque de Cita Comas Invertida:
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituLEtCir_XtutTtCXLf_yAx7QP3HsUXlIFY8EkBYo0jMINQiW9yiQfoLyDulUGn_GQp_SDr1oI1TybWdwjt2zsnGk63LXpGEwIjLLe9w7T9-M3ZvvtqGNOKIC-hLrW2jP7f4QognGzvc/s400/comma-left.gif)
no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGLu2LadALIya8A8uCAVn4C7Wg21Rt_XZPR5nxxeu3-jSLStWMvrSr8HNiwWJoMoTkyFQk9yPiwUcwamjVFM7gLeixXwYa0HzM33hyQC1XZPmUdRQji2X5sbMQmj9Lm8k5FnCWOt6KRI/s400/comma-right.gif)
no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Bloque Cita De Hombre Mono:
Codigo Bloque De Cita
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background
: #E6F1FA
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7C0hbOzTaJTyy8QsF8J6H0KzvwQG1EELmQWtIKsFLyT77mW0sPqulvx7pQ0ClEwHSqMq-QxGX87QIjLqvVsE7IzV0YYFMljQ8FjHxyh9nwYrGj_KaaqghM-0P8EmToH7fhMdTpjKRvU/s400/head2.gif)
no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background
: #E6F1FA
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFC21bvcU8wyWbnKebG9GCDBUIN7G1gb1Jtnq3ak3S87mjN63oiuEhMkCVAy4mTVEYqXpHmaXXX5onlfZIR_Y98wYQS2iur5bP61TNzhEzF3g-YXc91sgLrmpTECcJ-KyfiqXBDWCBafk/s400/head-bottom3.gif)
no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
Implementacion:
Ahora para añadir uno de estos to your blogs, do the following,
- Entra en Blogger > Diseno > Editar HTML
- Haga Copia de Plantilla
- Busca por siguiente codigo .post blockquote y borralo junto demas ocurrencas van tras este. En Mayoria de las plantillas el codigo luce asi,
.post-body blockquote { line-height:1.3em; }
O
.post blockquote{ bla bla bla}
- Si no encontraste el codigo anterior no te asustes..
- Busca el siguiente codigo ]]></b:skin> y arriba de este ]]></b:skin> , pega el codigo de tu bloque de cita favorito. Como por ejemplo;
.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Pegue Enlace Imagen Aqui) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Personalización: -
Áreas importantes para la personalización están en negrita.
padding: Se refiere a la distancia del texto de los bordes del blockquote. Qué ocurre en este orden -> Superior Derecha a Inferior Izquierdo
background: - Esto incluye el color de fondo del Blockquote y la imagen utilizada en el mismo. El valor de seis dígitos es el color de fondo y el enlace de la imagen se inserta en lugar del texto en negrita en esta parte-> url (Pegar Imagen Enlace aquí)
font : - Incluye el estilo de fuente, tamaño y tipo, respectivamente. Haga coincidir los colores con el código de arriba para referencia.
color: - Esto se refiere al color del texto. Usted puede utilizar un color de fuente diferente utilizando nuestra tabla de colores
border: - Esto se refiere a ancho del borde, estilo y color respectivamente.
Todas las demás blockquotes se pueden personalizar de manera similar.
5. Después de personalizar finalmente guarda la plantilla y obtener una vista previa para ver el nuevo cambio interesante.
Nota: - Para los Blockquotes con comillas, estilo canopy y el Hombre Mono,se requiere una codificación mas . Lea a continuación
Guía: - Para blockquotes antes mencionados necesita añadir algunas etiquetas adicionales dentro editor de blogger, como se explica más adelante,
Ahora, cada vez que usted ha escrito un Presupuesto dentro del modo de redacción de Blogger Editor simplemente cambie al modo HTML y añada dos etiquetas es decir <div> y </ div> entre las etiquetas blockquote como se demuestra más adelante,
ejemplo:
<blockquote><div>Tu Cita Va Aqui</div></blockquote>
Por ejemplo para el Mono Blockquote pegue el siguiente patron.
<style>
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background
: #F1F8FE
url(file:///c:/Documents%20and%20Settings/mustafa.MYBLOGGERTRICKS/Desktop/blockquote/owl-icon-48.png)
no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}
</style>
<blockquote>Write Anything Here As a Text</blockquote>
Listo eso es todo.
Read More
