30 sept 2015

Cómo personalizar el "blockquote" en Blogger

Para personalizar el blockquote en Blogger, primero hay que saber reconocer las características básicas del CSS que podemos usar para personalizar el blockquote a nuestro gusto, algunas de estas características son:

Color del fondo:
background-color: #ffffff; (valor-hexadecimal)

Imagen del fondo:
background-image: url ("URL-de-la-imagen"); (Sin imagen de fondo: background-image: none;)

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

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

Relleno (padding) El padding es el espacio entre el texto y el borde de contenedor, en pixeles:
padding: 10px; (También puede ser: padding-top, padding-left, padding-right, padding-bottom)

Margen (margin): El espacio afuera del contenedor, en pixeles:
margin: 10px; (También pueden remplazar por margin-top, margin-left, margin-right; margin-bottom)

Color del borde:
border-color: #ffffff; (valor-hexadecimal)

Estilo del borde:
border-style: solid; (Puede ser: dashed (guiones), dotted (punteada) o solid (sólida).

Ancho del borde:
border-width: 3px;

Esquinas redondeadas:
border-radius: 10px;

Tipografía:
font-family: "Arial", Helvetica, sans-serif; ("nombre-de-la-fuente", fuente-alternativa, etc); 

Tamaño de la tipografía:
font-size: 16px;

Color de la tipografía:
color: #ffffff; (valor-hexadecimal)

Ahora usando las características que deseen pueden personalizar el blockquote. Por ejemplo así:

blockquote {
background-color: #c1bbb3;
padding: 10px;
margin: 10px;
border-color: #3c3c3b;
border-style: solid;
border-width: 1px;
border-radius: 10px;
font-family: 'Courier', Helvetica, sans-serif;
font-size: 16px;
color: #ffffff;
}

Para añadir el código personalizado a sus plantillas:

Ir a: Plantilla | Editar HTML

Buscar la etiqueta ]]></b:skin>  y añadir el código personalizado ANTES del ]]></b:skin> . Así:

blockquote {
background-color: #c1bbb3;
padding: 10px;
margin: 10px;
border-color: #3c3c3b;
border-style: solid;
border-width: 1px;
border-radius: 10px;
font-family: 'Courier', Helvetica, sans-serif;
font-size: 16px;
color: #ffffff;
}
]]></b:skin>

Le dan Guardar plantilla y

¡Listo!

Utilizando el código del ejemplo, cuando utilicen la etiqueta "blockquote"  se vería así:











Importante:

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: #c1bbb3 !important;
padding: 10px !important;
margin: 10px !important;
border-color: #3c3c3b !important;
border-style: solid !important;
border-width: 1px !important;
border-radius: 10px !important;
font-family: 'Courier', Helvetica, sans-serif !important;
font-size: 16px !important;
color: #ffffff !important;
}
Share: