Texto Citado Personalizado | Tutorial Blogger

Feliz Viernes

Esta vez vengo con un tutorial para personalizar un poco más nuestras entradas, se trata de personalizar nuestro blockquote o texto citado, este nos sirve para resaltar en un recuadro alguna frase, párrafo o texto. 

Les mencioné que tenía planeado traer nuevos tutoriales y pues estoy cumpliendo con mi palabra, no sé mucho de los códigos html pero de lo poco que he investigado y aplicado para mis plantillas puedo dar pequeños tips/trucos para cambiar algunos detalles de nuestro blog, así podemos darle otro aspecto a nuestras entradas y tengo planeado subir un tutorial cada mes enfocado en este aspecto. 

Ojala les guste la entrada y lo más importante es que les sea de utilidad. 

Nota: Antes de empezar a toquetear nuestra plantilla recomiendo que se haga una copia de seguridad por si ocurre algún inconveniente. 

Este es uno de los tantos estilos que le podemos dar a nuestro blockquote o texto citado, las posibilidades son infinitas porque puedes cambiar el estilo de los bordes, el tamaño y color de la letra, el color de los bordes y el fondo, el estilo del recuadro y hasta agregar una imagen de fondo. Para aplicarlo es muy sencillo, primero debemos ir a  Plantilla ➦ Editar HTML, te saldrá un cuadro con todos los códigos de tu plantilla, debes dar click dentro y luego Ctrl + F para que te aparezca el cuadro de búsqueda [tal como te enseño en la imagen]

En ese recuadro debemos copiar blockquote y dar enter, esto con el fin de saber si ya tenemos un blockquote dentro de nuestra plantilla y poder personalizarlo. Si te aparece solo debes reemplazar ese código por el que te voy a dar pero si no te aparece no te preocupes, en el cuadro de búsqueda copias ]]></b:skin> y dar enter, cuando te aparezca debes copiar el código que te voy a dar antes de eso [antes de ]]></b:skin> ].  

blockquote {

background: #FCA3B8;/*Color Fondo*/

border: 2px solid #F53864; /*Border Completo*/

border-left: 7px solid #FF033E; /*Border Izquierdo*/

border-right: 7px solid #FF033E; /*Border Derecho*/

padding: 8px;

font-size: 14px;/*Tamaño Letra*/

color: #000;/*Color letra*/

text-align: center /*Posición Texto*/

}

Background➙ Indica el fondo de nuestro recuadro, puede ser de un solo color que puedes buscar aquí y solo debes cambiar el código #FCA3B8 por el del color que deseas. También puede ser una imagen para ello debes reemplazar lo que está ahí por background: url(aquí va el url de la imagen).

Border➙ Cuando se pone border quiere decir encerrar todo el recuadro con una línea que le puedes cambiar tanto el estilo [solid] el tamaño [2px] y el color [#F53864]. Aunque también se puede poner una línea solo en parte superior [border-top], en la parte inferior [border-bottom], en la parte izquierda [border-left] o derecha [border-right]. Igualmente jugar con los tamaños, estilos y colores, depende de gustos.

Estilos de Borde

Se puede redondear las esquinas de los bordes para ello solo debemos agregar antes de } Border-radius: 10%; 

Ese porcentaje se cambia [20%, 45%, 70% ....] según que tanto se quiere que quede redondo o algo más sutil. 

También podemos darle un estilo a nuestro blockquote o texto citado diferente cuando se pasa el mouse por encima. Para ello debemos agregar un código debajo del anterior. 

blockquote:hover {

background: #7F98A0; /*Color Fondo*/

padding: 8px;

border: 2px dotted #43C7F2; /*Borde Completo*/

font-size: 14px;/*Tamaño Letra*/

color: #000;/*Color letra*/

text-align: center /*Posición Texto*/

border-radius: 25%  /*Redondear Recuadro*/
}

Cuando tengas el código ya personalizado a tu gusto, se da click en Guardar Plantilla y listo.

Para aplicar el texto citado es muy sencillo, cuando estas escribiendo tu entrada solo debes seleccionar la frase, párrafo o texto que quieres resaltar y dar click en las comillas [tal como indico en la imagen] y listo.

Dejo de muestra mi propio blockquote para que vean el efecto al pasar el mouse y todo el estilo que tiene.

Tú puedes hacer lo que te propongas. Eres fuerte y capaz. No eres frágil ni quebradizo. Al postergar para un momento futuro lo que quisieras hacer ahora, te entregas al escapismo, a la autoduda, y lo que es peor aún al autoengaño

Cualquier duda o pregunta con gusto la responderé en los comentarios 💕