Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

2

Como crear las citas de tu blog con CSS

Muchas veces es necesario personalizar un poco y jugar con el CSS para mejorar el aspecto de nuestro blog, Una de las modificaciones sencillas al código de tu plantilla es personalizar las citas o blockquotes en tu blog. Dependiendo de la temática y del uso frecuente de las citas tu blog se vera mas profesional y personalizado.

Aquí algunos ejemplos interesante que puedes usar o retomar para modificar y darle un toque personalizado a las citas en tu blog.

Citas Clásica: Creas un toque clásico con un fondo de color de papel estilo diario y con una fuente Times New Roman. Debes de buscar o reemplazar la clase .blockquote en el código de tu theme y pegar el siguiente código:

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

La Cita Moderna: Muy diferente al estilo de cita anterior, este código y personalización de la cita es la conocida Cita Moderna que usa un borde izquierdo mas ancho y fondo blanco. Un ejemplo de este tipo de cita se puede ver en este blog el cual lo uso para mostrar los códigos.

Pega el siguiente código:

blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Quieres mas ejemplos de Citas para tu blog? Mira 5 ejemplos mas como crearlos con CSS!

Show Comments

No Responses Yet

Leave a Reply