personaliza texto citado de tus entradas

Personaliza texto citado de tus entradas Tutorial Blogger

 Personaliza el texto citado de tus entradas

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:

como-poner-blockquote-texto-citado

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  

  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 */
 Título en el texto citado de tu entrada
/*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 */
 Título en el texto citado de tu entrada
/*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  

personaliza texto citado en blogger
/*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. 🙂

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

17 comentarios

  1. Rebeca

    Me han encantado, porque se salen de las opciones que habitualmente explican otros blogs. Me surge la duda de si se pueden integran dos tipos distintos de cita dentro de la plantilla HTML, designándolos con diferente nombre. Planteo esta pregunta, porque según qué tema se trate en el post, puede convenir más uno u otro. ¿Sería posible?, ¿podrías explicarlo?
    Un saludo.

  2. Rebeca

    Me he decidido por el primero de los estilos que propones y he subido un washitape que tenía descargado desde hace tiempo, con su correspondiente url, pero por más que varío los parámetros de posición en el código, no se visualiza en pantalla cuando doy a la vista previa de la entrada. ¿Cómo puedo solucionarlo? Un saludo.

    • Mónica Lemos

      Rebeca, no sé, a veces en vista previa no se visualizan todas las personalizaciones… a no ser que sea eso no sé… revisa que todo lo hayas hecho bien, y prueba a publicarlo , por si es por la vista previa.
      Un saludo

  3. Mildred Giacalone

    Hola, quisiera saber si este blog es para un nivel mas experto, ya que trato de entender el post y no puedo, ¿donde voy a colocar el código? trate de poner la entrada y subirla por HTML pero me sale es el código mas no la caja. Explicas bien el codigo pero como o donde se coloca porque en la entrada que intento publicar me sale es el codigo. gracias

  4. Betsabé

    Hola Mónica.
    Esta clase se me hizo más difícil.
    Traté de poner la cita con washi-tape, pero la imagen me aparecía inmensa.
    Opté finalmente por dejar el código sin ningún título ni imagen y quedó muy bien.
    Muchísimas gracias.

  5. Rocío

    ¡Hola!

    Con la nueva actualización de Blogger no funciona, le das a “citar texto” y el texto no se modifica. Antes de la actualización sí, de hecho, tengo mis posts anteriores con el texto citado personalizado, pero escribo nuevos posts y no funciona como antes. ¿Alguna ayudilla?

    ¡Muchas gracias!

  6. Mary

    La nueva version de blogger es muy dificil de usar… mover las imagenes es imposible!!! y para citar ya no se puede como antes… si sabes alguna manera para poder hacerlo te lo agradeceria demasiado!!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *