Personalizar un texto desde el HTML

8.10.15

Hace mucho mucho tiempo Lhya hacía tutoriales sobre PhotoShop y diseño en Youtube y Facebook. Yo, el Pepito Grillo de los tutoriales, la convencí de que sería una buena idea invadir su blog con éstos. Así que hoy aprenderemos a personalizar un texto del post directamente desde la plantilla.

Si no saben de lo que estoy hablando, cuando cambio la fuente general de mi blog a ésta
fuente, la estoy personalizando.
Y lo estoy haciendo con el HTML, que es una manera más práctica que cambiarla directamente desde el post, porque cuando quieras cambiar la fuente no tienes que hacerlo entrada por entrada sino simplemente ajustar el código dentro de tu plantilla y ya está.

¿Cómo lo hago? Voy llegando. El código es éste:

.entradas {
  color: #000000; /* Color del texto */
  font-family: Arial; /* Fuente del texto */
  font-size: 11px; /* Tamaño de la fuente */
  letter-spacing: 2px; /* Espacio entre las letras (opcional) */
  text-transform: uppercase; /* Que todo se muestre en mayúsculas (opcional) */
}

( Plantilla / Editar plantilla / Y lo copian y pegan en cualquier parte arriba de </b:skin> )

Lo que está en negrita y azul lo puedes cambiar a tu gusto: .entradas, .post, .manzanas, lo que sea. Lo importante es que cuando lo empleen dentro de la entrada escriban la misma palabra que escogieron en la plantilla.

Cómo utilizarlo en la entrada:
Cuando escribes una entrada, tienes dos opciones: escribirlo en la pestaña de Redactar o en la pestaña de HTML.

Escoges la opción HTML y ahí pegas lo siguiente:

<div class="entradas">Texto que quieres personalizar aquí</div>

Lo que está en negrita es el nombre que le diste a tu código. Si escribiste .manzanas en la plantilla, en la entrada sería <div class="manzanas">. Y así con cualquier cosa que escojas. Es de suma importancia cerrar el código con </div>. Si no lo cierras, te dará error o todo lo que escribiste se verá con la fuente personalizada. Si cerraste el código y seguiste todos los pasos, este sería el resultado:

Clic para visualizar mejor.
Espero haber podido explicarlo de la manera más sencilla posible. Sé que puede ser un poco frustrante todo ese tema de los códigos, y hasta a mí a veces me enloquece, pero vale la pena, y con paciencia todo se puede.
Si tienes alguna duda, no dudes en comentar y te ayudaré con mucho gusto.

3 comentarios:

  1. ¡Hola Lhya! Muchas, muchas, muchas gracias por subir este tutorial. En ocasiones me gusta cambiar la fuente de algún subtítulo o algo parecido de mis entradas y siempre lo he hecho un poco de manera intuitiva, aunque ahora que has compartido estos códigos con nosotros, voy a guardar el link de este post en marcadores y así tenerlo a mano.

    Un beso ♥

    ResponderEliminar
  2. Gracias por el tutorial, soy muy torpona para todo esto :P

    Un besito ^^

    ResponderEliminar
  3. Gracias por el tutorial Lhya, sigue haciéndolos :)
    A mi este me será especialmente útil a la hora de poner subtítulos así que lo tendré pendiente. Esto del html es confuso pero creo que ya le voy agarrando un poco más.

    Te mando un beso enorme<3

    ResponderEliminar

Design by Lhya © 2014 - 2016