MaisonGuide de création de thème Blogger pour débutants : page blanche Blogger

surseptembre 25, 2025

485 vue

Guide de création de thème Blogger pour débutants : page blanche Blogger

Ce guide d'initiation à la création de thèmes Blogger aborde la structure de base du code XML utilisé par Blogger, ainsi que la personnalisation du CSS pour créer un blog au design attrayant et adaptatif. Il présente également les éléments clés tels que l'en-tête, le contenu, la barre latérale et le pied de page, et propose des exemples d'utilisation des différents widgets Blogger, facilitant ainsi la compréhension et l'application de ces concepts au développement de vos propres thèmes.

11 min de lecture

Guide de création de thèmes pour Blogger

liste des matières montrer

Créer une page blanche « vraiment vide » avec HTML

1. Thème Code Blogger, page vierge 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=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>

—– Votre CSS ici —– Entrez votre CSS ici.

Expliquer le code de base

Ce code est La structure de base du thème Blogger avec:

Blogger HTML + mise en page des espaces de noms
Méta pour mobile/ordinateur
Récupération des données du blog, telles que les noms de pages
Zone d'insertion CSS
Une section pour l'insertion de widgets
Ajoutez le crédit ci-dessous

Simple et facile à utiliser pour créer des modèles Blogger minimalistes.

✔ Cette section sert à déclarer le XML et à définir les espaces de noms.

<?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 = Utilisé pour les balises Blogger telles que : <b:if>, <b:section>
xmlns:données = Utilisé pour extraire des données de blogs tels que données:blog.pageTitle
xmlns:expr = Utilisé pour traiter diverses expressions.

✔ Configurer Internet Explorer pour qu'il s'affiche comme IE7

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

✔ Définir la taille de l'écran partagé pour mobile/ordinateur

<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>

S'il s'agit d'un téléphone mobile → utilisez une fenêtre d'affichage réactive.
S'il s'agit d'un ordinateur de bureau → définissez la largeur à 1100px.

✔ Demandez à Blogger d'inclure du contenu `<head>` Normes des blogueurs

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

Par exemple, des scripts automatiques, diverses balises méta

✔ Nommez la page web à partir du nom de la page du blog.

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

Utilisez les données que Blogger génère automatiquement pour vous.

✔ Section pour insérer le CSS du thème

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

<![CDATA[ ]]> = Utilisé pour insérer du code qui ne peut pas être traité directement par XML, tel que le CSS.

✔ Section d'affichage du contenu principal du blogueur

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

<b:section> C'est dans cette section que nous pouvons ajouter des widgets.
afficher l'élément='oui' = Permet d'ajouter des gadgets à la mise en page.

✔ Fermer la structure HTML

</body>
</html>

2. Thème Blogger (sans barre latérale)

<?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 –> ส่วนท้าย

🧱 ส่วนบนของเว็บไซต์ (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 Section)

<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>

ส่วนเนื้อหา ทำงานอย่างไร?

<b:section> = พื้นที่ใส่ widget (จัดผ่าน Layout ใน Blogger)
<b:widget type="Blog"> = แสดงโพสต์ของ Blogger
Blogger จะ generate HTML ด้านใน เช่น:
- รายการโพสต์ในหน้าแรก
- ตัวเต็มบทความในหน้าโพสต์

📘 ส่วนท้าย (Footer)

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

2.1 Structure chez différents blogueurs

<?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 Ajouter un titre Blogger

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

3. Le thème ajoute des gadgets/widgets à la barre latérale.

<?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 barre latérale Dans le thème Blogger, nous devons ajouter <b:section> Gardez-le <body> À côté de principal (Section d'affichage des publications)

✅ 3.1. ส่วนประกาศ XML และ Namespace

<?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'>

expliquer

<?xml ...?> → บอกว่าเป็นไฟล์ XML ที่ Blogger ใช้แปลงเป็น HTML
xmlns:b → ใช้สำหรับแท็กของ Blogger เช่น <b:section>, <b:widget>
xmlns:données → ใช้ดึงข้อมูล เช่น <data:blog.title/>
xmlns:expr → ใช้ใส่นิพจน์ เช่น expr:href='data:blog.url'

✅ 3.2. `<head>` ส่วนหัวของเว็บไซต์

3.2.1 รองรับ Internet Explorer เก่า

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

3.2.2 Viewport สำหรับมือถือ / เดสก์ท็อป

<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>

ทำงานอย่างไร?

ถ้าเข้าเว็บด้วยมือถือ → ใช้ viewport แบบ mobile friendly
ถ้าเป็น desktop → ใช้แบบเต็มหน้าจอ

3.2.3 โหลดส่วน head อัตโนมัติของ Blogger

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

avec:

meta ของบทความ
Open Graph
Schema พื้นฐาน
Feed
สำคัญมาก ห้ามลบ

3.2.4 ดึงชื่อหน้าเป็น `<title>`

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

3.2.5 โหลด Google Fonts

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

🎨3.3 CSS ทั้งหมด (ภายใน `<b:skin>`)

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

Blogger ต้องใส่ CSS ภายใน <b:skin> เท่านั้น

🧱 4. ส่วน 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>

expliquer

<data:blog.title/> → ชื่อบล็อก
เมนูเรียงจากซ้ายไปขวา
Header Sticky ตาม CSS

📰 5. Layout บริเวณเนื้อหา (Content Container)

<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 Main Content

<b:widget type='Blog' />

เป็นหัวใจของ Blogger
แสดง:

รายการโพสต์
บทความเต็ม
pagination

5.2 Sidebar

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

สามารถเพิ่ม widget จาก Layout เช่น:

Popular Posts
HTML/JavaScript
Labels
Ads

🧩 6. Footer

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

expliquer

ดึงปีและชื่อบล็อกอัตโนมัติ
ใส่เครดิต
สีพื้นหลังเป็นดำ

⬆️ 7. Back-to-Top Button

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

ปกติจะต้องมี JS ด้วย เช่น:


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' });

ส่วน	ทำอะไร
XML Namespace	ทำให้ใช้งานแท็ก Blogger ได้
Viewport	Responsive
all-head-content	SEO + Meta auto จาก Blogger
CSS	ออกแบบ Layout ทั้งหมด
Header	โลโก้ + เมนู
Container	Grid 2 คอลัมน์
Blog1	แสดงโพสต์ของบล็อก
Sidebar	วาง widget ได้ตามต้องการ
Footer	ข้อความลิขสิทธิ์
Back-to-Top	ปุ่มกลับด้านบน

4. Code du thème de la barre latérale gauche de Blogger + Ajouter un menu

<?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 (ขวา) –>

🔷 ภาพรวมของโค้ดในธีมนี้

นี่คือ Template Blogger แบบ 2 คอลัมน์ (Sidebar + Main) ที่มี:

Header sticky
Sidebar fixed width (300px)
Main content flexible
Post card design
Footer
Back-to-top button
Responsive layout
ดึงโพสต์ผ่าน <b:widget type="Blog">

🔶 4.1. ส่วนประกาศ XML และ Namespace

<?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'>

✔ อธิบาย

นี่คือ โครงสร้างหลักที่ Blogger ต้องใช้:

namespace	หน้าที่
`b:`	ใช้แท็กระบบของ Blogger เช่น `<b:section>`, `<b:widget>`
`data:`	ดึงข้อมูล เช่น `<data:blog.title/>`
`expr:`	การเขียน expression เช่น `expr:href="data:blog.homepageUrl"`

🔶 4.2. `<head>` — ส่วนหัวของเว็บ

✔4.2.1 Viewport สำหรับมือถือ

<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 ใส่ meta และ script อัตโนมัติของ Blogger

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

Blogger จะใส่สิ่งต่อไปนี้ให้อัตโนมัติ:

Title / Description ของหน้า
OpenGraph
Schema บทความ
Canonical URL
Feed
CSS widget

เป็นส่วนสำคัญ ห้ามลบ

✔ 4.2.3 Title ของหน้า

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

ดึงชื่อตามหน้า เช่น:

หน้าแรก → ชื่อบล็อก
หน้าที่แสดงโพสต์ → ชื่อโพสต์
หน้าที่มี label → ชื่อ label

✔ 4.2.4 โหลดฟอนต์ Google

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

ตั้งค่าฟอนต์ทั่วเว็บไซต์

🔶 4.3. `<b:skin>` — ส่วน CSS ของเทมเพลต

Blogger ต้องใส่ CSS ทั้งหมดภายใน <b:skin><![CDATA[ ... ]]></b:skin>

✔ 4.3.1 กำหนดสไตล์หลักของเว็บไซต์

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

กำหนดสีพื้นหลัง, ฟอนต์, สีข้อความ

✔ 4.3.2 Header Sticky

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

เมื่อเลื่อนหน้า → Header ติดด้านบน

✔ 4.3.3 Navigation Menu

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

เมนูเรียงเป็นแนวนอนด้วย Flexbox

✔ 4.3.4 โครงสร้าง Layout แบบ 2 คอลัมน์

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

คอลัมน์	ความกว้าง
Sidebar	300px แบบตายตัว
Main content	1fr (ยืดได้เต็มที่)

✔ 4.3.5 Post Card (สำหรับรายการบทความ)

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

สร้างการ์ดโพสต์แบบสวยงาม

✔ 4.3.6 Sidebar Box

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

ช่อง Sidebar มีสไตล์เหมือนการ์ด

✔ 4.3.7 Footer

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

✔ 4.3.8 ปุ่ม Back-to-top

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

ซ่อนปุ่มไว้ก่อน

✔4.3.9 Responsive Mobile

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

มือถือ → เปลี่ยนเป็น 1 คอลัมน์

🔶 4,4 parties `<body>`

✔ Header

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

Tirez sur le nom du blog pour l'afficher

✔ Layout: Sidebar + Main

<div class="container">

📌 Sidebar

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

est Zone de placement des widgets tel que:

Article populaire
Étiquette
HTML/JS
Profil

Utilisateurs ajoutés via la page de mise en page de Blogger

📌 Main Content

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

Voici le cœur du modèle.
Afficher:

รายการโพสต์
บทความเต็ม
image
Pagination
Formulaire de commentaires

✔ Footer

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

✔ Back-to-top Button + Script

ปุ่ม

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

Script การทำงาน

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

Condition : Défilez vers le bas > 200 px → Afficher le bouton

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

En cliquant dessus → retour fluide en haut de la page

✨ สรุปสิ่งที่โค้ดนี้ทำทั้งหมด

ส่วน	Comment ça marche ?
XML Namespace	Activer les balises Blogger
Viewport	Créez un site web adaptatif
all-head-content	Méta SEO automatique
Header	Navigation
Container	Mise en page en grille à 2 colonnes
Sidebar	Placez les widgets depuis la page de mise en page
Section principale	Afficher automatiquement les articles de blog
CSS	Concevoir l'interface utilisateur complète
Responsive	Mise en page optimisée pour mobile
Retour en haut de page	bouton de défilement automatique vers le haut

5. Fonctionnalités complètes de Blogger : barre latérale gauche et droite

<?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; /* Couleur principale, modifiable /

–layout-max-width: 1200px; / Ajuster la largeur de la mise en page /

–largeur de la barre latérale : 250px ; / Largeur de la barre latérale */

6. Supprimez la puce (le point devant).

(une puce comme celle-ci)

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

7. Ajoutez une image simple de 20×20 px.

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

8. Ajoutez facilement des icônes Font Awesome.

8.1 Ajouter le CDN Font Awesome (s'il n'est pas déjà disponible)

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

8.2 Ajoutez l'icône Font Awesome et redimensionnez-la.

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

8.2 Ajouter de la couleur aux icônes Font Awesome

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

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

&amp;

9. Le thème Blogger ajoute un magnifique menu supérieur.

<?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>

utiliser & plutôt & toujours

Le modèle doit contenir au moins une balise b:section.

10. Code du modèle Blogger (avec 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>

Boîte de commentaires Facebook

Blogueur

admin.siammakemoney

surseptembre 25, 2025

485 vue

Article précédent

Comprend le code JS de base de données HTML CSS

Article suivant

Guide de création de thème Blogger pour débutants : page blanche Blogger

Guide de création de thèmes pour Blogger

Créer une page blanche « vraiment vide » avec HTML

1. Thème Code Blogger, page vierge Blogger

Expliquer le code de base

✔ Cette section sert à déclarer le XML et à définir les espaces de noms.

✔ Configurer Internet Explorer pour qu'il s'affiche comme IE7

✔ Définir la taille de l'écran partagé pour mobile/ordinateur

✔ Demandez à Blogger d'inclure du contenu <head> Normes des blogueurs

✔ Nommez la page web à partir du nom de la page du blog.

✔ Section pour insérer le CSS du thème

✔ Section d'affichage du contenu principal du blogueur

✔ Fermer la structure HTML

2. Thème Blogger (sans barre latérale)

🧱 ส่วนบนของเว็บไซต์ (Header)

📰 ส่วนเนื้อหา (Content Section)

ส่วนเนื้อหา ทำงานอย่างไร?

📘 ส่วนท้าย (Footer)

2.1 Structure chez différents blogueurs

2.2 Ajouter un titre Blogger

3. Le thème ajoute des gadgets/widgets à la barre latérale.

✅ 3.1. ส่วนประกาศ XML และ Namespace

expliquer

✅ 3.2. <head> ส่วนหัวของเว็บไซต์

3.2.1 รองรับ Internet Explorer เก่า

3.2.2 Viewport สำหรับมือถือ / เดสก์ท็อป

3.2.3 โหลดส่วน head อัตโนมัติของ Blogger

3.2.4 ดึงชื่อหน้าเป็น <title>

3.2.5 โหลด Google Fonts

🎨3.3 CSS ทั้งหมด (ภายใน <b:skin>)

🧱 4. ส่วน Header ของเว็บไซต์

expliquer

📰 5. Layout บริเวณเนื้อหา (Content Container)

5.1 Main Content

5.2 Sidebar

🧩 6. Footer

expliquer

⬆️ 7. Back-to-Top Button

4. Code du thème de la barre latérale gauche de Blogger + Ajouter un menu

🔷 ภาพรวมของโค้ดในธีมนี้

🔶 4.1. ส่วนประกาศ XML และ Namespace

✔ อธิบาย

🔶 4.2. <head> — ส่วนหัวของเว็บ

✔4.2.1 Viewport สำหรับมือถือ

✔ 4.2.2 ใส่ meta และ script อัตโนมัติของ Blogger

✔ 4.2.3 Title ของหน้า

✔ 4.2.4 โหลดฟอนต์ Google

🔶 4.3. <b:skin> — ส่วน CSS ของเทมเพลต

✔ 4.3.1 กำหนดสไตล์หลักของเว็บไซต์

✔ 4.3.2 Header Sticky

✔ 4.3.3 Navigation Menu

✔ 4.3.4 โครงสร้าง Layout แบบ 2 คอลัมน์

✔ 4.3.5 Post Card (สำหรับรายการบทความ)

✔ 4.3.6 Sidebar Box

✔ 4.3.7 Footer

✔ 4.3.8 ปุ่ม Back-to-top

✔4.3.9 Responsive Mobile

🔶 4,4 parties <body>

✔ Header

✔ Layout: Sidebar + Main

📌 Sidebar

📌 Main Content

✔ Footer

✔ Back-to-top Button + Script

ปุ่ม

Script การทำงาน

✨ สรุปสิ่งที่โค้ดนี้ทำทั้งหมด

5. Fonctionnalités complètes de Blogger : barre latérale gauche et droite

6. Supprimez la puce (le point devant).

7. Ajoutez une image simple de 20×20 px.

8. Ajoutez facilement des icônes Font Awesome.

8.1 Ajouter le CDN Font Awesome (s'il n'est pas déjà disponible)

8.2 Ajoutez l'icône Font Awesome et redimensionnez-la.

8.2 Ajouter de la couleur aux icônes Font Awesome

9. Le thème Blogger ajoute un magnifique menu supérieur.

10. Code du modèle Blogger (avec SEO)

Comprend le code JS de base de données HTML CSS

Créez un site web d'annuaire grâce aux outils d'IA de Google Sheets avec Softr – c'est facile et gratuit ! 💯

Lire la suite

Créez un site web d'annuaire grâce aux outils d'IA de Google Sheets avec Softr – c'est facile et gratuit ! 💯

✔ Demandez à Blogger d'inclure du contenu `<head>` Normes des blogueurs

✅ 3.2. `<head>` ส่วนหัวของเว็บไซต์

3.2.4 ดึงชื่อหน้าเป็น `<title>`

🎨3.3 CSS ทั้งหมด (ภายใน `<b:skin>`)

🔶 4.2. `<head>` — ส่วนหัวของเว็บ

🔶 4.3. `<b:skin>` — ส่วน CSS ของเทมเพลต

🔶 4,4 parties `<body>`