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