Tabla "Sobre mi/sobre el blog" personalizable | Recurso HTML

agosto 19, 2017

¡Hola creadores! ¿Qué tal están? Hoy les dejaré la tabla que hice hace un tiempo. No estoy muy conforme con el resultado pero por ahora es lo que puedo brindar. Para más adelante podré hacer algo mucho más bonito, lo prometo. Antes de continuar quiero aclarar que no es un tutorial en si, no tengo otro lugar para ponerlo y por eso lo coloqué como un Tutorial HTML (cambiado a Recurso HTML :)). En realidad les daré el código de la tabla que es personalizable. Si quieren editarla y no les sale pueden preguntarme. También si quieren armar algo y no les sale, puedo pegarles una mano :)

¿Qué se puede personalizar?
- Tamaño de cada porción. Pueden hacerlo más grande o más chico, dependiendo de cuanto texto quieren ingresar. También pueden colocar la barra de desplazamiento si quieren que quede un tamaño más chico en la parte de la descripción y no se alargue tanto
- El título, el cuerpo y el cuadro
- Colores. Pueden cambiar todos los colores si lo desean. Iba a hacer diferentes opciones de colores pero no pude
- Fuentes.
- Imagen
- Muchas más cosas

Si quieren saber como pueden editar este tipo de tabla pueden visitar mis tutoriales HTML anteriores, en los que explico lo básico que conozco, por lo menos. Aquí pueden encontrarlos → click

NOTA: Yo les paso una imagen del cuadro porque con la plantilla que tengo me marca una línea que realmente no existe. Así que si tienen plantillas tengan en cuenta que puede cambiar el diseño de la tabla, el resultado.


Tabla personalizable

NOTA: No se ve donde aparece la imagen porque no tiene simplemente. En el ejemplo podrán verlo mejor
NOTA2: La fuente usada es Vibur y su código es el siguiente:

<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet">
Código con fuente
<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet"><table style="background-color: black; border-bottom: 10px solid #bc3541; border-left: 5px solid #ee5b6c; border-right: 10px solid #bc3541; border-top: 5px solid #ee5b6c; height: 600px; padding: 10px; width: 600px;"><tbody><tr><td><center><div style="background-color: #f99d71; border: 2px double white; color: white; font-family: &quot;vibur&quot; , cursive; font-size: 40px; padding: 5px; text-align: center; text-shadow: 2px 2px 2px black; width: 400px;"><div class="separator" style="clear: both; text-align: center;">Título</div></div></center></td><td><div style="background-image: url(IMAGEN); border-radius: 100%; border: solid 3px; height: 200px; margin-left: 20px; width: 200px;"></div></td></tr><tr><td><div style="color: white; height: 400px; padding: 10px; width: auto;"><div style="text-align: justify;">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</div></div></td><td><div style="background-color: white; height: 300px; padding: 12px; text-align: center; width: auto;"><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -</div></td></tr></tbody></table>


Ejemplo


Espero que dentro de todo les sea útil. Pueden usar la tabla para diferentes cosas, no solo para contar sobre ustedes. Muchas gracias por el apoyo de siempre. Si tienen sugerencias son más que bienvenidas. Besitos

You Might Also Like

10 comentarios

  1. ♡_____ ♡ AAAAAAAAH, qué bonita que está.
    Me la anoto por si en algún momento puedo ocuparla.
    Gracias, Yuki.

    ResponderEliminar
    Respuestas
    1. ¡Hola! Muchas gracias por anotártela :)
      Un beso

      Eliminar
  2. ¡Hola! ¡Qué bonita te ha quedado! Me gustó mucho <3 Sobre donde o cómo ponerla, podrías agregarla como recurso, ya que no es un tutorial, que encajaría mejor.

    ¡Un abrazo! Y gracias por campartirla <3

    ResponderEliminar
    Respuestas
    1. ¡Hola! Pues que buena idea me diste. Lo coloqué como recurso aunque no tengo una sección que se llame así, quizá vaya a editar alguna
      Un beso

      Eliminar
  3. Holaaa
    Muy interesante la entrada, me parece de mucha utilidad ^^
    Quedó muy bonito
    Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegro que te guste mucho, muchas gracias por los ánimos
      Un beso

      Eliminar
  4. ¡Hola, Yuuki!

    Me parece un tutorial o recurso muy bueno para los que quieren algo diferente:D Tal vez cuando haga algún cambio en el blog vuelva a esta entrada.

    ¡Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegro que te guste :)
      No creo que sea lo mejor de lo mejor la verdad, pero bueno, gracias por tenerlo en cuenta
      Un beso

      Eliminar

¡Comenta! Tus opiniones y sugerencias son cosas que ayudan a crecer al blog ♥
Recuerda que si deseas que nos sigamos mutuamente, está la entrada de Seamos Seguidores para ello

Popular Posts

Like us on Facebook