¡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;">♦ <b><u>Director</u></b></span>: Tetsurō Araki</div><div style="text-align: center;"><span style="font-size: 16px;">♦ </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: "pacifico" , cursive; font-size: 30px; text-align: center;">
<span style="color: #085dad;"><u>Death Note</u></span></div>
<span style="font-family: "georgia" , "times new roman" , 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
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:
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
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>
:quality(90):format(webp)/d2d6tho5fth6q4.cloudfront.net/extast91491_7a7f524176b1302c1bf3d9a239ea42cac97bb91d_cover.jpg)
