Ya no queda nada para terminar este curso y estas últimas clases también son muy importantes, tengo muchas ganas de saber qué tal te ha ido y qué has personalizado en tu blog con este curso paso a paso.
En esta clase número 13 el tutorial trata sobre personalizar la «blockquote», pero ¿Qué es blockquote? Pues es muy simple; el texto citado en nuestro post. Así de sencillo.
En la redacción de nuestro post encontramos unas comillas, mira , son estas:
Si seleccionas un texto y luego le das a esas comillas lo único que visualizas en tu post (en edición) es que se mueve un poco hacia la derecha, y una vez publicado tendrás el mismo efecto, si no lo has modificado.
He aquí que te traigo varias formas posibles de modificación y personalización para tu blog.
He visto que ha gustado mucho el hecho de poner directamente varios códigos con el efecto de resultado final al lado, porque debe ser que os gusta todo lo más sencillo posible. A mi me pasa lo mismo, igualito, y por eso en esta clase haré lo mismo.
1.- Te expongo las distintas opciones de diseño.
2.- Te explico lo que puedes y/o debes modificar.
3.- Te cuento cómo cambiarlo en tu plantilla.
Personalizar texto citado en tus entradas Blogger
Según la temática de tu blog necesitarás usar unos u otros estilos. Si trabajas recetas, opiniones, ventajas y desventajas de algún producto o experiencia, viajes, moda…Podremos crear un Blockquote que se adapte a nuestro blog de forma muy sencilla.
Imágenes en el texto citado de tu entrada
¿Qué te parece? A mi me ha encantado. Este estilo vale para muchas cosas diferentes y es una forma original de resaltar una parte de nuestro post.
Podremos usarlo como «Recuerda…» o también como «Ingredientes» o cualquier tipo de listado que nos interese resaltar.
Como el estilo del blog de pruebas sobre el que estamos trabajando pega totalmente con este tipo de blockquote es el que he elegido para el blog. El Washi-tape me ha enamorado.
Sabéis que podéis conseguir más washi-tape digitales en la entrada sobre Cómo personalizar títulos de sidebar en conjunto y también que puedes cambiar la tonalidad para que se adapte a tu paleta de colores, en el post Personaliza tu menú de páginas. Ya lo tienes todo para hacer posible una mejora visual importante de tus posts. 😀
Ah¡ falta el código 😉
/*Estilo del texto citado por www.monicalemos.es */ .tr_bq { font-family: 'Neucha', cursive; /* tipo de letra*/ border: 1px dashed #8fb59e; /*grosor, tipo y color del borde, el tipo puedes ponerlo como dotted que son puntos o solid que es una línea normal*/ padding: 20px; /* espacio alrededor*/ font-size:17px ; /*tamaño del texto*/ color: #777 ; /*color del texto*/ letter-spacing: 1px; } .tr_bq:before { /* Estilo de la imagen Washi-tape*/ content:url('URL de la imagen') ; position:absolute; /*no tocar*/ margin-top:-60px; /*margen superior, adáptalo para que quede en el borde superior*/ margin-left: 110px; /*margen izquierdo, adáptalo para que quede en el borde superior*/ } /* Fin del texto citado */
Cambia aquello que consideres y por supuesto, el color por el de tu paleta de colores y la URL de la imagen, si no sabes cómo conseguir tu Url de imagen, mira este vídeo.
Título en el texto citado de tu entrada
/*Estilo del texto citado por www.monicalemos.es */ .tr_bq { font-family: 'Neucha', cursive; /* tipo de letra*/ border: 1px solid #8fb59e; /*grosor, tipo y color del borde, el tipo puedes ponerlo como dotted que son puntos o dashed que es una línea discontínua*/ padding: 20px; /* espacio alrededor*/ font-size:17px ; /* tamaño del texto*/ color: #777 ; /*color del texto*/ letter-spacing: 1px; /*espacio entre carácteres*/ } .tr_bq:before { content:'2500' ' I N G R E D I E N T E S ' '2500' ; /*título del cuadro*/ position:absolute; margin-top:-43px; /*margen superior, adáptalo para que quede en el borde superior*/ margin-left: 120px; /*margen izquierdo, adáptalo para que quede en el borde superior*/ } /* Fin del texto citado */
/*Estilo del texto citado por www.monicalemos.es */ .tr_bq { font-family: 'Courier', cursive; border: 2px dotted #8fb59e; /*grosor, tipo y color del borde, el tipo puedes ponerlo como dashed que son líneas discontínuas o solid que es una línea normal*/ padding: 20px; font-size:17px ; color: #777 ; letter-spacing: 1px; } .tr_bq:before { content: ' L I S T A D O ' '25BC' ; color: #8fb59e; padding:10px; position:absolute; margin-top:-60px; /*margen superior, adáptalo para que quede en el borde superior*/ margin-left: 0px; /*margen izquierdo, adáptalo para que quede en el borde superior*/ } /* Fin del texto citado */
/*Estilo del texto citado por www.monicalemos.es */ .tr_bq { font-family: 'Courier', cursive; /* tipo de letra */ border: 2px dotted #8fb59e; /*grosor, tipo y color del borde, el tipo puedes ponerlo como dashed que son líneas discontínuas o solid que es una línea normal*/ padding: 20px; /* espacio alrededor*/ font-size:17px ; /* tamaño del texto*/ color: #777 ; /* color del texto*/ letter-spacing: 1px; /* espacio entre caracteres */ } .tr_bq:before { content: ' R E C E T A ' '25BC' ; color: #8fb59e; /* color del texto y la flecha*/ padding:10px; /* espacio alrededor */ position:absolute; margin-top:-60px; /*margen superior, adáptalo para que quede en el borde superior*/ margin-left: 0px; /*margen izquierdo, adáptalo para que quede en el borde superior*/ } /* Fin del texto citado */
Cambia aquello que consideres y por supuesto, el color por el de tu paleta de colores. Si quieres poner cualquier otra cosa en vez de «Receta» u otras cosas que he elegido, puedes modificar lo que hay aquí:
content: ‘ R E C E T A ‘ ’25BC’ ;
Lo que está en morado es lo que aparece en el título. Las comillas antes y después son importantes, así que no os las comáis 😉
La flechita que le sigue o las líneas de antes o después son códigos unicode, y os dejo aquí un listado de códigos e iconos posibles para estos casos.
Códigos para personalizar el texto citado de tus entradas
2013 –
2014 —
2026 •
BB »
AB «
2DC ˜
2261 ≡
2248 ≈
2580 ▀
2588 █
Si quieres más los tienes aquí
Otro tipo de letra en el texto citado de tu entrada
Con este código lo único que haríamos sería cambiar el espacio de alrededor y el tipo de letra, el espacio entre sus letras, el color, tamaño… Que ya son cambios importantes.
/*Estilo del texto citado por www.monicalemos.es */ .tr_bq { font-family: 'Courier', cursive; /* tipo de letra */ padding: 20px; /* espacio alrededor*/ font-size:17px ; /* tamaño del texto*/ color: #777 ; /* color del texto*/ letter-spacing: 1px; /* espacio entre caracteres */ } /* Fin estilo texto citado*/
Para poder elegir entre un montonazo de tipos de letras te aconsejo que veas este post donde te cuento cómo, o veas este vídeo.
Fondo de color en el texto citado de tu entrada
/*Estilo del texto citado por www.moncialemos.es */ .tr_bq { font-family: 'Arial'; /* tipo de letra*/ background: #8fb59e; /*color de fondo*/ padding: 20px; /*espacio alrededor*/ font-size:12px ; /* tamaño del texto*/ color: #fff ; /*color del texto*/ letter-spacing: 1px; /* espacio entre carácteres*/ line-height: 2em; /* espacio entre líneas de texto, frases*/ } /* Fin estilo texto citado*/
Personaliza tu texto citado – tutorial para modificar plantilla
1.- Vamos a Plantilla
2.- Copia de Seguridad
3.- Editar HTML
4.- Buscamos este código:
</b:skin>
5.- Pegamos el código que temos personalizado justo antes de
]]></b:skin>
7.-Guardamos Y ya lo tendremos listo! 🙂
Vídeo tutorial personaliza texto citado en Blogger
Hasta aquí la clase de hoy, espero que te haya gustado y que le saques provecho. Sabes que puedes combinar estilos, quiero decir que puedes cambiar los recuadros, las imágenes, los márgenes, los tipos de letra… un montón de cosas que te ayudarán a crear una visual atractiva para tus textos citados en tus entradas.
Esto es magia people y ¡¡Está en tus manos!!¿Qué te ha parecido? Fácil, difícil, mas o menos… Cuéntamelo en comentarios.
Si compartes el post ya es la leche, porque me estás ayudando un montón para que siga creando más contenido útil para ti y para gente que le interese. 🙂