HogarGuía para principiantes sobre cómo crear un tema de Blogger: página en blanco de Blogger

enseptiembre 25, 2025

204 vista

Guía para principiantes sobre cómo crear un tema de Blogger: página en blanco de Blogger

Esta guía para principiantes sobre cómo crear un tema de Blogger abarca la estructura básica del código XML utilizado en Blogger, así como la personalización de CSS para crear un diseño de blog atractivo y adaptable. También presenta elementos clave como el encabezado, el contenido, la barra lateral y el pie de página, junto con ejemplos de cómo usar varios widgets en Blogger, facilitando a los lectores su comprensión y aplicación en el desarrollo de su propio tema.

11 lectura mínima

Guía para crear temas de Blogger

lista de contenidos espectáculo

Crea una página en blanco “realmente vacía” con HTML

1. Código Blogger tema en blanco blogger página en blanco

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
  </b:skin>
 </head>
 <body>
  <b:section class='main' id='main' showaddelement='yes'/>
  <!-- Please Keep The Credits -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>
 </body>
</html>

—– css Tuyo aquí —– Ingresa tu css aquí.

Explicación del código básico

Este código es La estructura más básica del tema Blogger junto con:

Diseño HTML y de espacios de nombres de Blogger
Meta para dispositivos móviles y de escritorio
Recuperar datos del blog, como los nombres de las páginas
Área para insertar CSS
Una sección para insertar widgets
Añade crédito a continuación

Sencillo y fácil de usar para crear plantillas de Blogger minimalistas.

✔ Esta sección es para declarar XML y definir espacios de nombres.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

xmlns:b = Se utiliza para etiquetas de Blogger como: <b:if>, <b:section>
xmlns:datos = Se utiliza para extraer datos de blogs como datos:blog.pageTitle
xmlns:expr = Se utiliza para procesar varias expresiones.

✔ Configurar Internet Explorer para que se muestre como IE7

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

✔ Establecer el tamaño de pantalla dividida para dispositivos móviles y computadoras de escritorio

<b:if cond='data:blog.isMobile'>
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
   <meta content='width=1100' name='viewport'/>
</b:if>

Si es un teléfono móvil → utilice una ventana gráfica responsiva.
Si es un escritorio → configure el ancho a 1100px.

✔ Dile a Blogger que incluya contenido `<head>` Estándares de Blogger

<b:include data='blog' name='all-head-content'/>

Como scripts automáticos, varias metaetiquetas

✔ Nombra la página web a partir del nombre de la página del blog.

<title><data:blog.pageTitle/></title>

Utilice los datos que Blogger genera automáticamente para usted.

✔ Sección para insertar CSS del tema

<b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
</b:skin>

<![CDATA[ ]]> = Se utiliza para insertar código que no puede procesarse directamente mediante XML, como CSS.

✔ Sección de visualización de contenido principal de Blogger

</head>
<body>
  <b:section class='main' id='main' showaddelement='yes'/>

<b:section> Esta es la sección donde podemos agregar widgets.
showaddelement='sí' = Le permite agregar gadgets al diseño.

✔ Cerrar estructura HTML

</body>
</html>

2. Tema de Blogger (sin barra lateral)

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 

  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s;
    }
    a:hover {
      color: #008f7a;
    }

    header {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 15px 30px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #008f7a;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    nav li {
      font-weight: 500;
    }

    .container {
      max-width: 1100px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Blog Post Card */
    .post-card {
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover {
      transform: translateY(-4px);
    }

    .post-card h2 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: #222;
    }
    .post-card p {
      color: #666;
      font-size: 1rem;
    }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

</body>
</html>

<!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

<!– Header –> ส่วนหัวเมนู

<!– Content –> ส่วนนี้คือการดึงโพสมาแสดง

<!– Footer –> ส่วนท้าย

🧱 Parte superior del sitio web (encabezado)

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>

📰 Sección de contenido

<div class="container">
  <b:section id='main' class='main' showaddelement='yes'>
    <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
  </b:section>
</div>

Sección de contenido ¿Cómo funciona?

<b:section> = Área de widgets (organizada a través del diseño en Blogger)
<b:widget type="Blog"> = Mostrar publicaciones de Blogger
Blogger generará HTML interno como:
- Lista de publicaciones de la página de inicio
- Artículo completo en la página del post

📘 Pie de página

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href='//siammakemoney.com'>siammakemoney.com</a></p>
</footer>

2.1 Estructura en varios blogueros

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <!-- meta, title, CSS/JS -->
</head>

<body>
  <!-- header -->
  <!-- navigation -->
  <!-- main content -->
  <!-- sidebar -->
  <!-- footer -->
</body>
</html>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section>

<b:section class='content' id='content' showaddelement='yes'>
  <b:widget id='Blog1' type='Blog' title='Blog Posts'/>
</b:section>

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
  <b:widget id='Profile1' type='Profile' title='About Me'/>
</b:section>

<b:section class='footer' id='footer' showaddelement='yes'>
  <b:widget id='Attribution1' type='Attribution' title=''/>
</b:section>

2.2 Agregar un título de Blogger

<title><data:blog.pageTitle/></title>

3. El tema agrega gadgets/widgets a la barra lateral.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }

    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 2fr 1fr; /* Main 2 ส่วน / Sidebar 1 ส่วน */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <!-- Main -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

</body>
</html>

Gadgets/Widgets de la barra lateral En el tema de Blogger necesitamos agregar <b:section> Mantener <body> Al lado de principal (Sección de visualización de publicaciones)

✅ 3.1. Declaración XML y sección de espacio de nombres

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

explicar

<?xml ...?> → Indica que es un archivo XML que Blogger utiliza para convertirlo a HTML.
xmlns:b → Se utiliza para etiquetas de Blogger como: <b:section>, <b:widget>
xmlns:datos → Se utiliza para extraer datos como <data:blog.title/>
xmlns:expr → Úselo para insertar expresiones como expr:href='datos:blog.url'

✅ 3.2. `<head>` Encabezado del sitio web

3.2.1 Compatible con versiones anteriores de Internet Explorer

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

3.2.2 Ventana gráfica móvil/de escritorio

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,...' name='viewport'/>
<b:else/>
  <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
</b:if>

¿Cómo funciona?

Si accede al sitio web en su teléfono móvil → utilice la ventana gráfica optimizada para dispositivos móviles.
Si se trata de un ordenador de escritorio → utilice la pantalla completa.

3.2.3 Carga automática del encabezado de Blogger

<b:include data='blog' name='all-head-content'/>

junto con:

Meta del artículo
Open Graph
Esquema básico
Alimentar
Muy importante, no borrar.

3.2.4 Extraiga el nombre de la página como `<title>`

<title><data:blog.pageTitle/></title>

3.2.5 Cargar fuentes de Google

<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

🎨3.3 Todo el CSS (dentro `<b:skin>`)

<b:skin><![CDATA[
  ... CSS ...
]]></b:skin>

Blogger debe incluir CSS dentro. <b:skin> solo

🧱 4. Encabezado del sitio web

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>

explicar

<data:blog.title/> → Nombre del blog
Menú dispuesto de izquierda a derecha
Encabezado fijo CSS

📰 5. Diseño del contenedor de contenido

<div class="container">
  <main>
    <b:section id='main'>
      <b:widget type='Blog'/>
    </b:section>
  </main>

  <aside class="sidebar">
    <h3>Gadgets</h3>
    <b:section id='sidebar'/>
  </aside>
</div>

5.1 Contenido principal

<b:widget type='Blog' />

Es el corazón de Blogger.
espectáculo:

Lista de publicaciones
Artículo completo
paginación

5.2 Barra lateral

<b:section id='sidebar' ... />

Puedes agregar widgets desde el diseño como:

Publicaciones populares
HTML/JavaScript
Etiquetas
Anuncios

🧩 6. Pie de página

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href="//siammakemoney.com">...</a></p>
</footer>

explicar

Recuperar automáticamente el año y el nombre del blog
Añadir crédito
El color de fondo es negro.

⬆️ 7. Botón Volver arriba

<button id="back-to-top" class="back-to-top">↑</button>

Generalmente también debe haber algo de JS, como por ejemplo:


window.addEventListener('scroll', () => {
  document.getElementById('back-to-top').style.display =
    window.scrollY > 300 ? 'block' : 'none';
});


document.getElementById('back-to-top').onclick = () =>
  window.scrollTo({ top: 0, behavior: 'smooth' });

parte	¿Haciendo qué?
Espacio de nombres XML	Habilitar etiquetas de Blogger
Ventana gráfica	Sensible
contenido de toda la cabeza	SEO + Meta automático de Blogger
CSS	Diseñar todo el diseño
Encabezamiento	Logotipo + Menú
Recipiente	cuadrícula de 2 columnas
Blog1	Mostrar publicaciones del blog
Barra lateral	Coloque los widgets como desee.
Pie de página	Aviso de derechos de autor
Volver arriba	Botón de retroceso

4. Código del tema de la barra lateral izquierda de Blogger + Agregar menú

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: #008f7a; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 300px 1fr; /* Sidebar 300px / Main content flexible */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #008f7a;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover {
      background: #006f5a;
    }

    /* Responsive */
    @media screen and (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
      }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Sidebar + Main -->
  <div class="container">
    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Menu &amp; Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

<!– Sidebar (ซ้าย) –>

<!– Main content (ขวา) –>

🔷 Descripción general del código en este tema

Esto es Plantilla de Blogger de 2 columnas (barra lateral + principal) Con:

Encabezado fijo
Barra lateral de ancho fijo (300 px)
Contenido principal flexible
Diseño de postal
Pie de página
Botón de volver al inicio
Diseño adaptable
Pase el poste a través <b:widget type="Blog">

🔶 4.1. Declaración XML y sección de espacios de nombres

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

✔ Explicar

Esto es La estructura principal que deben utilizar los blogueros:

espacio de nombres	deber
`b:`	Utilice las etiquetas del sistema de Blogger como: `<b:section>`, `<b:widget>`
`datos:`	Extraer datos como `<data:blog.title/>`
`expr:`	Escribiendo expresiones como: `expr:href="datos:blog.homepageUrl"`

🔶4.2. `<head>` — Encabezado web

✔4.2.1 Ventana gráfica para dispositivos móviles

<b:if cond='data:blog.isMobile'>
  <meta content="width=device-width, initial-scale=1.0" />
<b:else/>
  <meta content="width=device-width, initial-scale=1.0" />
</b:if>

✔ 4.2.2 Agregar meta y scripts generados automáticamente por Blogger

<b:include data='blog' name='all-head-content'/>

Blogger agregará automáticamente lo siguiente:

Título / Descripción de la página
OpenGraph
Esquema del artículo
URL canónica
Alimentar
Widget CSS

Es una parte importante, no la borres.

✔ 4.2.3 Título de la página

<title><data:blog.pageTitle/></title>

Extraer nombres por página, como por ejemplo:

Inicio → Nombre del blog
Página de visualización de la publicación → Nombre de la publicación
Página con etiqueta → Nombre de la etiqueta

✔ 4.2.4 Descargar fuentes de Google

<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

Establecer la fuente en todo el sitio

🔶4.3. `<b:skin>` — Sección CSS de la plantilla

Blogger debe incluir todo el CSS dentro <b:skin><![CDATA[ ... ]]></b:skin>

✔ 4.3.1 Definir el estilo principal del sitio web.

body {
  font-family:'Kanit';
  background:#f7f9fc;
  color:#333;
}

Establecer color de fondo, fuente, color de texto

✔ 4.3.2 Encabezado fijo

header {
  position:sticky;
  top:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

Al desplazarse → El encabezado se adjunta a la parte superior

✔ 4.3.3 Menú de navegación

nav ul {
  display:flex;
  gap:20px;
  list-style:none;
}

Menú horizontal con Flexbox

✔ 4.3.4 Estructura de diseño de 2 columnas

.container {
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:20px;
}

columna	Ancho
Barra lateral	300px fijos
Contenido principal	1fr (totalmente estirable)

✔ 4.3.5 Tarjeta postal (para la lista de artículos)

.post-card {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

Crea hermosas postales

✔ 4.3.6 Caja de la barra lateral

.sidebar {
  background:#fff;
  border-radius:12px;
  padding:20px;
}

La barra lateral tiene un estilo similar a una tarjeta.

✔ 4.3.7 Pie de página

footer {
  background:#222;
  color:#eee;
  text-align:center;
}

✔ 4.3.8 Botón de volver al inicio

.back-to-top {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#008f7a;
  width:50px;
  height:50px;
  border-radius:50%;
  display:none;
}

Ocultar los botones por ahora.

✔4.3.9 Móvil responsivo

@media (max-width:900px) {
  .container {
    grid-template-columns:1fr;
  }
}

Móvil → Cambiar a 1 columna

🔶 4,4 partes `<body>`

✔ Encabezado

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

Tire del nombre del blog para mostrarlo

✔ Diseño: Barra lateral + Principal

<div class="container">

📌 Barra lateral

<aside class="sidebar">
  <b:section id='sidebar'/>
</aside>

es Área de colocación de widgets como:

Publicación popular
Etiqueta
HTML/JS
Profile

Usuarios añadidos a través de la página de Diseño de Blogger

📌 Contenido principal

<main>
  <b:section id='main'>
    <b:widget type='Blog'/>
  </b:section>
</main>

Este es el corazón de la plantilla.
Mostrar:

Lista de publicaciones
Artículo completo
imagen
Paginación
Formulario de comentarios

✔ Pie de página

<footer>
  © <data:blog.title/>
</footer>

✔ Botón Volver arriba + Script

botón

<button id="back-to-top" class="back-to-top">↑</button>

Guion de trabajo

window.addEventListener('scroll', () => {
  btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
});

Condición: Desplazarse hacia abajo > 200 px → Mostrar botón

btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Al hacer clic → desplazamiento suave hacia la parte superior

✨ Resumen de lo que hace este código

parte	¿Cómo funciona?
Espacio de nombres XML	Habilitar etiquetas de Blogger
Ventana gráfica	Crea un sitio web responsivo
contenido de toda la cabeza	Meta SEO automático
Encabezamiento	Sticky + Navegación
Recipiente	Diseño de cuadrícula de 2 columnas
Barra lateral	Colocar widgets desde la página de Diseño
Sección principal	Mostrar automáticamente las publicaciones del blog
CSS	Diseñar toda la interfaz de usuario
Sensible	Diseño optimizado para dispositivos móviles
Volver arriba	Botón de desplazamiento automático hacia arriba

5. Barra lateral izquierda y derecha de funciones completas de Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=1200, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>


  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* ---------- Variables ---------- */
    :root {
      --primary-color: #008f7a;
      --layout-max-width: 1200px;
      --sidebar-width: 250px;
    }

    /* ---------- Reset ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: var(--primary-color); }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: var(--primary-color); font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    /* ---------- Layout ---------- */
    .container {
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
      gap: 20px;
      max-width: var(--layout-max-width);
      margin: 30px auto;
      padding: 0 15px;
    }

    main { display: flex; flex-direction: column; }

    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* ---------- Sidebar ---------- */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-color); }

    /* ---------- Footer ---------- */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* ---------- Back to Top ---------- */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--primary-color);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover { background: darken(var(--primary-color), 10%); }

    /* ---------- Responsive ---------- */
    @media screen and (max-width: 1200px) {
      .container { grid-template-columns: 200px 1fr 200px; }
    }

    @media screen and (max-width: 900px) {
      .container { grid-template-columns: 1fr; }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Left Sidebar + Main + Right Sidebar -->
  <div class="container">
    <!-- Left Sidebar -->
    <aside class="sidebar">
      <h3>Left Menu</h3>
      <b:section id='left-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main Content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Right Sidebar -->
    <aside class="sidebar">
      <h3>Right Menu</h3>
      <b:section id='right-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to Top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

–primary-color: #008f7a; /* Color primario, editable /

–diseño-ancho-máximo: 1200px; / Ajustar el ancho del diseño /

–ancho de la barra lateral: 250px; / Ancho de la barra lateral */

6. Eliminar la viñeta (punto que va delante).

(viñeta como ésta)

ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

7. Agrega una imagen simple de 20×20 px.

<img src="https://example.com/icon.png" alt="icon" width="20" height="20">

8. Añade iconos de Font Awesome fácilmente.

8.1 Agregar CDN de Font Awesome (si aún no está disponible)

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' rel='stylesheet'/>

8.2 Agregue el ícono de Font Awesome y cambie su tamaño.

<i class="fa-solid fa-house" style="font-size:20px;"></i>

8.2 Agregar color a los iconos de Font Awesome

<style>
.icon-small {
  font-size: 20px;
  color: #000; /* เปลี่ยนสีไอคอนได้ */
}
</style>

<i class="fa-solid fa-heart icon-small"></i>

&amp;

9. El tema Blogger agrega un hermoso menú superior.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Reset body */
body {
  margin: 0;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4; /* สีพื้นหลัง */
}

/* Container เมนู */
.radio-inputs {
  position: relative;
  display: flex;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #31c7c1, #499b87, #4a715b, #3d4a3b, #262724);
  box-sizing: border-box;
  font-size: 17px;
  width: 80%;
  padding: 1rem 1rem 0 1rem;
}

/* ซ่อน radio จริง */
.radio-inputs .radio input {
  display: none;
}

/* ปุ่มเมนู */
.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0.8rem;
  color: #fff;
  transition: all 0.15s ease-in-out;
  position: relative;
}

/* ปุ่มที่ถูกเลือก */
.radio-inputs .radio input:checked + .name {
  background-color: #FFFFFF;
  font-weight: 600;
  color: #000;
}

/* Hover */
.radio-inputs .radio input + .name:hover {
  color: #fff;
}
.radio-inputs .radio input:checked + .name:hover {
  color: #000;
}

/* มุมโค้งสวย ๆ เวลาเลือก */
.radio-inputs .radio input:checked + .name::after,
.radio-inputs .radio input:checked + .name::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 0;
}

.radio-inputs .radio input:checked + .name::after {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0px 3px #FFFFFF;
}
.radio-inputs .radio input:checked + .name::before {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0px 3px #FFFFFF;
}
]]></b:skin>

 </head>
 <body>
  <!-- Navigation Menu -->
  <div class='radio-inputs'>
    <label class='radio'>
      <input checked='' name='radio' type='radio'/>
      <span class='name'>Home</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>HTML</span>
    </label>

    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>CSS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>JS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>PHP</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Name</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Menu</span>
    </label>
  </div>
  <!-- Main Section -->
  <b:section class='main' id='main' showaddelement='yes'/>
  

</body>

</html>

สามารถใส่ script ก่อนปิด </body> หรือ หาแท็ก <head>

usar & en cambio & siempre

La plantilla debe contener al menos una etiqueta b:section.

10. Código de plantilla de Blogger (con SEO)

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

  <!-- VIEWPORT -->
  <b:if cond='data:blog.isMobile'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'/>
  <b:else/>
    <meta name='viewport' content='width=1100'/>
  </b:if>

  <!-- Blogger HEAD -->
  <b:include data='blog' name='all-head-content'/>

  <!-- TITLE -->
  <title><data:blog.pageTitle/></title>

  <!-- ==========================
        SEO META TAGS
       ========================== -->

  <!-- Meta Description -->
  <meta name="description" expr:content="data:blog.metaDescription"/>

  <!-- Keywords -->
  <meta name="keywords" content="blogger, seo, website, travel, tutorial"/>

  <meta name="author" content="Your Name"/>

  <!-- Open Graph (Facebook / LINE) -->
  <meta property="og:title" expr:content="data:blog.pageTitle"/>
  <meta property="og:description" expr:content="data:blog.metaDescription"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" expr:content="data:blog.url"/>
  <meta property="og:image" expr:content="data:blog.postImageUrl"/>

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" expr:content="data:blog.pageTitle"/>
  <meta name="twitter:description" expr:content="data:blog.metaDescription"/>
  <meta name="twitter:image" expr:content="data:blog.postImageUrl"/>

  <!-- Canonical -->
  <link rel="canonical" expr:href="data:blog.url"/>

  <!-- Robots -->
  <meta name="robots" content="index, follow"/>
  <meta name="googlebot" content="index, follow"/>

  <!-- Schema.org -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "<data:blog.homepageUrl/>",
    "name": "<data:blog.title/>",
    "alternateName": "<data:blog.title/>"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="YOUR-FAVICON-URL.png"/>

  <!-- ==========================
        CSS ZONE
       ========================== -->
  <b:skin>
    <![CDATA[
      /* ----- Your CSS Here ----- */
      body { font-family: sans-serif; }
    ]]>
  </b:skin>

</head>

<body>

  <!-- MAIN CONTENT SECTION -->
  <b:section class='main' id='main' showaddelement='yes'/>

  <!-- CREDITS -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>

</body>
</html>

Cuadro de comentarios de Facebook

Bloguero

administrador.siammakemoney

enseptiembre 25, 2025

204 vista

Artículo anterior

Guía para principiantes sobre cómo crear un tema de Blogger: página en blanco de Blogger

Guía para crear temas de Blogger

Crea una página en blanco “realmente vacía” con HTML

1. Código Blogger tema en blanco blogger página en blanco

Explicación del código básico

✔ Esta sección es para declarar XML y definir espacios de nombres.

✔ Configurar Internet Explorer para que se muestre como IE7

✔ Establecer el tamaño de pantalla dividida para dispositivos móviles y computadoras de escritorio

✔ Dile a Blogger que incluya contenido <head> Estándares de Blogger

✔ Nombra la página web a partir del nombre de la página del blog.

✔ Sección para insertar CSS del tema

✔ Sección de visualización de contenido principal de Blogger

✔ Cerrar estructura HTML

2. Tema de Blogger (sin barra lateral)

🧱 Parte superior del sitio web (encabezado)

📰 Sección de contenido

Sección de contenido ¿Cómo funciona?

📘 Pie de página

2.1 Estructura en varios blogueros

2.2 Agregar un título de Blogger

3. El tema agrega gadgets/widgets a la barra lateral.

✅ 3.1. Declaración XML y sección de espacio de nombres

explicar

✅ 3.2. <head> Encabezado del sitio web

3.2.1 Compatible con versiones anteriores de Internet Explorer

3.2.2 Ventana gráfica móvil/de escritorio

3.2.3 Carga automática del encabezado de Blogger

3.2.4 Extraiga el nombre de la página como <title>

3.2.5 Cargar fuentes de Google

🎨3.3 Todo el CSS (dentro <b:skin>)

🧱 4. Encabezado del sitio web

explicar

📰 5. Diseño del contenedor de contenido

5.1 Contenido principal

5.2 Barra lateral

🧩 6. Pie de página

explicar

⬆️ 7. Botón Volver arriba

4. Código del tema de la barra lateral izquierda de Blogger + Agregar menú

🔷 Descripción general del código en este tema

🔶 4.1. Declaración XML y sección de espacios de nombres

✔ Explicar

🔶4.2. <head> — Encabezado web

✔4.2.1 Ventana gráfica para dispositivos móviles

✔ 4.2.2 Agregar meta y scripts generados automáticamente por Blogger

✔ 4.2.3 Título de la página

✔ 4.2.4 Descargar fuentes de Google

🔶4.3. <b:skin> — Sección CSS de la plantilla

✔ 4.3.1 Definir el estilo principal del sitio web.

✔ 4.3.2 Encabezado fijo

✔ 4.3.3 Menú de navegación

✔ 4.3.4 Estructura de diseño de 2 columnas

✔ 4.3.5 Tarjeta postal (para la lista de artículos)

✔ 4.3.6 Caja de la barra lateral

✔ 4.3.7 Pie de página

✔ 4.3.8 Botón de volver al inicio

✔4.3.9 Móvil responsivo

🔶 4,4 partes <body>

✔ Encabezado

✔ Diseño: Barra lateral + Principal

📌 Barra lateral

📌 Contenido principal

✔ Pie de página

✔ Botón Volver arriba + Script

botón

Guion de trabajo

✨ Resumen de lo que hace este código

5. Barra lateral izquierda y derecha de funciones completas de Blogger

6. Eliminar la viñeta (punto que va delante).

7. Agrega una imagen simple de 20×20 px.

8. Añade iconos de Font Awesome fácilmente.

8.1 Agregar CDN de Font Awesome (si aún no está disponible)

8.2 Agregue el ícono de Font Awesome y cambie su tamaño.

8.2 Agregar color a los iconos de Font Awesome

9. El tema Blogger agrega un hermoso menú superior.

10. Código de plantilla de Blogger (con SEO)

15 complementos gratuitos para administrar enlaces, insertar enlaces y acortar enlaces AFF en WordPress Comparar

Leer a continuación

Cómo crear un Blogger (en 3 minutos) para principiantes y consejos secretos que no conoces

10 Códigos JavaScript para evitar la copia ❌ No copie texto en el sitio web.

✔ Dile a Blogger que incluya contenido `<head>` Estándares de Blogger

✅ 3.2. `<head>` Encabezado del sitio web

3.2.4 Extraiga el nombre de la página como `<title>`

🎨3.3 Todo el CSS (dentro `<b:skin>`)

🔶4.2. `<head>` — Encabezado web

🔶4.3. `<b:skin>` — Sección CSS de la plantilla

🔶 4,4 partes `<body>`