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:
compártelo en: Facebook, X.
Deja un comentario sobre esta entrada.
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:
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:
Tu
primera web html sin ser un gurú informatico:
Como
crear un blog y entradas en Blogger:
