EL DIARIO DE YUUKI
This is my life

Personalizar ficha técnica y sinopsis + extra | Tutorial HTML

tutorial HTML
¡Buenas! ¿Qué tal están creadores? Hoy les traigo una propuesta que votaron en Twitter: un tutorial para personalizar esa parte fundamental de las reseñas, la ficha técnica y la sinopsis. Esta entrada será sencilla, básica, por lo que si están buscando algo demasiado producido temo que no les servirá de mucho. Sin más vueltas, ¡empecemos!

NOTA: Si no sabes mucho sobre el HTML puedes pasar por mis anteriores tutoriales en los que cuento un poco de ello. Click aquí para verlos


Sencilla
Este tipo de personalización (para la ficha técnica solamente) es la que uso yo actualmente en mis reseñas

¿Recuerdan que en la entrada anterior de esta sección les dije que las tablas servían mucho? ¡Pues en este ejemplo las utilizaremos! Parezco adicta a las tablas, pero no, en serio, ¡creanmeeee! No se preocupen que es muy fácil. Yo los ayudaré a comprender lo más complicado

Ficha técnica
Título: Death Note
♦ Director: Tetsurō Araki
♦ Año de lanzamiento: 2006


La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.

Código
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<center>
<table><tbody>  <tr><td><img src="https://tvfiles.alphacoders.com/957/poster-thumb-9571.jpg" width="200"></td>    <td><div style="padding: 10px; width: 200px;">      <div class="separator" style="clear: both; text-align: center; font-size: 30px; font-family: 'Open Sans Condensed', sans-serif; color: #C50E1F"><b>Ficha técnica</b></div><div style="text-align: center;"><span style="font-size: 16px;">♦ <u><b>Título</b></u></span>: Death Note</div><div style="text-align: center;"><span style="font-size: 16px;">♦&nbsp;<b><u>Director</u></b></span>:&nbsp;Tetsurō Araki</div><div style="text-align: center;"><span style="font-size: 16px;">♦&nbsp;</span><b style="font-size: 16px;"><u>Año de lanzamiento</u></b>: 2006</div>      <br /></div></td></tr>
</table>
<br/>
<div style="width: 550px; height: auto; padding: 13px; background-color: #B3AFAF; text-align: justify">La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.</div></center>

        corresponde a la fuente que usé para el título "Ficha técnica", sacada de Google Fonts. Explicaré más abajo sobre que datos sacar de la página y como utilizarlos
        usado para que todo quede centrado, más que nada la tabla
        corresponde al link de la imagen que coloqué, tienen que reemplazarlo por el que ustedes quieran usar
        es el tamaño con el que redimensioné la imagen porque estaba grande. Si les parece engorroso, pueden dimensionarla a gusto anteriormente con algún programa
        es el código correspondiente a la sinopsis, pueden personalizarlo a gusto (tamaño de tabla, color de letras y de fondo, etc)

OJO, la tabla solamente corresponde a la ficha, la sinopsis es aparte



Más compleja

Acá se salvan de las tablas, pero es un poquitín más complicado de editar. Puede que comience a usar este tipo de personalización porque es mucho más dinámica que la otra

Death Note
Tsugumi Ōba - 2006 - 37 capítulos

La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.



Código
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"><center>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; margin-top: 20px;"><img src="https://tvfiles.alphacoders.com/957/poster-thumb-9571.jpg" style="text-align: start;" width="200" /></div>
<div style="height: 430px; padding: 40px; width: 560px;">
<div style="font-family: &quot;pacifico&quot; , cursive; font-size: 30px; text-align: center;">
<span style="color: #085dad;"><u>Death Note</u></span></div>
<span style="font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;">Tsugumi Ōba - 2006 - 37 capítulos</span><br />
<br />
<div style="background: #cccccc; padding: 20px; text-align: center; width: 560px;">
<div style="text-align: justify;">
La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.</div></div></div></center>

        corresponde a la fuente que usé para el título "Ficha técnica", sacada de Google Fonts. Explicaré más abajo sobre que datos sacar de la página y cómo utilizarlos
        para que todo quede centrado
        corresponde al link de la imagen que coloqué
        es el tamaño con el que redimensioné la imagen porque estaba grande. Si les parece engorroso, pueden dimensionarla a gusto anteriormente con algún programa
        es el código correspondiente a datos de ficha. Se puede personalizar a gusto
        es el código entero (con texto incluido) correspondiente a la sinopsis. También se puede personalizar
IMPORTANTE: Debes agregar bastante espacio entre el texto debajo y lo que les muestro porque sino se sobrepondrán



Extra

¿Alguna vez quisieron utilizar alguna fuente de Google Fonts pero no sabían como? ¡Aquí les explicaré! Pero antes de proseguir, quiero comentarles que hay dos maneras de poner una fuente: una es "registrándola" en el blog directamente para que cuando quieran usarla no tengan que poner todo el código sino solamente el formato (acá les explican una manera de hacerlo), otra es la que explicaré aquí, que requiere que cada vez que quieras usar la fuente coloques todo

1) Vamos a Google Fonts
2) Buscamos entre todas las fuentes hasta encontrarnos con la que nos gusta más
3) Una vez sabemos cuál nos gusta, hacemos click en el + que aparece en la esquina superior del lado derecho
4) Aparecerá una especie de menú desplegable abajo, que debemos clickear para que se maximice


5) Una vez maximizamos nos encontramos con dos códigos. El primero que empieza con "link href" es el código que se tiene que poner en las entradas (una única vez por entrada) cada vez que quieras utilizar la fuente (o sino, como dije arriba, debes registrarla en el blog para no tener que ponerlo cada vez que quieras utilizarla). El otro es el que se utiliza para darle el formato directamente al texto. A continuación les dejo un ejemplo con código incluido para que puedan verlo mejor:


Texto de ejemplo

Código:
<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet"><div style="font-family: 'Macondo', cursive; text-align: center; font-size: 35px; color: lightblue; text-shadow: 1px 1px 1px black">Texto de ejemplo</div>

Espero les sirva mucho y puedan ponerlo en práctica. ¡Besos a to'!

16 comentarios:

¡Gracias por pasarte y por comentar!
IMPORTANTE: Recuerda que si deseas que nos sigamos mutuamente, debes comentar en la entrada de Seamos Seguidores, de lo contrario se considerará spam y, por lo tanto, será eliminado.

  1. Gracias, me va a venir fenomenal para tunear y personalizar mis entradas. Besos

    ResponderBorrar
  2. ¡Muchas Gracias!
    Voy a ver si lo intento para mis reseñas.
    Besos.

    ResponderBorrar
    Respuestas
    1. ¡Gracias a vos por pasarte! Espero que te sirva por lo menos de base ^^
      Un beso

      Borrar
  3. Ay, ay, amé esta entrada. A ver si me animo a usarla, creo que utilizaré ese diseño para los tags de películas y series. ¡Mil gracias por el tutorial! ❤❤❤

    ResponderBorrar
    Respuestas
    1. Awww, me alegro que te haya gustado tanto Tami ♥
      Si la usas estaré más que feliz de haber contribuido a algo positivo ^^
      ¡Gracias a vos por pasarte!

      Borrar
  4. ¡Hola Yuuki!
    Dios, no soy muy buena con esto jajaja, y eso que quiero cambiarle el diseño al blog jajaja.
    Pero bueno, muchísimas gracias, voy a guardar esta entrada para el futuro, cuando aprenda a manejar más eso de HTML jajaja.
    Cualquier cosa te escribo y me ayudas jajaja.
    ¡Besos!

    ResponderBorrar
    Respuestas
    1. ¡Hola Angie! Gracias a ti por pasarte. Ya sabes que si, puedes contar conmigo si necesitas ayuda con el HTML ^^
      No se mucho mucho pero se lo básico por lo menos jejeje
      Un abrazo

      Borrar
  5. ¡Excelente! Pronto intentaré usarla para ver si me sale XD
    Mil gracias Yuuki <3

    ResponderBorrar
  6. ¡Hola! La verdad es que la segunda me encanta <333 quizás, la use a futuro.

    ¡Un abrazo!

    ResponderBorrar
    Respuestas
    1. ¡Hola Roxy! Me alegro que te haya gustado tanto ♥
      Si la usas seré muy feliz, un beso gigante

      Borrar
  7. ¡Hola Yuuki! No te das una idea lo que odio los códigos htlm, encima si tenes un blog si o si tenés que usarlos -.- pero me pareció súper útil la explicación, ojalá hubiera leído esto cuando tuve que aprender a hacerlo,en cambio lo leí de un popurrí de blogs y no entendí mucho jajajaja.
    ¡Muy buenos tutoriales! Me quedo leyéndolos a ver si aprendo algo nuevo :)
    Besotes!

    ResponderBorrar
    Respuestas
    1. ¡Hola Flor! Sabes que si, si tenes un blog para personalizarlo si o si debes saber HTML, o por lo menos saber colocar las cosas de los tutoriales
      Quizá en un tiempo atrás no era algo que estaba muy asentado el código, por eso quizá costó un poco encontrar tutoriales, pero muchas gracias, me alegro que te haya gustado y espero te sirva para algo
      Un beso

      Borrar
  8. ¡Hola Yuuki!
    Me viene pero que muy bien saber eso de las fuentes jejeje Porque de verdad que para aclararme con el HTML es un suplicio... Cada vez que quiero hacer algo tengo que estar probando durante horas todo lo que quiero hacer jaja
    Mil gracias de nuevo!
    Un besito!

    ResponderBorrar
    Respuestas
    1. ¡Hola Olgui! Me alegro que te sirva lo de las fuentes. Es complicado hasta cuando le tomas la mano. Yo tuve suerte porque desde antes sabía HTML por estar en foros jeje
      Si necesitas ayuda sabes que puedes contar conmigo ♥
      Un abrazo

      Borrar