Cómo hacer un recuadro para destacar textos o enlaces

7/10/16
¡Hola mikiño! Estoy retomando el apartado de tutoriales, que lo tengo muuuy abandonado porque tengo cosas que modificar de los anteriores, jeje. Podría estar prestándole atención al gato, que es el único que me quiere, pero no.
Preparo éste post y así solo dejo pendiente el de la reseña de la película que voy a ir a ver mañana al cine. ¡¡Yupiiii!! Es que me encanta ir al cine. Voy poquísimo, pero me encanta.

Hoy te quería enseñar cómo hago las cajitas que utilizo yo para los enlaces de mis freebies. Las cajas a las que me refiero son éstas de aquí abajo.

"Los pájaros nacidos en jaula creen que volar es una enfermedad."



Puedes utilizar el recuadro tanto para poner enlaces como para simplemente destacar algo. Aquí por ejemplo he utilizado la amarilla para poner una cita, y la violeta para poner un enlace de descarga. El código varía un pelín de una a otra, así que te las voy a explicar por separado.

Hay dos formas de hacerlo: la primera es la que utilizo yo, porque cambio los colores y el ancho y el largo cuando me da la gana, por lo que hacer la personalización directamente en la entrada me compensa.

La segunda forma te irá mejor si sólo quieres el mismo estilo de caja todo el rato. (Ej; si tan sólo la quieres para hacer los botones de descarga y las quieres todas iguales. Aquí se hace la personalización en la plantilla.

Las dos son muy sencillitas, así que ¡vamos allá!




MÉTODO I

Como ya dije éste es el método que uso yo, pues cambio ligeramente el ancho, largo o color del botón dependiendo de la entrada o para qué lo quiera. Si es lo que vas a hacer tú, entonces te compensa utilizar éste método.

CAJA PARA RESALTAR TEXTOS

Es un poco diferente a la que utilizo para poner los enlaces de descarga: ésta caja es más fina y larga. Ocupa todo el ancho de la entrada.

1. Estar dentro del editor de entradas.

2. Hacer click en HTML (botón que está justo al lado de ''redactar'')

3. Pegar el siguiente código.


4. Sustituye lo escrito en negrita.

Puedes cambiar el color de la letra, el fondo y el borde interior de líneas discontinuas cambiando el color en negrita por el que tú quieras. También puedes hacer el recuadro más alto poniendo un número superior a 5. ( más bajo, número inferior a 5).

<center>
<div style="-moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; background-color: #fff69c; border-radius: 20px 20px 20px 20px; margin-left: -10px; margin-right: -10px; padding: 10px; text-align: center; width: 100%;">
<div style="-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #fff69c; border-radius: 20px 20px 20px 20px; border: 1px dashed #ffffff; padding: 5px;">
<b><span style="color: #ffffff; font-family: inherit; font-size: large;">"EL TEXTO QUE QUIERES RESALTAR"</span></b></div>
</div>
</center>



CAJA PARA ENLACES DE DESCARGA

Para un botón de descarga prefiero usar una caja más gruesa y más corta. Yo le he puesto un 80% de largo, pero tú puedes ponerle más o ponerle menos cambiando el por el porcentaje que quieras.

1. Estar dentro del editor de entradas.

2. Hacer click en HTML (botón que está justo al lado de ''redactar'')

3. Pegar el siguiente código.

4. Al igual que en el ejemplo anterior, puedes sustituir lo que está en negrita para realizar los cambios que quieras: cambiar el fondo, el color del borde...

En éste caso al ser un enlace, la letra será del color de los enlaces de tu blog. Yo suelo combinarlo con el color del borde.


  • Si quieres quitar los bordes redondeados borra todo lo que ponga 'border-radius' y listo.

<center>
<div style="-moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; background-color: #f4f2f7; border-radius: 20px 20px 20px 20px; margin-left: -10px; margin-right: -10px; padding: 10px; text-align: center; width: 80%;">
<div style="-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #f4f2f7; border-radius: 20px 20px 20px 20px; border: 1px dashed #999999; padding: 10px;">
<b><span style="color: white; font-family: inherit; font-size: x-large;"><a href="TU ENLACE AQUÍ">LA FRASE CON LA QUE QUIERES QUE SE VEA EN LUGAR DEL ENLACE</a></span></b></div>
</div>
</center>




MÉTODO II

Como ya dije la personalización aquí se hace en la plantilla directamente y da menos trabajo colocarlo en la entrada.

Es una buena opción para quien quiere utilizar el mismo estilo de botón todo el tiempo. También es mucho más fácil de modificar si cambias de plantilla, porque no tienes que ir entrada por entrada modificando el código. Lo modificas en la plantilla y listo.


1. Entra en Plantilla > Personalizar > Añadir CSS

2. Pega el siguiente código

3. Personalízalo si quieres: cambia el color de fondo, el color de la letra (la puedes cambiar en la entrada, como la letra normal), el ancho...

.botón-1 {
-moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; background-color: #f4f2f7; border-radius: 20px 20px 20px 20px; margin-left: -10px; margin-right: -10px; padding: 10px; text-align: center; width: 80%;
}

.botón-2 {
-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #f4f2f7; border-radius: 20px 20px 20px 20px; border: 1px dashed #999999; padding: 10px;
}

4. Una vez instalado el código entra en la entrada donde quieres poner el botón.

5. Dale a edición HTML.

6. Encuentra el texto que quieres resaltar y añade el siguiente código, para que quede tal que así:

<center><div class="botón-1"><div class="botón-2">TEXTO QUE QUIERES RESALTAR</div></div></center>

¡Y ya está! Es muy sencillito, ¿verdad? Copias el código y lo personalizas a tu modo. De todos modos si tienes cualquier duda puedes mandarme un e-mail o preguntármelo en los comentarios.

¿Te ha resultado útil el tutorial? ¿Te ha gustado? ¡Quiero saber tu opinión!

16 comentarios

  1. Muy bien explicado Nerea, gracias por compartirlo.

    ResponderEliminar
  2. Genial!! muy útil!!! :) Ambos métodos necesarios! ;)

    Muaa!!! :P

    ResponderEliminar
    Respuestas
    1. ¡Hola Moni!
      Sí. Yo seguiré usando el primero, que es el que mejor me va... jeje

      ¡Mua!

      Eliminar
  3. Muchas muchas gracias!! Uuy qué feliz me haces!! Andaba buscando este tutorial por mar y tierra y no lo encontraba. Hasta lo buscaba en inglés con la palabra button jajajaja lo probaré y si me da error te enviaré un mail ;)

    Un abrazo

    ResponderEliminar
    Respuestas
    1. ¡Hola Anabel! Me alegro que te guste el tutorial!
      No creo que tengas problema, pero cualquier cosa, ya sabes! :)

      ¡Mua!

      Eliminar
  4. Muchas gracias por el tutorial! A mi como no tengo mucha idea de Html toda ayuda es buena. Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola Pau!
      De nada, me alegra que te guste!! No creo que tengas ningún problema, es muy fácil, pero de ser así ya sabes: me mandas un mail!

      ¡Mua!

      Eliminar
  5. ¡ME ENCANTA, ME ENCANTA! Muchas gracias por el tuto, hasta ahora no he utilizado cajitas en mis post pero para según que entradas quedan de lo más molonas!


    Un besazo!

    ResponderEliminar
    Respuestas
    1. Jeje, me alegro mucho de que te guste.
      Yo las uso sobretodo para poner botones de descarga y demás. Porque normalmente lo que tengo que destacar lo destaco con el blockquote.

      Pero creo que también quedan muy chulas destacando textos!

      ¡Mua mua!

      Eliminar
  6. ¿Así que eres una profesional de esto del blogueo? Mola tu blog, aunque unas secciones más que otras... como comprenderás, a mi los cosméticos como que no :P

    Yo para mi desgracia tengo muy poquitos conocimientos web ni HTML ni leches en vinagre, aunque hago mis pinitos. Ya sabes, yo escribo (que es lo que me gusta) y lo demás ya se verá sobre la marcha ^^

    ResponderEliminar
    Respuestas
    1. ¿Profesional, yo? ¡Ojalá!
      Algún día igual soy profesional de algo, jajajaja.

      Eeeeepa epa. ¿¿¿Me estás diciendo entonces que en mi reseña de la Sikl-épil de Braun no vas a comentar??? Me acabas de hundir en la miseria.

      Lo estuve aplazando porque después de que me diesen la máquina me puse a explorar sobre la marca y leí que testaban en animales... Y eso no me gusta nada... Igual lo cambio por un post de Cruelty Free, que hace falta conciencia!! (¿Has visto como hilo temas?)

      Pues oye, muy bien se te da escribir. Conectas muy bien con la gente. Sin currarte SEO, ni diseño ni nada tu blog está muy activo, más que el de muchas personas que sí se preocupan por eso! :)
      (Yo debería empezar a ponerme con eso de la difusión, redes sociales y seo, por ejemplo, jajajaja)

      Eliminar
  7. no tenía ni idea de esto, cuanto se aprende con algunos blogs! me la guardo para usarlo más adelante :)

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya gustado y te resulte útil! Ya me contarás los resultados. :)

      Y si tienes cualquier duda me cuentas, sin fallo!

      Eliminar
  8. ¡Estos recursos para blogs me encantan! :)

    ResponderEliminar
    Respuestas
    1. ¡Ey! ¡Cuánto tiempo! Entre tanto reto de escribir por aquí y por allá no nos leemos nada!

      Me alegro que te guste. Ya me dirás si lo pones en práctica :)

      Eliminar

#TUTORIAL


Aprende a hacer recuadros para destacar textos.

¡ME APUNTO!