La mayoría de los Blogger saben que es el "Blockquote", pero para aquellos que aún lo desconocen les explico que se utiliza para enmarcar frases, textos o simplemente un código.
La forma de usarlo es encerrando el texto entre
<blockquote> y
</blockquote> o usando el ícono de entrecomillado que se encuentra en el editor de entradas
Para personalizar estos bloques entrecomillados entra en Diseño > Edición de HTML y busca esto:
blockquote {
..............
..............
..............
}
Y
sustitúyelo por cualquiera de los códigos de abajo:
Estos son 2 para blog Sevillistas
Código:
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #f4f4f4 url(https://lh5.googleusercontent.com/-jJPTamVx9VE/UUC0NK_GLOI/AAAAAAAAK4M/rw_wJFKy3Pw/s48/escudo-Sevilla-CF.gif) no-repeat 5px 5px;
font: normal 1.1em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #b10202;
}
blockquote p {
margin: 0;
padding-top:10px;
}
Código:
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://lh5.googleusercontent.com/-WfhvmyvO3BA/UUC3vGqCmZI/AAAAAAAAK4U/ceqRjAjaohQ/s503/SEVILLA.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote con el clásico borde izquierdo
Código:
.post blockquote {
background: #F3F3F1 url(https://lh3.googleusercontent.com/-b33f-nstMCc/UUB2magUDUI/AAAAAAAAK3I/NvWThAuYUPI/s766/blockquote-borde.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;
}
Con borde verde y fondo gris oscuro
Código:
blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1O2iYkCdjLIxXsA421eLCoF18cyE2FjFigy3m0UBJ288st8lMXzSNUzxYanmHGVjsg3HVJs4Hiq7GJK85k8wOcoululQrmU9oq6OgM9EudPgNLbrySfEYPFQt8ClVpIiXZBShVc2l4b8/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Tipo cuaderno
Código:
.post blockquote{
width:450px;
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);
}
Veamos como personalizarlos:
.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Enlace a la imagen) 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;
}
- padding: Se refiere a la distancia entre el texto y el border del blockquote. ¿Qué pasa en este orden -> Parte superior Parte inferior Derecha Izquierda
- background: - Esto incluye el color de fondo e 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 de texto en negrita en esta parte-> url (Enlace a la imagen )
- font: - Incluye el estilo de la fuente, tamaño y tipo, respectivamente. Haga coincidir los colores con el código de arriba.
- color: - Esto se refiere al color del texto. Puede utilizar un color de fuente diferente utilizando nuestra tabla de colores
- border: - Esto se refiere a ancho del borde, estilo y color respectivamente.
. :: Eso es todo - Si alguna pregunta / sugerencia, por favor deje un comentario
Publicaciones Relacionadas
trucos blog
