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.
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.
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
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í.
Creado: