Cómo utilizar un bloque entrecomillado (blockquote) en Blogger

|

Blockquote.- Define una cita. Es comúnmente usado para definir citas largas como párrafos. <blockquote> </blockquote>

En algunos blogs/sitios web encontramos citas o frases con una imagen de unas dobles comillas de apertura, el cual nos puede servir para citar algo que dijo alguna actriz, cantante, entre otras cosas.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

blockquote {
background: url(http://aquí-la-direccion-de-la-imagen) no-repeat 0 3px;
color: #666;
padding-left: 25px;
font-size : 15pt;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:5px;
}

Explicación
- En url, se debe poner el enlace a la imagen con las dobles comillas.
- En padding-left, sirve para mover el texto entre le borde izquierdo.
- En font-size, podemos modificar el tamaño de la fuente mostrada.
- En font-style, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).
- En padding-top, sirve para desplazar el texto hacia abajo.

2. Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:
Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.

Clic en la imagen para agrandarla
 
Nota: Te voy a proporcionar algunas comillas que he subido a Photobucket para que lo utilices en tu blog.

Photo Sharing and Video Hosting at Photobucket
http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif

Photo Sharing and Video Hosting at Photobucket
http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif

Photo Sharing and Video Hosting at Photobucket
http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif

0 comentarios:

Publicar un comentario