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 puedes hacer mediante código html, además estas son muy fáciles.
Conviene saber algunos trucos html que te ayuden a mejorar tu blog, además conocer html te valdrá 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 usar 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 y será mas difícil de mantener.
Este post al ser HTML de toda la vida lo puedes aplicar en blogspot, wordpress, tumblr, web normal…
Son elementos básicos en html y pequeños recursos muy sencillos que se usan a menudo.
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 a manita, 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.
https://yoblogueo.com/aclarar-las-fotos-cuando-el-raton-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="http://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:[email protected]» target=»_blank»> Mi correo </a>
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 esta función tienen pegas tipo que no te dejan poner el anchor text que tu quieras, te limitan archivos…
Poner un enlace de descarga con esta línea de código html es muy fácil.
<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 hacerlo sin tener que ir a la página del archivo vinculado.
<iframe style="width: 600px; height: 900px;" src="https://yoblogueo.com/wp-content/uploads/2016/11/Calendario-PDF-2017-cactus-b.pdf" width="700" height="900" frameborder="0"></iframe>
Hacer tablas con HTML
Las tablas son importantes por que a veces las necesitamos para organizar información, si no las hacemos con código al final recurrimos a hacer las tablas como 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.
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.
23/06/2017 @ 1:06 am
Buenísimo post! Había cosas que llevaba un tiempo queriendo hacer pero no encontraba la forma, gracias! Me voy a poner en práctica tus consejitos :D!
23/06/2017 @ 2:45 pm
Carmen a mi me encanta usar HTML en mi blog, además es un conocimiento básico que todo bloguero debe manejar, yo lo uso más que todo para embeber desde las redes sociales, y tal como lo comentas, tengo un archivo con todos los HTML que uso constantemente y que son parte de cada post, pienso que es una herramienta que nos facilita mucho la vida y le dan ese toque que es único de cada post. Gracias por compartir, me interesa más que todo el de aclarado de foto, el de insertar pdf y también el enlace con mail directo, así que me guardo tu post para consulta. Saludos.
23/06/2017 @ 7:57 pm
Unos consejos geniales. Yo trabajo con blogger y seguro que me vienen genial, gracias por compartirlosm bss
23/06/2017 @ 8:36 pm
La verdad es que soy muy torpe en este tema, utilizo a mi amigo blogger y no salgo de las plantillas, todas las veces que he intentado poner una foto mia de fondo pantalla he fallado estrepitosamente por lo que ya no me salgo de los parámetros y intente hacer el blog con wordpress y fui incapaz de tirarlo adelante no pude!!!! por lo que me decidi por blogger pues para mi mas funcional, tomo nota de tus indicaciones, yo cuelgo fotos y algún link de canciones y poca cosa mas, pero siempre viene bien aprender
24/06/2017 @ 3:48 am
Hola es increíble que conozcas tanto de códigos yo la verdad los veo y creo que me hablas en chino jajaj pero tratare de aprender para poder usarlos y mejorar mi blog Gracias
24/06/2017 @ 12:30 pm
Hola!! No sabes lo bien que me ha venido tu post, la verdad es que yo para estas cosas soy una negada y gracias a estos post me voy enterando un poco.Estos contenidos son los que nos ayudan un poco. Gracias por todos los pasos a seguir, cuando tenga un momento me voy a poner a ello con las tablas de HTML
Un saludo!
24/06/2017 @ 9:12 pm
¡Hola!
Me encanta tus post! los encuentro súper útiles. Para mi todo el tema de HTML, lo encuentro muy difícil pero tu lo explicas todo muy bien y fácil. Aunque tengo que confesar, que a veces, hay partes que las necesito leer un par de veces, para poderlas entender, jeje.
Así pues, es de agradecer toda la información que nos das. ^_^
25/06/2017 @ 2:57 am
Hola, Muy buenos consejos, yo no me manejo mucho en codigo html estoy recien aprendiendo, tomare todos tus consejos <3 Gracias, Saludos.
25/06/2017 @ 11:38 am
Uff…¡cuanta información en un post! tendré que volver a leerlo varias veces con calma.
La información es muy valiosa.
Como siempre gracias por la información.
Saludos.
25/06/2017 @ 11:43 pm
Me ha resultado muy interesante este post, lo he guardado en favoritos para poder testear todo lo que nos has comentado me ha gustado mucho sobre todo lo de desvanecer las fotos en los post. Muy útil la información.
26/06/2017 @ 3:01 am
Siempre que se pueda utilizar código html se me hace mejor que llenar el blog de plugins que muchas veces cargan el servidor. Eso sí, debes saber algunas cositas porque sino, te lo puedes tirar todo y eso no conviene, por eso tu post y tus consejos vienen genial, gracias tomo nota, excelentes ideas 🙂
26/06/2017 @ 7:51 am
Vaya ! Si que sabes mucho ! Yo he ido aprendiendo poco a poco de personas como tu, que nos comparten todo lo que saben. Muchas gracias !
26/06/2017 @ 8:08 am
Definitivamente ya soy fan de tu blog, son increíbles trucos… Muchas gracias, el que me parece muy, muy útil es el de insertar los archivos PDF y el enlace a correo electrónico, me vendrán genial ??
26/06/2017 @ 10:32 am
Están geniales los trucos! Me encantaría saber programar, pero se lo dejo todo a la plantilla que uso en WordPress.
26/06/2017 @ 7:43 pm
Ma dre mí a me dejas alucinada con este post. No tengo idea de HTML ni sabía que se pudieran hacer tantas cosas con esto pero lo tendré en cuenta. No son horas de ponerme a investigar ahora pero hay varios trucos que creo que sí voy a aplicar en mi blog así que con tu permiso este post se queda en favoritos, mil gracias por compartirlo!! Muaksss
26/06/2017 @ 9:07 pm
Tus artículos me super ayudan con mi blog! Tengo que ir paso a paso para corregir o mejor lo que ya tengo. Tengo conocimiento general de HTML pero tu post me ayudado a recordar algún cosas que deje en el olvido eje.
Gracias
26/06/2017 @ 9:29 pm
Que buenos trucos, me ha gustado mucho la opción para descargar pdf muy interesante este post, cuando se tiene un blog es encesario aprender el lenguaje de html para hacer mas atractivo tu espacio.
26/06/2017 @ 11:24 pm
Cada vez que te leo aprendo un montón. Al estar nueva en este mundo hay muchas cosas que a veces quiero hacer y que creo no poder por mera desinformación. Muchas gracias por todas las cosas que enseñas. Seguro eso mejorará el blog de muchos y sobre todo la experienciandel que lee. Gracias
27/06/2017 @ 12:25 pm
Excelente post nos dejas por aquí. Son temas básicos que en ocasiones no sabemos controlar y para nuestro blog es muy bueno dominar estos temas para darle otro resentimiento a las cosas que hacemos en nuestras páginas.
Saludos.
27/06/2017 @ 4:56 pm
Uuuuuoooorrraaaaleeeee!!! jajajaj soy nueva bloggera y si en efecto he estado batallando algo con todo este rollo, y vero que hay maneras, gracias por el post que veo para muchas es muy útil y entienden super bien, yooo creo que seguire leyendo y leyendo mas a profundidad para poder entender todo mejor y manejar mas mi Blog que por cierto esta en wordpress. Muchas gracias por compartir estos maravillosos Tips.
Saludos
27/06/2017 @ 10:16 pm
Ualaaaa,, super informacion y super practica e interesante para mi, lo del html siempre me ha gustado, me apasiona ponerme a ver como van estas cosas, pero en plan autodidacta lo hago, ya cuando leo a alguien que entiende me flipa y quiero ir ya a mi blog a probar las cosas que nos explicas, me gustan mucho estas entradas, me parecen bastante sencillas de entender (a ver… con algo de dificultad, no te quiero engañar, pero sencilla si te pones y vas paso a paso), vaya que espero que sigas con ello!!
29/06/2017 @ 6:33 pm
Hola guapa!
Estos consejitos nos van a venir de lujo a muchas! Yo he de admitir que mi página web la llevamos entre mi chico (él si que es informático) y yo, y algunas de estas cosillas si que me las enseñó! Pero lo de poner un PDF no se me había ocurrido nunca!
Así que muchas gracias y un besote enorme!