Ejemplos De Blockquotes Personalisados

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:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuenn2QoGKdqIYJh-lUDCo1lMZmvt2BbeEf4TZEDEhlmsQmzlx73VRdTwbWK4W7PEoJ69h-CUW55eQUEtSv_Dos7rFVHTYo_Hn0dxqwvqzgA9RG3yMFwTdmuvJwfjBya0X3cUsSR5UXXQ/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

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 y Personalizacion:-

Implementacion:
Ahora para añadir uno de estos to your blogs, do the following,

1. Entra en Blogger > Diseno > Editar HTML
2. Haga Copia de Plantilla
3. 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}

1. Si no encontraste el codigo anterior no te asustes..
2. 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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati