Codigos HTML

 Pequeña recopilación de códigos de HTML para copiar y pegar, para insertar y usar en las páginas de un blog o sitio web. Permiten crear mensajes interactivos, animaciones, efectos y funciones útiles. Ejemplos prácticos de cómo usarlos.

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=”https://jascript0.blogspot.com/?m=1”>Ir a Jascript</a>

 

Tiempo necesario: 1 minuto.

Cómo añadir un enlace en HTML

1. Crea el enlace

   <a></a>
   

2. Añade el destino

   <a href=”https://jascript0.blogspot.com/?m=1”></a>

3. Coloca el anchor text

   <a href=”https://jascript0.blogspot.com/?m=1”>Ir a Jascript</a>

AÑADIR UN ENLACE A UNA IMAGEN

<a href=”https://jascript0.blogspot.com/?m=1”><img src=”http://ruta de tu foto.jpg” alt=”descripción” width=”200″ height=”300″ /></a>

 

PONER UN BOTÓN

Sin enlace:
<div align="center"><img title="titulo se ve al pasar el ratón" src="https://la ruta de dónde tengas la foto.jpg" alt="descripción de la foto" width="100" height="180" />

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>

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.

¿Por qué puedo tener fallos en el código al copiar y pegar?

Puede ser que no lo estés copiando completo, por lo que te recomiendo que pinches en el texto y pulses ctrl+a para seleccionarlo completo o que lo copies de un editor de texto con formato. Prueba a pegar el código en un editor de texto plano antes de pegarlo.