lunes, 21 de marzo de 2011

Estilos para texto citado en Blogger

Un texto citado o blockquote corresponde a secciones de texto en las cual se resalta contenido. En el caso de mi blog, lo utilizo para enmarcar códigos.
En esta oportunidad les enseñaré a modificar el estilo de este texto citado.

Esto es un Blockquote:
Ejemplo texto citado.
 Dependiendo del estilo que tengamos establecido, es como se verán los blocquotes.

¿Cómo cambiar el estilo del texto citado en Blogger?

Primero vamos a ''Diseño/Edición HTML'' y buscaremos el siguiente código:
.post blockquote {
Elimarás este código hasta el cierre del estilo ''}''  y en su lugar utilizarás el del estilo deseado.


Tipos de estilo:


Estilo 1: Líneas laterales dobles:




Código:
.post blockquote{
margin:1em 20px;
border-left:4px double #704B0F;
border-right:4px double #704B0F;
padding-left:10px;
font-size:100%;
color:#333;
font:Arial Georgia Serif;
}

Estilo 2: Borde izquierdo y cuadrícula:
Código:
.post blockquote{
width:350px;
font:14px/22px normal helvetica,sans-serif;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#ffffff url(http://bp1.blogger.com/_sbaQpFxeL1Q/R8yT9e_CdPI/AAAAAAAAAFw/4E0nxy2orrs/s400/code-bg.gif);
}

  • Este blocquote tiene un límite de 350px, por lo que el texto demasiado largo se mostrará con una barra de desplazamiento.


Estilo 3: Entre comillas:
 Código:
.post blockquote {
background: url(http://www.benlawries.co.uk/images/blockquotes_top.gif) left top no-repeat;
padding: 19px 22px 10px;
text-align: left;
color:#1a0603;
border:1px solid #9e8e91;
margin:15px 15px;
}


Estilo 4: Entre líneas horizontales:

Código:
.post blockquote {
float:left;
color:#777;
width:200px;
padding:6px;
margin-right:10px;
position:relative;
font-size:15px;
text-align:left;
font-style: italic;
border-top:4px solid #dadada;
border-bottom:4px solid #dadada;
}


Estilo 5: Fondo negro y margen rojo:
Código:
.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #fff;
   background: #000;
   border-left: 4px solid #BA0033;
   border-bottom: 3px solid #BA0033;
}

Se pueden conseguir estilos bastante buenos sólo con modificar un poco el CSS. Si quieres añadir tus atributos propios basta con crear la síntaxis de la siguiente forma:
.post blockquote {
/*Acá van los atributos*/
}

No hay comentarios:

Publicar un comentario