Todo lo que necesitas saber sobre HTML para iniciarte en Blogger

HTML es un lenguaje que debemos manejar para realizar mejoras en la plantilla y entradas de blogger. Hoy te enseñare lo básico y algún que otro consejo.

HTML para iniciarte en Blogger

➕Tabla de contenidos

Blogger tiene un panel de control para sus entradas interactivo, solo con ver un icono ya conocerás su uso, pero si deseamos optimizar al máximo el contenido, por ejemplo, adaptar algo en específico para nuestros post debemos empezar por lo básico en el uso de HTML.

Se utiliza para el desarrollo de páginas web y el que utiliza blogger, he ahí la importancia estimado Aprendiz. Por esto te explicare varios consejos y lo esencial para iniciarte en el mundo HTML en blogger.

¿Para qué sirve y cómo funciona el HTML en Blogger?

En sencillas palabras es el esqueleto de nuestro blogger porque este código define nuestra plantilla, widgets, entradas, imágenes y hasta el texto que agregamos, permitiéndonos incluso la incrustación de reproductores, scripts, entre mucho más.

Su funcionalidad es sencilla, por ejemplo, en blogger si queremos dejar este texto en negrita simplemente le damos clic al editor en “B” y listo, pero lo que hace blogger es agregar la siguiente etiqueta:

<b>este texto</b>

Todas las etiquetas que abramos debemos cerrarlas, si se fijan en el ejemplo anterior al final aparece la misma etiqueta con un Slash (/) que significa “Hasta aquí quiero que mi texto este en negrita”.

Códigos HTML básicos

Texto:

<i> = Texto en cursiva
<u> = Texto subrayado
<strike> = Texto tachado
<span style="color: red;"> = Texto de color rojo (estos estilos deben cerrarlos con la primera etiqueta en este caso seria </span>)
<span style="background-color: yellow;"> = Texto con fondo amarillo
Aquí hay muchos estilos más como font-size que sirve para cambiar el tamaño de tu texto.
<a href="https://www.facebook.com/aprendicesweb/"></a> = Texto con enlace
<div style="text-align: center;"> =
Elemento centrado
(pueden utilizar left, right o justify para ajustar la orientación de cualquier elemento)
lista
<ol>
<li>Esto es una lista</li>
<li>Siguenos en Facebook</li>
<li>Comparte esta entrada</li>
</ol>
Nos sirve para crear una lista, puedes utilizar la etiqueta <ul> para que aparezcan puntos. Más adelante cuando haga tutoriales de CSS aprenderán a darles estilos. <blockquote> =
es una cita.
<br/> = agrega un espacio después de un elemento
Imagenes:


<img height="100px" src="url de la imagen "width="100px" /> = Con este código se muestra una imagen (Fijense que ya se cerro con el “/” sin la necesidad de escribir la etiqueta </img>)
HTML para iniciarte en Blogger

Hay muchos códigos HTML que ya se pueden cerrar de esta forma.

Códigos HTML principales de una plantilla en blogger

En la opción Tema → Editar HTML te fijaras en el código de todo tu blog y necesitas conocer las etiquetas esenciales para saber dónde y que modificar cuando sigas mis tutoriales.

Lo primero es el <head></head> que muestra lo que contiene nuestra cabecera como etiquetas meta, titulo, en fin. Asegúrate de escribir aquí solo códigos que sean muy y enfatizo “muy” importantes para tu plantilla ya que es lo primero que carga tu blog y ayuda a la velocidad.

Luego tenemos la sección <b:skin></b:skin> donde añadiremos CSS que es la decoración de nuestro HTML del que hablare en próximos post.

Continuamos con <body></body> que es el cuerpo de nuestro blogger aquí va todo lo tenemos bajo nuestro menú como títulos de entradas, fechas, widgets, y mucho más.

Finalmente tenemos el <footer></footer> nuestro pie de página donde se muestran los créditos de blogger.

Encontrar rápidamente elementos HTML 

Consejo que te ahorrara horas, debes presionar ctrl + f y se abrirá una pestaña de búsqueda donde solo debes escribir la etiqueta que estás buscando y bum! 💣 Magia. Te dejo una imagen de ejemplo.

buscar código HTML en blogger - Captura

Atributos y estilos en HTML

CSS ahora es el área que se utiliza para esto, pero HTML también nos permite hacerlo. En los ejemplos de HTML básico puede ver el atributo “Style” con el que le di color y fondo a un texto. 

Existen muchos sitios donde puedes encontrar todos estos estilos así que no detallare en ellos, pero si en como modificarlos.

En el ejemplo de estilo “color: red” podríamos haber escrito “color: #FF0000” que es el color rojo en Hexadecimal. Encontraras muchas páginas que te ofrecen estos códigos en el San Google 🙌.

El tamaño de las imágenes u otros elementos también las podemos manejar. Fíjate nuevamente en el ejemplo de arriba, en la imagen aparece “height” que es la altura de la imagen en pixeles “100px”. Ese valor numérico es modificable al igual que el “width” para establecer el tamaño de las imágenes.

Width para diseños responsive se escribe como porcentaje, por ejemplo, si quieres la imagen de ancho completo se escribiría “width=100%”.

La recomendación aquí es no utilizar colores que sean poco visibles y atractivos para tu plantilla. En las imágenes con un tamaño original (la que subes) pequeño, no la agrandes demasiado ya que se verá “pixeleada”.

Precaución con todo lo que agregas a tu código

Script: noción para blogger novatos “ayuda a embellecer el blog, pero ralentiza la carga”

AprendicesWEB encontraran muchos tutoriales aquí y en otras web donde te enseñen a realizar un cambio o agregar un elemento a tu blogger que utilicen la etiqueta <script>. Esta etiqueta se suele ubicar en el <head> de nuestro blog, por lo que, puede ralentizar si lo saturamos.

Sean precavidos y cada vez que añadan uno utilicen PagespeedInsights para analizar la carga de su web.

Los temas Premium y sus “shortcodes”

Shortcodes (texto o elementos personalizados mediante scripts, HTML, CSS y más).

Mi bendita inmadurez web me hizo comprarme el tema Snews para blogger y utilice sus shortcodes durante todo un año en un blog warez (otra vez error de novato 😭).

Resulta que cuando me di cuenta lo lenta que estaba mi web por esta bendita plantilla llena de opciones que no utilizaba y me quise cambiar, todos mis post se des-configuraron, porque la nueva plantilla no tenía escrito todo ese HTML para que los shortcodes funcionaran correctamente.

Cuento corto, no utilicen estos códigos en sus blog si en un futuro piensan actualizar sus plantillas (que es lo recomendado cada ciertos años 👍). A no ser que tengas pleno conocimiento que luego podrás aplicar los cambios respectivos para que funcionen correctamente en la nueva plantilla.

Conclusión

No le tengas miedo al diseño web en lenguaje HTML si te das cuenta es muy sencillo y blogger hace prácticamente casi todo por nosotros. Como dije en mi primer post solo lánzate a la piscina y en el camino veremos, puedes aprender he internet es tu mejor amigo.

Si te gusta blogger y estás pensando en crear el tuyo o ya lo tienes recuerda que tenemos una sección donde podrás publicarlo para que te visiten.

AprendicesWEB disfruten los nuevos conocimientos, aplíquenlos y descubran mucho más de este mundo WEB. Saludos.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.