Tutoblog para ti #11: Cuadros para texto de entradas.

domingo, 12 de junio de 2016

¡Holaa lectores! Hoy les traigo un tutorial bastante 'completo', por así decirlo. 
Como ya varios bloggeros me preguntaron cómo colocaba los cuadros o cajitas de textos en mis entrada, cómo les editaba el color, tamaño y otros aspectos, decidí hacer un tutorial con todos los códigos de los cuadros que más utilizo en mis entradas, indicando cómo se puede modificar cada detalle de ellos.
Espero que me haya explicado bien y que el tutorial les resulte de utilidad...

☕ Cuadro 1º:

TEXTO DE LA CAJITA
<div style="background-color: #ffd0c2; text-align: centerborder: 3px solid #a991af; padding:5px; ">
TEXTO DE LA CAJITA</div>
*El primer código que esta en rojo es el color que tendrá el fondo y el segundo código es el color que tendrá el borde de la cajita. Ustedes pueden modificarlo por el color que quieran, pero no olviden dejar en # ya que si no el código con sólo los números no les servirá.
*Lo que está en azul, es la alineación que tendrá la cajita. Si quieren que esté a la izquierda, en lugar de center (centrado) escriben left o a la derecha right.
*Lo que está en verde es para modificar el tamaño del borde. Lo mejor es que no supere los 3 px, sino quedará muy grande. 
*Lo que está en anaranjado es el 'estilo' de la cajita. 
Pueden modificarlo colocando las siguientes palabras:
__________ Solid
.................... Dotted
--------------- Dashed
========= Double

*El último color es para que el texto no nos quede pegado al borde; cuanto más grande es el valor, mayor será el espacio entre ambos.

☕ Cuadro 2º:

TEXTO DE LA CAJITA.

<div style="background-color: #ffd0c2; border-left-color: #a991af; border-left-style: solid; border-left-width: 5px; font-size: 14.49px; line-height: 21.735px;">
<div style="border-right-color: #a991af; border-right-style: solid; border-right-width: 5px;">
<div style="padding: 8px;">
<div style="text-align: center;">
TEXTO DE LA CAJITA.</div>

-La modificación es básicamente la misma que la del cuadro anterior: 
*El primer código que esta en rojo es el color que tendrá el fondo y el segundo código es el color que tendrá el borde de la cajita. Ustedes pueden modificarlo por el color que quieran, pero no olviden dejar en # ya que si no el código con sólo los números no les servirá.
*Lo que está en azul, es la alineación que tendrá la cajita. Si quieren que esté a la izquierda, en lugar de center (centrado) escriben left o a la derecha right.
*Lo que está en verde es para modificar el tamaño del borde. Lo mejor es que no supere los 3 px, sino quedará muy grande. 
*Lo que está en anaranjado es el 'estilo' de la cajita. 
Pueden modificarlo colocando las siguientes palabras:
__________ Solid
.................... Dotted
--------------- Dashed
========= Double


*El último color es para que el texto no nos quede pegado al borde; cuanto más grande es el valor, mayor será el espacio entre ambos.

☕ Cuadro 3º:


TEXTO DE LA CAJITA

<blockquote style="background-color: #ffd0c2; border-color: #a991af; border-radius: 7px; border-style: dashed dashed dashed solid; border-width: 2px 2px 2px 15px; margin: 0px; padding: 4px; text-align: justify; transition: 1s;">
<div style="text-align: justify;">
<div style="text-align: left;">
<div style="text-align: left;">
<div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: #ea9999; font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif; font-size: medium;">TEXTO DE LA CAJITA</span></div>
-Nuevamente la modificación es  la misma que la de los cuadros anteriores. 
*Todo lo que esta en negrita corresponde al estilo del texto que se encuentra dentro de la cajita. Ustedes mismos pueden modificar el texto con la herramientas que les proporciona blogger.

☕ Cuadro 4º:

TEXTO DE LA CAJITA
<blockquote class="tr_bq" style="background-image: url(&quot;http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png&quot;); background-repeat: no-repeat; border-bottom-color: #ffd0c2; border-bottom-style: dotted; border-bottom-width: 2px; border-top-color: #ffd0c2; border-top-style: dotted; border-top-width: 2px; margin-bottom: 10px; margin-left: 25px; margin-top: 10px; padding-left: 32px; padding-top: 3px; text-align: justify;">
<div style="line-height: 26.25px; margin: 0px; padding: 0px; text-align: center;">
TEXTO DE LA CAJITA</div>

-Realizan la misma modificación que en los tres cuadros anteriores.

Para integrar estas cajitas en sus entradas, solo copian y pegan el código (en lo posible ya editado) en el código HTML de la entrada.
Es un poco lento y tediosos el proceso, ya que hay que estar buscando y pegando los códigos, modificando los px, pero si tiene paciencia y les gusta, este tutorial les resultará de utilidad.

Hasta aquí llegó el tutorial de hoy, espero que les haya gustado  y resultado de su utilidad, el próximo domingo subiré otro tutorial, el cual ustedes deben eligir mediante una votación (Gadget de votación titulado "Tutoblog #12", en la parte superior del blog).
 Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.
¡Un abrazo literario!

18 comentarios:

  1. Me encantan estas entradas porque son muy útiles. En mi caso, no sabía la última y sin duda me la apunto, la verás en mi blog próximamente :)
    Un beso, nos leemos.

    ResponderEliminar
    Respuestas
    1. Qué bueno que te gusten este estilo de entradas, eso me incentiva a seguir publicándolas!
      Besitos :D

      Eliminar
  2. Muchas gracias por esta entrada tan genial. Ahora que se un poco de html me viene de perlas esto (y no me suena a chino todo).
    Gracias otra vez, l utilizaré! :)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentar!
      Espero que te queden hermosas las cajitas :D
      Besos!

      Eliminar
  3. Y otro tutotial que me apunto. Espero tener un día entero de verano y ir haciendo unos cuantos para dejar relindo el blog. Mil gracias <3

    ¡SE MUUY FELIIIIIIIIIIIIIIIIIIIIIZ! :):)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentar!
      Espero que te queden bellísimos :D
      Saludos!!!!!!!

      Eliminar
  4. No sabes cuánto te quiero ahora mismo xD Al fin podré usar cajitas así jajaja
    Si por ejemplo quisiera usarlas para la ficha técnica de un libro, y colocar la portada al lado pero que estuviera como superpuesta en una de las esquinas (no sé si me explico), ¿qué debería hacer? (te pregunto de antemano, aunque igual luego me pongo a trastear y doy con la tecla, jaja)
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Holaaa, que bueno que ahora puedas integrar las cajitas a tu blog!!
      Para hacer lo que tu quieres con la portada, debes mover la imagen que quieres sobre la cajita hasta ubicarla como tu quieras, es así de fácil!
      Espero que te haya ayudado...
      Un abrazo!

      Eliminar
  5. Hola! Muchas gracias por tu comentario en mi entrada, me ha gustado muchisimo tu opinión. :3
    Muchisimas gracias por este tutorial, me ha servido muchisisimo!
    Saludos, Max.

    ResponderEliminar
    Respuestas
    1. Holaa Max, que bueno que te haya gustado mi comentario XD
      Gracias a ti por leerme y comentar!
      Saludo <3

      Eliminar
  6. Hola!!!! Voy a utilizar esto para hacer unos cambios en mi blog Muchas gracias. Un beso y voy a visitar los otros tutoriales.

    ResponderEliminar
    Respuestas
    1. Holaa Fer! Espero que te queden genial las cajitas :3
      Saludos!

      Eliminar
  7. Muchas gracias por el tutorial!!Me ha servido muchísimo y lo pondré en práctica.
    Un besito<33

    ResponderEliminar
    Respuestas
    1. Que bueno que te haya servido, me hace muy feliz!!!
      Un beso :D :D

      Eliminar
  8. Muchas gracias! Lo he utilizado en mi blog y me ha quedado muy bonito

    ResponderEliminar
  9. ¡Hola Antonella!
    Mil gracias por tus toturiales: son útiles, y lo explicas todo de una forma tan clara que incluso alguien como yo, totalmente torpe en blogger, lo entiende.
    Intentaré ponerlo en práctica en las próximas entradas de mi blog.
    Aquí tienes otra fiel lectora.
    Un abrazo desde Galicia (España)

    ResponderEliminar
  10. Hola! Yo de nuevo, me quede viendo los tutos, pero hay algo que no me doy cuenta, es que no sé dónde poner estos códigos para que se vea a cajita, por que yo a mi entrada no la hago por html, si no que uso el "redactar". Espero que me respondas, por que presiono el icono de seguir la publicación por mail ("notificarme") :3 Gracias!

    ResponderEliminar
  11. ¡Hola!
    Me ha encantado este tutorial, por que llevo demasiado tiempo intentando saber como se ponían las cajitas y por fin lo sé 😍
    Muchísimas gracias.
    Habla María de La biblioteca de Ma.

    ResponderEliminar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014