Estilos de blockquote o texto citado

El blockquote o texto citado se usa para resaltar partes de texto sea frase o código que sean de importancia.
La forma de usarlo es encerrando el texto que quieres citar entre <blockquote> y </blockquote> o usando el icono que se encuentra en el editor de entradas.

Para personalizarlo nos vamos a Plantilla, Editar HTML y buscamos:

blockquote {
..............
..............
..............
}

solo tienes que eliminarlo y sustituir por cualquiera de los códigos

• 1º Blockquote

/*blockquote
---------------*/
blockquote {
-webkit-transition: all 0.2s linear;
background: #F7F7F7;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ACACAC;
clear: both; color: #666666;
font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 10px 30px;
overflow: auto;
padding: 4px 10px;
transition: all 0.2s linear;
width: auto;
}

• 2º Blockquote

/*blockquote
---------------*/
blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaSi2C6BMD_kSBhVPBb16N7LiO1r1yrERi16937jQTxauRJ4V1C7NqqXYilq8hbp8VX5d_iNX0prcuegwn_QQ7agjxqt-4RhVJQGVymmyUfQP5yfMLBWhJBFgR1sgIqVzs5uHAHyOj8Yc/h120/quote.png)
no-repeat;
margin: 20px;
color: #666;
border-bottom: 1px solid #e8e8e8;
background-color: #f9f9f9;
padding: 20px 0px 9px 30px;
color: #000;
margin-left: 10px;
margin-top: -9px;
width: 520px;
-webkit-border-radius: 6px; border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-style: italic;
line-height: 30px;
padding-right: 20px;
}

• 3º Blockquote

/*blockquote
---------------*/
blockquote{
background-color:#F5F5F5;
border-color:#CCC;
border-style:dashed dashed dashed solid;
border-width:1px 1px 1px 5px;
color:#666;
padding:10px
}

• 4º Blockquote
  

/*blockquote
---------------*/
blockquote {
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-box-shadow: inset 0px 0px 7px #222;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-webkit-box-shadow: inset 0px 0px 7px #222;
background-color: transparent;
border: 2px dashed #797979;
box-shadow: inset 0px 0px 7px #222;
color: black;
font: normal 11px/16px Verdana,Arial,Sans-Serif;
height: 150px;
margin: 0px 30px 15px;
padding: 28px 28px;
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
}

• 5º Blockquote

/*blockquote
---------------*/
blockquote {
background-color: white;
font-family: Lato, Helvetica, Arial;
font-size: 17px;
line-height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6I6P5FTmWOE3rGDfDF8jQHUIBGUVQVX9Ifu0IpbLkbCFVL793X5yF5BVsH11FaUK1xR-_bqTOjOCQFrYlAN5DiLqt7xQCcgzDar26qzgk1-OjvyzU7NAJBMWYjIORRaenFreIPZZsAphK/h30/quotel+ined.png) 0px 0px repeat-y scroll rgb(255, 255, 255);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid rgb(220, 220, 220);
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px;
color: #333333;
padding: 15px 0px 15px 42px;
white-space: pre-wrap;
width: 400px;
word-spacing: 5px;
word-wrap: break-word;
}

Para añadir el blockquote sin entrar en el HTML


Ir a Diseñador de plantillas ► 1 Avanzado ► 2 Añadir CSS ►3 pega el código HTMLque elijas luego►4 Aplicar al blog.

Si sus plantillas ya tienen el blockquote personalizado, entonces cuando agreguen el código que han personalizado pueda que sobrescriban los códigos. Para que su personalización tome prioridad, añadan !important al final de cada código. Ejemplo:

blockquote {
 background-color: #F2706B !important;
 padding: 10px !important;
 margin: 10px !important;
 border-color: #FCF3F2!important;
 border-style: dashed !important;
 border-width: 1px !important;
 -webkit-border-radius: 10px !important;
 -moz-border-radius: 10px !important;
 border-radius: 10px !important;
 font-family: 'Open Sans Condensed', sans-serif !important;
 font-size: 14px !important;
 color: #000!important;
 }

Sintaxis en CSS

background-color: #valor-hexadecimal; Color del fondo Los seis números que representan un color.

background-image: url(‘enlace’); La imagen del fondo

background-position: left top; background-position: left center; background-position: left bottom; Posición del fondo Pueden usar una de las posiciones, siempre y cuando estén usando una imagen de fondo.

background: repeat; Repetición del fondo Pueden remplazarlo con repeat-x, repeat-y y no-repeat.

padding: 10px; Relleno El espacio entre el texto y el borde de contenedor. Pueden cambiar el valor de 10 por el que ustedes gusten. También pueden remplazar padding por padding-top, padding-left, padding-right; y padding-bottom;.

margin: 10px; Margen El espacio afuera del contenedor. Pueden cambiar el valor de 10 por el que ustedes gusten. También pueden remplazar margin-top, margin-left, margin-right; y margin-bottom;.

border-color: #valor-hexadecimal; Color del borde Seis números que representan el color.

border-style: dashed; Estilo del borde Pueden remplazar dashed (guiones) con dotted (punteada) o solid (sólida).

border-width: 3px; Ancho del borde Remplacen el 3px con el valor que gusten.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; Esquinas redondeadas Remplacen el valor de 10 por el que ustedes gusten.

font-family: ‘nombre-de-la-fuente’, ‘fuente-alternativa'; Tipografía Por ejemplo: Arial, Helvetica, sans-serif;

font-size: 16px; Tamaño de la tipografía Remplacen el valor 16 por el tamaño que ustedes deseen.

color: #valor-hexadecimal; Color de la tipografía Los seis números que representan el color.