Códigos html para blogger

Como en Blogger casi todo va a mano, este post es muy importante porque aprenderás a usar html para poner elementos.

No te asustes porque es html de copiar y pegar para que no tengas que investigar mucho, no son cosas muy sofisticadas pero si son muy útiles y estos códigos los vas a usar mucho más de lo que piensas.

Te adelanto que vas a alucinar de lo sencillo que es, si quieres perder miedo a usar el editor de codigo este es el momento.

Estos trucos valen para todas las plataformas porque el html vale en todas partes pero lo dedico a blogspot y blogger porque a veces no les queda otra que hacer todo con código html a mano.

Algunas de estas funcionalidades las incluyen los editores en la mayoría y otras si eres de WordPress para algunas tendrás plugins.

Todos estos códigos funcionan mediante la vista HTML, desde el editor visual no.

Añadir un enlace con html en blogger

Aunque el editor lo hace quizás para los gadgets laterales puede que lo necesites saber y es muy útil.

<a href="http://a dónde quieres enlazar">Texto del enlace</a>

Tiempo necesario: 1 minuto.

Cómo añadir un enlace en HTML

Añadir un enlace a una imagen

<a href="http://a dónde quieres enlazar"><img src="http://ruta de tu foto.jpg" alt="descripción" width="200″ height="300″ /></a>

Poner un botón

Poner una línea separadora o un separador

Se hace poniendo <hr>

ya está que fácil! aunque si quieres un separador un poco más sofisticado con imágenes tienes un post especial sobre separadores en html

Crear un área de texto

Si necesitas recuadrar un texto porque quieras que destaque es muy fácil, lo malo es que el estilo en sí es muy feo y puede que necesites poner algo de CSS en tu vida para que sea más bonito.

<textarea>Lo que quieres destacar en este hueco</textarea>

Poner el enlace para mail

Si quieres que pinchen tu dirección de correo o un botón de mandar email y se les abra directamente en outlook u otro gestor este truco está genial.

<a mailto:tu mail> tu dirección de email </a>

Mandar WhatsApp desde tu blog:

Esto es más fácil de lo que parece y es un truco de html para blogger muy chulo, por cierto no te creas que te van a molestar mucho mandando mensajes.

Lo bueno es que si pinchan desde el móvil les abre la aplicación y si es en el ordenador de sobremesa lo abre en el navegador en whatsapp web y es muy cómodo.

Si tienes una tienda o das algún servicio te va a venir genial porque las plataformas de chat están muy bien pero la mayoría no las tienes tan directas y a mano como el Whatsapp.

Para que funcione necesitas poner el número sin espacios, el indicativo de país sin el signo +

Poner el Whatsapp en blogger con un enlace

<a href="https://api.whatsapp.com/send?phone=número de teléfono"> llamar al 55555 </a>

Poner el botón de Whatsapp en blogger con html

Con la imágen que quieras, en este caso he usado mi logo pero lo puedes hacer con el de Whatsapp:

<a href="https://api.whatsapp.com/send?phone=número de teléfono"><img border="0″ src="rutadelaimagen.png" width="64px" height="64px"> </a>

Cambiar propiedades en las fuentes (letras para los amigos)

Para hacer cambios en el aspecto de las fuentes con html nos valemos de la etiqueta <span> </span>que nos permite seleccionar un trozo de texto al que vamos a aplicar modificaciones. Esta etiqueta es muy útil porque te permite hacer cambios en pequeños fragmentos.

Te pongo como ejemplo algunas porque la letra se puede cambiar de mil formas.

Cambiar el tamaño de la fuente:

Hay muchas maneras de hacerlo, pero estas son las más frecuentes en html.

Cambiar el porcentaje de la fuente:

<span style="font-size: 120%;">Pon lo que quieras</span>

Cambiar el tamaño en pixeles de la fuente:

<span style="font-size: 25px;">Pon lo que quieras</span>

Cambiar el color de la fuente:

<span style="color: #ffffff;">Pon lo que quieras</span>

Elige el valor hexadecimal de tu color.

Tipo de letra, la familia de la fuente:

<span style="font-family: Montserrat;">Escribe lo que quieras</span>

Grosor de la fuente

<span style="font-weight: 400;">Escribe lo que quieras</span>

También lo puedes hacer con la propiedad <bold></bold> o <strong></strong>

Negrita

<b></b>

Italic, cursiva o inclinada

<i></i>

Si te gusta el mundo de las fuentes para tu blog te recomiendo este post para elegir la mejor letra entre 50.

Aprender HTML y CSS

Te recomiendo algunos libros para que aprendas

Hay otro post en el que hay cosas parecidas pero generales, en él hablo de las tablas y explico más a fondo que son los enlaces: trucos html.

Espero que te gusten y que uses algunos en tu blog y puedas mejorarlo mucho.

¿Cómo añadir código en blogger?

Para añadir código dentro de un post debes ir a la pestaña HTML que está junto a la de redactar.