21 de diciembre de 2016

Tutorial: Personalizar la blockquote (Citas) de Blogger

   Es hora de que continuemos con los tutoriales para que el 2017 tu blog tenga un nuevo aspecto. Hace tiempo una chica me comento que si podía realizar un tutorial en donde le explicara como hacer que los bloques en donde colocaba la sinopsis de los libros tuvieran ese aspecto tan lindo. Bueno luego de tanto tiempo al fin le traigo la respuesta. 

¿Cómo agregar blockquote?


   Eso simplemente lo haces agregando la etiqueta blockquote al texto que desees tenga ese aspecto. Lo pueden hacer directamente desde la barra de herramientas de Blogger, solo seleccionen el texto que deseen salga "entrecomillado" y den click a la comilla (") de la barra de herramientas.

    Al dar click a la comilla, notaran que el texto seleccionado tiene un margen diferente al texto normal del post.

   También pueden agregar la blockquote directamente desde el código HTML del post, solo agreguen al comienzo del texto a citar <blockquote> y </blockquote> al final del texto.

¿Cómo personalizarla?

Ahora toca la parte divertida. Darle los etilos a la etiqueta para que tenga un aspecto muy bueno, como por ejemplo:
Aspecto del Blockquote de un blog de pruebas

  • Para hacer esto dirígete a: PlantillaPersonalizarAvanzado  → Añadir CSS

Una vez que estés ahí, agrega la etiqueta blockquote y los estilos que quieras:
blockquote {
ESTILOS
}
Ejemplo: Si utilizamos:
blockquote {
 background-color: #ffdfc7;
 padding: 10px;
 margin: 10px;
 border: 2px dashed #2198a6;
 font-size: 15px;
 color: #000;
 }
Obtendremos algo así:

Entendiendo el código:

  • background-color: color de fondo.
  • padding: Margen interior.
  • margin: Margen  exterior
  • border: Tamaño, estilo y color del borde.
  • font-size: Tamaño del texto.
  • color: Color del texto.
Más estilos → Si quieres una personalización más completa, puedes:
  1. Redondear los bordes: border-radius: 10px 10px 10px 10px;
  2. Utilizar una fuente especialTutorial: Añadir y utilizar fuentes de Google Front en tu blog| Ejemplo: font-family: 'Shadows Into Light Two', cursive;
  3. Sombra al texto: text-shadow: 1px 1px #ccc;
  4. Bordes diferentes: border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc;
  5. Imagen: Si quieres que el fondo de la blockquote no sea un color solido puedes utilizar una imagen: background-image: url(‘URL de la imagen’);
Bordes más utilizados

Con estos nuevos estilos puedes obtener algo así:
El cual es el resultado de:
blockquote{
background:#fff;
padding:10px;
color:#000;
border-top:3px solid #ffd5d5;
border-bottom:2px solid #ffd5d5;
border-right:1px dashed #ccc;
border-left:1px dashed #ccc;
font-family: 'Shadows Into Light Two', cursive;
font-size: 18px;
border-radius: 10px;
text-shadow: 1px 1px #eee;
}
O al utilizar:
blockquote{
padding:10px;
color:#000;
border:7px double #CCC4FB;
font-family: 'Shadows Into Light Two', cursive;
font-size: 18px;
text-shadow: 1px 1px #ccc;
background: url('http://i60.tinypic.com/b96bc.png');
border-radius:20px 0px 20px 0px;
}
Obtendrías algo como esto:

Hover

También al blockquote le puedes agregar efectos, para cuando se pase el cursor sobre él, su estilo cambie.
blockquote{
estilos
}
blockquote:hover{
estilos cuando se pase el cursor
}
Al pasar el cursor sobre la cita este es el resultado.

Resultado al utilizar:
blockquote{
padding:10px;
color:#000;
border:7px double #CCC4FB;
font-family: 'Shadows Into Light Two', cursive;
font-size: 18px;
text-shadow: 1px 1px #ccc;
background: url('http://i60.tinypic.com/b96bc.png');
border-radius:20px 0px 20px 0px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
blockquote:hover{
border-radius:0px 20px 0px 20px;
background:url(http://3.bp.blogspot.com/-2A0D4wY8Rww/TzuO_pTu-zI/AAAAAAAACpQ/B9EkXNZ9C48/s1600/grey.png)
}
 Al pasar el cursor el radio de los bordes y el fondo cambia.

  • Para que la transición no sea tan brusca puedes agregar: -webkit-transition: 1.0s; y -moz-transition: 1.0s; antes del cierre de blockquote{.

Atención:

Si tu plantilla ya tienen el blockquote personalizado, entonces cuando agreguen el código tienen que sobrescribirlos. Para que su personalización tome prioridad, añadan !important al final de cada código. Ejemplo:
blockquote{
padding:10px !important;
color:#000 !important;
border:7px double #CCC4FB !important;
font-size: 18px !important;
text-shadow: 1px 1px #ccc !important;
border-radius:20px 0px 20px 0px !important;
}
O simplemente entra al código HTML de la plantilla buscan la etiqueta blockquote y modificas directamente y desde ahí los estilos que ya estaban estipulados.

¿Problemas con el blockquote?

Si tienen algún problema al personalizar las citar, aquí te traigo las soluciones.
  1. Vas a edición de tu entrada y das vista HTML busca <blockquote y si lo tienes así : <blockquote class="tr_bq" >TEXTO CITADO</blockquote> Borras class="tr_bq", debe de quedarte así: <blockquote>TEXTO CITADO</blockquote>.
  2. En el CSS del blog en vez de blockquote { utiliza .tr_bq {. Para agregar el efecto hover seria: .tr_bq:hover {.
  3. Si no funciona con ninguna de las soluciones anteriores entonces a la antigua es la única manera: Van a la edición de su entrada y en vista HTML buscan <blockquote (la encontraran como:  <blockquote class="tr_bq">Texto</blockquote> o <blockquote>Texto</blockquote>) y lo reemplazan por:
<blockquote class="tr_bq" style="background: #E5E0FF;border: #fff 3px solid;box-shadow: 0 0 4px #CCCCFC;padding: 4px; font-size: 11px;color: #AEB1F0;border-radius: 10px;">
AQUI TEXTO</blockquote>
Entre style=" y "> agregan los estilos. De esta manera tendrán que hacer este procedimiento cada vez que quieran citar.
Gracias a lunany-kawaii.blogspot.com por resolver algunas dudas.

Y este es el tutorial de hoy. Espero les guste. Como siempre, los invito a que creen un tutorial de pruebas y experimenten un poco antes de personalizar la plantilla original de su blog...
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios...

8 comentarios:

  1. ¡Me encantó este tutorial! Es genial, muchas gracias ♥

    ResponderEliminar
    Respuestas
    1. Que Bueno Tamara... Espero te sirva de mucho! xD

      Eliminar
  2. Hola!
    Tengo ganas de darle un cambio a mi blog y aunque tengo un blockquote quiero cambiarlo a algo más sencillo. Así me me viene de perla. Muchas gracias!
    Saludos!

    ResponderEliminar
    Respuestas
    1. Que bueno que te gustara el tutorial.
      Siempre renovar el blog le dan frescura. Así sean pequeños cambios.

      Eliminar
  3. ¡Hola!
    Venia a ver otra cosa a tu blog y me voy encontrando con este magnifico tutorial (ya lo hice y me encanto *-*/) y simplemente no pude resistirme.
    Por cierto, te he nominado a un book tag http://adictoalos.blogspot.com/2016/12/book-tag-13-libros-encadenados.html

    Ojala y puedas hacerlo.
    Saludos.
    Mayra.
    PD: Necesito ver los otros tutos que tienes... :)

    ResponderEliminar
    Respuestas
    1. Gracias Maya! Ya me pasare mañana por tu blog para verlo..
      Que bueno que te sirviera el tuto... V
      e ala etiquete de Tutoriales, ahí los encontraras todos...
      :3

      Eliminar
  4. Que genial! Está muy bien explicado para los que no sepan nada de programación puedan hacerlo, muchas gracias por compartir...

    ResponderEliminar
    Respuestas
    1. Cuando hago un tutorial siempre pienso en las dudas que solía tener cuando comencé en este mundo del HTML! xDD

      Es bueno compartir mis conocimientos...

      Eliminar