💻¡Crea Plantilla HTML ¡Y Personaliza el estilo de tu blog!

Hola gente, ¿qué tal les va?

Muy atentos. ¡Hoy Mauro Ocampo nos trae un tutorial sobre ¡como Desarrollar una Plantilla html para ¡poder personalizar el estilo de nuestro blog!  

 

¿Sientes que tu blog de Blogger se ve como tantos otros?

¿Quieres que tu espacio en la web grite "¡este soy yo!" en cada rincón?

 Si la respuesta es un rotundo SÍ, has llegado al lugar indicado.

Hoy vamos a sumergirnos en el fascinante mundo del HTML una vez mas, para que tomes las riendas del diseño de tu blog de una vez por todas.

Olvídate de las plantillas predeterminadas que limitan tu creatividad.

Ha llegado el momento de construir algo único, algo que represente verdaderamente tu esencia.

 Y no te asustes por la palabra "código", ¡te guiaremos paso a paso, dejándote algunas etiquetas y contenido para que lo adaptes a la sección head de tu plantilla!

 

¿Para qué sirve crear tu propia plantilla HTML gratuita?

Quizás te preguntes: con tantas plantillas gratuitas disponibles, ¿por qué tomarme el trabajo de crear la mía?

La respuesta es simple: control y diferenciación.

Crear tu propia plantilla HTML te ofrece ventajas que las opciones prefabricadas y de dudosa procedencia simplemente no pueden igualar:

• Control Total sobre el Diseño: Eres el arquitecto de tu propio espacio.

 Cada elemento, desde los widgets; el ancho de la columna hasta la tipografía más pequeña, está bajo tu dominio.

• Optimización para SEO desde la Raíz: Al construir tu plantilla, puedes asegurarte de que sea ligera, rápida y esté estructurada de una manera que a los motores de búsqueda como Google les encante. ¡Puntos extra para tu posicionamiento!

• Experiencia de Usuario Única: Puedes diseñar el flujo de lectura y la interacción pensando específicamente en tus seguidores. ¿Quieres que un elemento destaque más que otro? Con tu propia plantilla, puedes hacerlo.

• Cero Costo, Máximo Valor: No necesitas invertir dinero para tener un diseño premium y exclusivo. Solo necesitas un poco de tiempo y ganas de aprender.

¿Qué ventajas tiene personalizar mi blog?

La Magia de la Personalización: Tu Marca, Tu Estilo

Personalizar tu blog en Blogger va mucho más allá de cambiar un par de colores. Se trata de construir una marca personal reconocible y fortalecer la comunidad que estás

creando.

Cuando alineas el diseño de tu blog con tu identidad, logras que tus visitantes te identifiquen al instante, sin importar dónde se encuentren en la web.

 

¿Para qué necesitamos hipervínculos desde el blog?

Aquí es donde la verdadera magia ocurre.

 Al insertar enlaces directos a tus plataformas con descripciones de cada uno de ellos, estás construyendo puentes entre tu contenido y tu comunidad:

• Logotipo y lema del Blog y Canal de YouTube: Tu firma visual y auditiva. Es lo primero que la gente reconocerá. Tener tu logotipo visible en tu blog crea una coherencia visual fundamental. Si tienes un canal de YouTube, ¡mostrar también su logo refuerza tu marca multiplataforma!

• Redes Sociales (Facebook, X): Son la extensión de la conversación. Permite que tus lectores te sigan en el día a día, vean contenido exclusivo y se sientan parte de algo más grande.

• Plataformas de Contenido (YouTube, Odysee, Anchor): Si creas contenido en video o podcast, es crucial que tus seguidores puedan encontrarlo fácilmente. Un enlace directo desde tu blog, dentro de tu universo digital, es la mejor invitación.

• Contacto Directo (Correo Electrónico): Ofrecer una vía de contacto profesional y directa es clave. Ya sea para colaboraciones, feedback o simplemente para que un seguidor te haga una pregunta, un enlace a tu email genera confianza y abre puertas.

Imagina esto: un lector disfruta de tu último post, ve tu logo, te reconoce de YouTube, hace clic en el ícono de X para seguirte y te envía un correo para felicitarte. Todo desde un mismo lugar. Eso, mi amigo, es crear un ecosistema digital exitoso.

 

Aquí les dejamos un ejemplo básico de algunas etiquetas y de la sección head que pueden adaptara su plantilla html:

 

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>insertar titulo propio!</title>

    <style>

 

A continuación, contenido de la sección “head”.

body {

            background-color: #f0f8ff; /* Color de fondo celeste claro */

            font-family: sans-serif; /* Fuente de letra común y legible */

            color: #333; /* Color de letra gris oscuro */

            text-align: center; /* Centrar el contenido horizontalmente */

            padding-top: 50px; /* Espacio superior para que el contenido no esté pegado al borde */

        }

h1 {

            color: #007bff; /* Color del título azul */

        }

 

        img {

            max-width: 300px; /* Ancho máximo de la imagen para que no sea demasiado grande */

            height: auto; /* Mantiene la proporción de la imagen */

            margin-top: 20px; /* Espacio superior debajo del texto */

            border: 2px solid #ccc; /* Borde gris claro alrededor de la imagen */

            border-radius: 5px; /* Bordes ligeramente redondeados */

        }

        p {

            margin-top: 20px; /* Espacio superior para el párrafo de la fecha */

            font-size: 1.2em; /* Tamaño de letra un poco más grande */

            color: #555; /* Color de letra gris más claro */

        }

 

¡Anímate a experimentar! Cambia los estilos, los colores y el orden para que se adapte perfectamente a tu estilo.

Tomar el control del HTML de tu blog es el paso definitivo para transformarlo de un simple pasatiempo a un proyecto digital serio y con identidad propia.

¡El poder está en tus manos!

 

¿Qué necesitamos? ¡

Olvídate de entornos de desarrollo complejos al principio. Para desarrollar tu plantilla, solo necesitas

•Una computadora con conexión a internet.

• un editor de texto plano (como el Bloc de Notas en Windows o TextEdit en Mac)

• Un navegador web (Chrome, Firefox, Edge, Safari, etc.).

•Un blog propio en Blogger de Google.

 ¡Eso es todo!

 

Tutorial: 💻 ¡Crea Plantilla HTML ¡y Personaliza el estilo de tu blog!

En este tutorial Mauro nos mostrará:

• Como abrir un blog de notas y comenzar a escribir el código estructurando la sintaxis mediante etiquetas html, tal como lo hemos explicado en el tutorial anterior al cual remitimos. 

• Como crear vínculos que redireccionen a enlaces externos.

• Como articular la sintaxis con el contenido de la descripción dentro de las etiquetas.

• Como seleccionar y copiar el contenido del blog de notas.

• Como ingresar desde crome a la aplicación Blogger y desde el menú, al diseño.

• Como ingresar para poder editar el gadget html/ javascript.

• Como seleccionar y eliminar el contenido de la plantilla que viene por defecto en el blog.

.

• Como pegar el contenido del código de nuestra plantilla desde el porta papeles.

• Como chequear la inserción del contenido del código

 • Como guardar los cambios y actualizar el widget.

• Como reingresar al blog sin necesidad de cerrar la aplicación.

•  Como navegar para ingresar a ver los cambios de estilo en nuestro blog producidos por la plantilla .

• Como interactuar en el contenido de la plantilla inserta en el blog mediante el uso de las teclas de navegación con una sola letra. 

• Como ingresar al enlace externo del blog que nos redirecciona a nuestro canal de Youtube.

 Como navegar por encabezados por la lista de los videos.

• Como interactuar con el reproductor de Youtuve reproduciendo y pausando el video.

• Como cotejar los cambios en nuestro blog desde otro navegador web.

 

La Descarga:

Les dejaré en la descarga:

• El audio tutorial (en los canales   Odysse y YouTube estará en video tutorial).

 

Y ya sabes, Si te gusta este contenido,

Apóyanos haciendo una donación:

Dona aquí en Paypal:

compártelo en: Facebook, X.

Deja un comentario sobre esta entrada.

Síguenos en X:

Abajo tienes el botón.

Ahora puedes seguirnos también en Facebook

Entra al Facebook de Tecnoconocimiento Accesible:

Abajo tienes el botón.

Suscríbete al blog:

Para solicitar el ingreso a nuestros grupos de WhatsApp o Telegram:

Puedes escribir al mail del blog con tus datos si deseas ingresar a los mismos.

Escucha todos nuestros audios tutoriales, cómodamente:

Entrando desde aquí a nuestro canal en Youtube:

Ahora también, en nuestro canal en Odysse:

Entra al canal de Tecnoconocimiento Accesible en Odysse:

O si prefieres escúchanos en:

Anchor:

Escuchanos en Anchor:

Ponte en contacto con nosotros, déjanos tus sugerencias, dudas, o comentarios,

abajo tienes un sencillo formulario,

o si lo prefieres,

 escríbenos al correo del blog:

tecnoconocimientoaccesible@gmail.com

Los aportes siempre serán bienvenidos.

cuando nos escribas por uno de los medios con alguna sugerencia, se publicará con tu nombre.

además, como ya se sabe, puedes publicar esta entrada en otro sitio, pero no te olvides citar la fuente.

Saludos, y hasta otro post.

 

Ingresa aquí para visitar el nuevo canal de Mauro Ocampo:

Descarga el Audio tutorial:

 

Tu primera web html sin ser un gurú informatico:

 

Como crear un blog y entradas en Blogger: