13 marzo 2013

Como dar estilo al blockquote de Blogger

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 comillas

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
blockquote con borde

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(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/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
blockquote 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




4 comentarios

Recién me inicié en esto de los Blogs personales. Debo agradecerte pues gracias a ti he podido resolver muchas dudas y he implementado alguno que otro artilugio. Generalmente comienzo "googleando" como la mayoría, pero siempre termino aquí.

Muchas gracias por tus aportes. Un Saludo!! :)

son muy buenos tus aporte para uni que resien esta comensando en esto de los blog. Una pregunta aveces mi texto html que publico es muy largo como hago para poner una barrra a su costado de este "Blockquote" gracias por tu respuesta.

Kevyn añadale al .post blockquote esto dentro del css: overflow-x:hidden; overflow-y:scroll;height:200px;

Amigo Antonio, Muchas gracias por la entrada, yo sabía que tu tendrías está entrada de blockquote.

Tu web es la mejor y tu eres el mejor.

Muchos saludos y un abrazo fuerte.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"