Personalizar el blockquote

Comparteme :

Para crearlas simplemente tendremos que hacer click en las de las opciones del editor de texto o agregar el texto entre <blockquote> y </blockquote>.

Para personalizarlas, tenemos que ir a Plantilla, Personalizar, Avanzado y Añadir CSS. En la casilla de texto de arriba de todo tendremos que pegar este código:

blockquote {
font-style: italic;
font-family: Georgia;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
margin: 20px 35px 0 35px;
padding: 10px 20px 0;
background:#fafafa;
}

Haciendo uso de estos estilos, el bloque entrecomillado se verá así:

Si queremos colores vivos y un diseño más atractivo, podemos usar este código:

blockquote {
font-family: Arial;
font-style: italic;
border-radius:8px;
webkit-border-radius:8px;
margin: 20px 35px 0 35px;
padding: 10px 20px 0;
background:#0174DF;
color:#fff;
box-shadow: 2px 2px 2px #2E2E2E;
}

El resultado es este:

Y para terminar les dejare el estilo que usamos en BLOGUERO TUTORIAL

.post blockquote{margin:.50em 0;padding:5px}
.post blockquote p{margin:.75em 0;text-align:left!impotant}
.post-body blockquote{clear:both;background:#111;border-left:7px solid #0098ff;box-shadow:0 0 2px #00ff4e;text-align:left!important}
.post-body blockquote.skyblue{background:#87CEEB;border-left:7px solid #00FF7F;color:#000;box-shadow:0 0 2px #00FF7e}
.post-body blockquote.green{background:#00FF7F;border-left:7px solid #f55865;color:#000}
.post-body blockquote.gold{background:#FFD700;border-left:7px solid #111;color:#000;box-shadow:0 0 2px #121212}
.post-body blockquote.lightred{background:#f55865;border-left:7px solid #111;color:#fff;box-shadow:0 0 2px #121212}
.post-body blockquote.lightblue{background:#1E90FF;border-left:7px solid #f55865;color:#fff}

El resultado sería el siguiente:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Es cuestión de ir probando pequeñas modificaciones, empezando por el tipo de letra y su estilo, el borde del blockquote o el fondo, hasta que quede a gusto de cada uno.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Personalizar el blockquote.

Comparte