ДомРуководство по созданию темы Blogger для начинающих: пустая страница Blogger

на25 сентября 2025 г.

205 вид

Руководство по созданию темы Blogger для начинающих: пустая страница Blogger

Это руководство для начинающих по созданию темы Blogger охватывает базовую структуру XML-кода, используемого в Blogger, а также настройку CSS для создания красивого и адаптивного дизайна блога. В нём также представлены ключевые элементы, такие как заголовок, контент, боковая панель и нижний колонтитул, а также примеры использования различных виджетов в Blogger, что упрощает читателям понимание и применение их при разработке собственных тем.

11 мин. прочтение

Руководство по созданию темы Blogger

список содержания показывать

Создайте «действительно пустую» пустую страницу с помощью HTML

1. Код темы Blogger пустая пустая страница 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>

—– css Ваш здесь —– Введите ваш css здесь.

Объясните базовый код

Этот код Самая базовая структура темы Blogger вместе с:

HTML-макет Blogger + пространство имен
Мета для мобильных устройств/настольных компьютеров
Извлечение данных блога, таких как названия страниц
Область для вставки CSS
Один раздел для вставки виджетов
Добавьте кредит ниже

Простой и удобный для создания минималистичных шаблонов Blogger.

✔ Этот раздел предназначен для объявления XML и определения пространств имен.

<?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 = Используется для тегов Blogger, таких как: <b:if>, <b:section>
xmlns:данные = Используется для извлечения данных из таких блогов, как data:blog.pageTitle
xmlns:expr = Используется для обработки различных выражений.

✔ Настройте Internet Explorer на отображение как IE7

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

Если это мобильный телефон → используйте адаптивную область просмотра.
Если это рабочий стол → установите ширину 1100 пикселей.

✔ Попросите Blogger включить контент `<head>` Стандарты блогеров

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

Такие как автоматические скрипты, различные метатеги

✔ Назовите веб-страницу по названию страницы блога.

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

Используйте данные, которые Blogger автоматически генерирует для вас.

✔ Раздел для вставки CSS темы

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

<![CDATA[ ]]> = Используется для вставки кода, который не может быть напрямую обработан XML, например CSS.

✔ Раздел отображения основного контента блогера

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

<b:section> Это раздел, в котором мы можем добавлять виджеты.
showaddelement='да' = Позволяет добавлять гаджеты в макет.

✔ Закрыть HTML-структуру

</body>
</html>

2. Тема 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=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 Структура у разных блоггеров

<?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 Добавить заголовок Blogger

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

3. Тема добавляет гаджеты/виджеты боковой панели.

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

Гаджеты/виджеты боковой панели В теме Blogger нам нужно добавить <b:section> Хранить в <body> Рядом основной (Раздел отображения постов)

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

объяснять

<?xml ...?> → บอกว่าเป็นไฟล์ XML ที่ Blogger ใช้แปลงเป็น HTML
xmlns:b → ใช้สำหรับแท็กของ Blogger เช่น <b:section>, <b:widget>
xmlns:данные → ใช้ดึงข้อมูล เช่น <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'/>

вместе с:

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>

объяснять

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

объяснять

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

⬆️ 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. Код темы левой боковой панели 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=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	หน้าที่
`б:`	ใช้แท็กระบบของ Blogger เช่น `<b:section>`, `<b:widget>`
`данные:`	ดึงข้อมูล เช่น `<data:blog.title/>`
`выражение:`	การเขียน 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 ส่วน `<body>`

✔ Header

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

Перетащите название блога, чтобы отобразить его.

✔ Layout: Sidebar + Main

<div class="container">

📌 Sidebar

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

является Область размещения виджетов такой как:

Популярный пост
Этикетка
HTML/JS
Профиль

Пользователи добавлены через страницу макета Blogger

📌 Main Content

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

Это сердце шаблона.
Отображать:

รายการโพสต์
บทความเต็ม
картина
Пагинация
Форма комментария

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

Условие: Прокрутите вниз > 200 пикселей → Показать кнопку

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

При нажатии → плавная прокрутка обратно наверх

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

ส่วน	Как это работает?
XML Namespace	Включить теги Blogger
Viewport	Создайте адаптивный сайт
all-head-content	Автоматические SEO-мета
Header	Закрепленная + Навигация
Container	Макет сетки из 2 колонок
Sidebar	Разместите виджеты со страницы «Макет»
Основной раздел	Автоматически отображать записи блога
CSS	Разработка всего пользовательского интерфейса
Responsive	Оптимизированный макет для мобильных устройств
Вернуться наверх	Кнопка автоматической прокрутки вверх

5. Боковая панель Blogger Full Functions слева и справа

<?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; /* Основной цвет, редактируемый /

–layout-max-width: 1200px; / Отрегулируйте ширину макета /

–sidebar-width: 250px; / Ширина боковой панели */

6. Удалить маркер (точку в начале).

(маркированный список вроде этого)

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

7. Добавьте простое изображение размером 20×20 пикселей.

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

8. Легко добавляйте иконки Font Awesome.

8.1 Добавьте Font Awesome CDN (если еще не доступно)

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

8.2 Добавьте значок Font Awesome и измените его размер.

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

8.2 Добавьте цвет к значкам Font Awesome

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

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

&amp;

9. Тема 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[
/* 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>

использовать & вместо & всегда

Шаблон должен содержать хотя бы один тег b:section.

10. Код шаблона Blogger (с 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>

Поле комментариев Facebook

Блоггер

admin.siammakemoney

на25 сентября 2025 г.

205 вид

Предыдущая статья

Руководство по созданию темы Blogger для начинающих: пустая страница Blogger

Руководство по созданию темы Blogger

Создайте «действительно пустую» пустую страницу с помощью HTML

1. Код темы Blogger пустая пустая страница Blogger

Объясните базовый код

✔ Этот раздел предназначен для объявления XML и определения пространств имен.

✔ Настройте Internet Explorer на отображение как IE7

✔ Установить размер разделенного экрана для мобильного устройства/компьютера

✔ Попросите Blogger включить контент <head> Стандарты блогеров

✔ Назовите веб-страницу по названию страницы блога.

✔ Раздел для вставки CSS темы

✔ Раздел отображения основного контента блогера

✔ Закрыть HTML-структуру

2. Тема Blogger (без боковой панели)

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

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

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

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

2.1 Структура у разных блоггеров

2.2 Добавить заголовок Blogger

3. Тема добавляет гаджеты/виджеты боковой панели.

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

объяснять

✅ 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 ของเว็บไซต์

объяснять

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

5.1 Main Content

5.2 Sidebar

🧩 6. Footer

объяснять

⬆️ 7. Back-to-Top Button

4. Код темы левой боковой панели Blogger + Добавить меню

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

🔶 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 ส่วน <body>

✔ Header

✔ Layout: Sidebar + Main

📌 Sidebar

📌 Main Content

✔ Footer

✔ Back-to-top Button + Script

ปุ่ม

Script การทำงาน

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

5. Боковая панель Blogger Full Functions слева и справа

6. Удалить маркер (точку в начале).

7. Добавьте простое изображение размером 20×20 пикселей.

8. Легко добавляйте иконки Font Awesome.

8.1 Добавьте Font Awesome CDN (если еще не доступно)

8.2 Добавьте значок Font Awesome и измените его размер.

8.2 Добавьте цвет к значкам Font Awesome

9. Тема Blogger добавляет красивое верхнее меню.

10. Код шаблона Blogger (с SEO)

15 бесплатных плагинов Управление ссылками Вставка ссылок Укорочение ссылок AFF в WordPress Сравнить

Читать далее

Как создать блоггера (за 3 минуты) для новичков и секретные советы, о которых вы не знали

10 кодов JavaScript для предотвращения копирования ❌ Не копируйте текст на сайте.

✔ Попросите Blogger включить контент `<head>` Стандарты блогеров

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

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

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

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

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

🔶 4.4 ส่วน `<body>`