yo-blogueo Idea guardada 4 veces
Sé la primera persona en valorar esta idea Valorar

Los mejores trucos HTML para tu blog que no te puedes perder

Los mejores trucos HTML para tu blog que no te puedes perder

Hay cosas que sólo las podemos hacer mediante código html y conviene saber algunos trucos que te ayuden a mejorar tu blog ya sea en blogger o wordpress.

En este post hay algunos trucos html para que puedas controlar un poco más tu diseño y hacer cosas a mano que vas a necesitar para tus post , además así si no has usado nunca código te vendrán bien porque son muy fáciles.

Por qué es importante saber hacer algunas cosas con HTML en los blogs

Es importante saber usar los elementos html en tu blog porque te permiten mayor control de lo que estás haciendo en tu diseño.

A veces las plantillas incluyen algunos tipos de constructores que pesan mucho y cuando quitas la plantilla puede que te queden restos de código a la vista que no funcionan, si lo haces a mano lo tendrás siempre.
trucos html para tu blog


Si trabajas con blogspot (blogger para los amigos) es importante que comiences a usar html para maquetar post y familiarizarte ya que es la mejor forma de personalizar tu contenido, en caso de plantillas muy antiguas te vendrá muy bien.

Si eres usuario de WordPress te conviene usar html en algunos casos antes que recurrir a un plugin, a veces es una línea de código la que tienes que añadir y un plugin es una medida desproporcionada, si vas sumando plugins al final tu instalación tendrá más posibilidades de tener problemas.
los mejores plugins de wordpress


Este post al ser HTML de toda la vida lo puedes aplicar en blogspot, wordpress, tumblr, web normal…

Son trucos y pequeños recursos muy sencillos que se usan mucho, además te vendrán muy bien si eres una persona a la que le guste tener un blog a punto.

Antes de todo dos consejos:

Saca copia de todo antes de ponerte a enredar y elije un editor de texto plano

editores de texto plano para blogs


Poner enlaces en HTML

Insertar enlaces en cualquier parte de tu blog es muy fácil, aunque los editores como wordpress y blogger los ponen solos hay elementos como en los widgets que los tienes que poner tu por lo que vamos a ver como funciona un enlace.

Un enlace es esto: <a></a> dependiendo de a qué queramos que enlace y como queremos que se comporte el enlace le vamos añadiendo cosas:

A la etiqueta de apertura “a” le tenemos que decir a dónde queremos ir por ello colocamos la etiqueta href que quiere decir “Hypertext reference” referencia al enlace para nosotros la ruta absoluta con su http://

<a href=”a dónde va nuestro enlace”></a>

Este enlace no se vería porque no tenemos un anchor text, el texto de ancla voy a poner el más popular:

<a href=”a dónde va nuestro enlace”>Pinche aquí</a>

Después de indicar a dónde nos lleva el enlace podemos poner como queremos que se porte, por ejemplo:

target=”_blank” en una página nueva

target=”_self” en la misma página

target=”_new” otra página y otra pestaña

Podemos indicar la relación la etiqueta rel de la que hablamos en los post sobre enlazar bien para mejorar el SEO este es un motivo por el cual hay mucha gente que pone enlaces manualmente para poder dar nofollow sin necesidad de plugins.

rel=”follow”

rel=”nofollow”

<a href="http://a-donde-va-el-enlace" target="_blank" rel="nofollow">YO SOY EL TEXTO QUE MARCA EL ENLACE</a>

Poner enlaces no es un truco de html sino es lo más básico y necesario que vas a tener que hacer.

Poner una foto con un enlace:

Este recurso es muy útil por ejemplo para poner imágenes en los widgets o en otras partes en las que no tengamos editores, a aparte podemos añadir código css para hacer efectos de desvanecimiento o color en las fotos, añadir bordes y muchas más cosas que nos ayuden a personalizar nuestra web.

Aclarar las fotos cuando el ratón pasa por encima en blogger

La manera de colocar una foto a mano en un post es como si insertásemos un enlace pero en lugar del anchor text colocamos la imagen que queremos insertar dentro de la etiqueta <img>, dentro de esta etiqueta va el parámetro src= que quiere decir origen o sea la ruta dónde tenemos la imagen, ya puede ser dentro del blog o en otro lugar.

<img src=”https://ruta de la imagen”>

Como puedes ver también podemos controlar el ancho, el alto o la proporción de la foto

<a href="http://a-donde-va-el-enlace" target="_blank"><img src="https://direccion-de-donde-tienes-la-foto-o-ruta" width="320"></a>

Poner un enlace con tu mail directo:

Hay muchas referencias útiles pero la de mailto: es muy importante porque abre outlook u otro cliente de correo para enviar un mail, este enlace es muy útil para las firmas de correo, RRSS y en lugares dónde no pongas un formulario de contacto.

Los enlaces de correo son los más útiles de una web

<a href=”mailto:carmen@yoblogueo.com” target=”_blank”> Mi correo </a>

Como añadir un formulario de contacto en blogger

Enlace para descarga:

Si en tu blog hay archivos para descargar, este enlace te va a venir bien, ya que los plugins que lo hacen tienen pegas tipo que no te dejan poner el anchor text que tu quieras, te limitan archivos… y es tan fácil con esta línea de código html para descargar cualquier archivo…

<a href="archivo.exe">Descripción del enlace </a>

Insertar un PDF en cualquier parte de tu blog

Esto mola mucho porque hay empresas que manejan tarifas, o gente que hace dossiers y presentaciones que no van a ponerse a pegarlas en jpg porque se verían mal, incrustar un PDF está muy bien para que pasen tiempo en página y si quieren imprimir o descargar puedan

<iframe src="/wp-content/uploads/2016/11/Calendario-PDF-2017-cactus-b.pdf" width="700" height="900" frameborder="0"></iframe>

Si quieres descargar más calendarios o planners te dejo los enlaces:

Planificadores semanales gratuitos para descargar en PDF

Calendario 2017 gratis con planner en pdf imprimible e interactivo

Hacer tablas con HTML

Las tablas son importantes por que a veces las necesitamos y al final recurrimos a imágenes cosa que quizás no es tan beneficioso para el SEO, por eso usar tablas hechas en HTML son una buena práctica.

Es importante usar tablas en html porque nos ayudan a ordenar la información y son un recurso muy utilizado.

La etiqueta HTML que define la tabla es table, <table></table>

Entre esa etiqueta de inicio y cierre deben ir las filas horizontales que se definen con la etiqueta <tr></tr> que viene de table row

Y dentro tenemos las celdas con su etiqueta correspondiente <td></td>

<table><tr><td><img src="punto.gif" height="5"></td></tr> por ejemplo: <code> <table> <tbody> <tr> <td>hola</td> <td>adios</td> </tr> <tr> <td>gato</td> <td>perro</td> </tr> </tbody> </table> </code>

hola adios
gato perro

Hola Adiós Perro Gato
Os las pongo sin estilos porque por lo general los themes del blog tienen lo suyos, aunque al tema de las tablas le dedicaré un post entero ya que creo que es muy importante.

Bueno espero que os hayan gustado estos conceptos básicos de HTML que son tan útiles para cualquiera que tenga un blog.

Tengo preparado algún post más sobre este tipo de tips con código que espero que os gusten.

.

Fuente: este post proviene de yo-blogueo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo crear los mejores títulos para post

Cómo crear los mejores títulos para post Los títulos para post representan uno de los elementos más importantes para conseguir visitas, seguidores e incluso conversiones en nuestro blog. Para crear lo ...

Aprende a ahorrar gestionando tu dinero

Aprende a ahorrar gestionando tu dinero ¿Dificultades para llegar a fin de mes? Seguro que  no paran de decirte «aprende a ahorrar». Lo primero de todo ¡ten paciencia!. Entre tú y yo, ahorra ...

Recomendamos

Relacionado

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

HTML: Nivel A1

Errores HTML de principiantes.

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web. El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de ...

Tips enlaces

Hacer que todos los enlaces de tu blog sean nofollow automáticamente

Hoy vamos a hacer que los enlaces de nuestro blog salgan por defecto nofollow de una forma muy rápida, vamos de golpe. Hace poco hablábamos sobre como usar los enlaces nofollow de manera correcta y ha despertado bastante interés, tanto que me han preguntado si existe forma de hacer que salgan automaticamente nofollow todos los enlaces del blog. Querer que aparezcan nofollow automaticamente en toda ...

Redes sociales Uncategorized Apariencia ...

Botones de click to tweet para tu blog y como ponerlos

Botones de click to tweet para tu blog y como ponerlos en wordpress y blogspot. Tenemos que incitar a nuestros lectores a que compartan nuestro contenido en las redes sociales para darnos a conocer. Una manera es conseguir que compartan nuestros post en Twitter, la mejor manera de hacerlo es mediante los famosos “clic to Tweet”. Existen muchos plugins sociales para Twitter o Facebook   ...

Tips enlaces

Hacer que todos los enlaces de tu blog sean nofollow automáticamente

Hoy vamos a hacer que los enlaces de nuestro blog salgan por defecto nofollow de una forma muy rápida, vamos de golpe. Hace poco hablábamos sobre como usar los enlaces nofollow de manera correcta y ha despertado bastante interés, tanto que me han preguntado si existe forma de hacer que salgan automaticamente nofollow todos los enlaces del blog. Querer que aparezcan nofollow automaticamente en toda ...