Homeคู่มือสร้าง ธีม Blogger ฉบับเริ่มต้น blogger blank page

บนกันยายน 25, 2025

มุมมอง 195

คู่มือสร้าง ธีม Blogger ฉบับเริ่มต้น blogger blank page

คู่มือสำหรับผู้เริ่มต้นในการสร้างธีม Blogger โครงสร้างพื้นฐานของโค้ด XML ที่ใช้ใน Blogger รวมถึงวิธีการปรับแต่ง CSS เพื่อออกแบบหน้าตาของบล็อกให้สวยงามและตอบสนองต่ออุปกรณ์ต่างๆ นอกจากนี้ยังแนะนำเกี่ยวกับองค์ประกอบหลักที่สำคัญ เช่น ส่วนหัว (header), เนื้อหา (content), แถบด้านข้าง (sidebar) และส่วนท้าย (footer) พร้อมทั้งตัวอย่างการใช้งานวิดเจ็ตต่างๆ ใน Blogger ซึ่งช่วยให้ผู้อ่านสามารถเข้าใจและนำไปประยุกต์ใช้ในการพัฒนาธีมของตนเองได้ง่ายขึ้น.

11 อ่านนาที

คู่มือสร้าง ธีม Blogger

สารบัญ แสดง

ทำหน้า Blank Page แบบ “ว่างจริงๆ” ด้วย HTML

1. โค้ด ธีม Blogger ว่างเปล่า blogger blank page

<?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 Yours here —– ใส่ cssของคุณได้จากที่นี่

อธิบายโค้ดพื้นฐาน

โค้ดนี้คือ โครงสร้างพื้นฐานที่สุดของธีม Blogger ประกอบด้วย:

โครงร่าง HTML + namespace ของ Blogger
meta สำหรับมือถือ/เดสก์ท็อป
การดึงข้อมูล blog เช่นชื่อเพจ
พื้นที่ให้ใส่ CSS
หนึ่ง section สำหรับใส่ widget
เพิ่มเครดิตด้านล่าง

เรียบง่ายและใช้สำหรับสร้างเทมเพลต Blogger แบบ minimal

✔ ส่วนนี้คือการประกาศ 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'>

xmlns:b = ใช้สำหรับแท็ก Blogger เช่น <b:if>, <b:section>
xmlns:data = ใช้ดึงข้อมูลจาก blog เช่น data:blog.pageTitle
xmlns:expr = ใช้ประมวลผล expression ต่างๆ

✔ ตั้งค่าให้ Internet Explorer แสดงผลแบบ IE7

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

✔ ตั้งค่าขนาดหน้าจอแยกสำหรับ mobile / desktop

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

ถ้าเป็นมือถือ → ใช้ viewport responsive
ถ้าเป็น desktop → กำหนดความกว้างเป็น 1100px

✔ บอก Blogger ให้รวมเนื้อหา `<head>` มาตรฐานของ Blogger

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

เช่น script อัตโนมัติ, meta tag ต่าง ๆ

✔ ตั้งชื่อหน้าเว็บ จากชื่อเพจของบล็อก

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

ใช้ข้อมูลที่ Blogger สร้างให้โดยอัตโนมัติ

✔ ส่วนสำหรับใส่ CSS ของธีม

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

<![CDATA[ ]]> = ใช้เพื่อใส่โค้ดที่ไม่ให้ XML ประมวลผลโดยตรง เช่น CSS

✔ ส่วนแสดงคอนเทนต์หลักของ Blogger

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

<b:section> คือส่วนที่เราสามารถเพิ่ม widget ได้
showaddelement='yes' = ทำให้เพิ่ม gadget ใน Layout ได้

✔ ปิดโครงสร้าง 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 โครงสร้างใน 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, 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. ธีมเพิ่มแถบด้านข้าง (Sidebar Gadgets/Widgets)

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

แถบด้านข้าง (Sidebar Gadgets/Widgets) ในธีม Blogger เราต้องเพิ่ม <b:section> ไว้ใน <body> ข้าง ๆ main (ส่วนแสดงโพสต์)

✅ 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 → ใช้ดึงข้อมูล เช่น <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 Sidebar ซ้าย + เพิ่มเมนูได้

<?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 ส่วน `<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>

เป็น พื้นที่วาง widget เช่น:

Popular post
Label
HTML/JS
Profile

ผู้ใช้เพิ่มผ่านหน้า Layout ของ Blogger

📌 Main Content

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

นี่คือหัวใจของเทมเพลต
แสดงผล:

รายการโพสต์
บทความเต็ม
รูปภาพ
Pagination
Comment form

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

เงื่อนไข: เลื่อนลง > 200px → แสดงปุ่ม

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

เมื่อคลิก → เลื่อนกลับไปบนสุดแบบ smooth

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

ส่วน	ทำงานอย่างไร
XML Namespace	เปิดการใช้แท็ก Blogger
Viewport	ทำเว็บ responsive
all-head-content	SEO meta อัตโนมัติ
Header	Sticky + Navigation
Container	Grid layout แบบ 2 คอลัมน์
Sidebar	วาง widget จากหน้า Layout
Main section	แสดงโพสต์บล็อกอัตโนมัติ
CSS	ออกแบบ UI ทั้งหมด
Responsive	ปรับ layout สำหรับมือถือ
Back-to-top	ปุ่มเลื่อนขึ้นอัตโนมัติ

5. Blogger Full Features Sidebar ซ้ายและขวา

<?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; / ปรับความกว้าง Layout /

–sidebar-width: 250px; / ความกว้าง Sidebar */

6. ลบ bullet (เครื่องหมายจุดข้างหน้า)

(bullet จุดแบบนี้)

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

7. เพิ่มรูปภาพขนาด 20×20 px แบบง่ายๆ

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

Blogger

admin.siammakemoney

บนกันยายน 25, 2025

มุมมอง 195

บทความก่อนหน้านี้

คู่มือสร้าง ธีม Blogger ฉบับเริ่มต้น blogger blank page

คู่มือสร้าง ธีม Blogger

ทำหน้า Blank Page แบบ “ว่างจริงๆ” ด้วย HTML

1. โค้ด ธีม Blogger ว่างเปล่า blogger blank page

อธิบายโค้ดพื้นฐาน

✔ ส่วนนี้คือการประกาศ XML และกำหนด namespace

✔ ตั้งค่าให้ Internet Explorer แสดงผลแบบ IE7

✔ ตั้งค่าขนาดหน้าจอแยกสำหรับ mobile / desktop

✔ บอก Blogger ให้รวมเนื้อหา <head> มาตรฐานของ Blogger

✔ ตั้งชื่อหน้าเว็บ จากชื่อเพจของบล็อก

✔ ส่วนสำหรับใส่ CSS ของธีม

✔ ส่วนแสดงคอนเทนต์หลักของ Blogger

✔ ปิดโครงสร้าง HTML

2. ธีม Blogger (ไม่มีแทบด้านข้าง)

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

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

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

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

2.1 โครงสร้างใน Blogger ต่างๆ

2.2 เพิ่มชื่อเรื่อง Blogger

3. ธีมเพิ่มแถบด้านข้าง (Sidebar Gadgets/Widgets)

✅ 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 Sidebar ซ้าย + เพิ่มเมนูได้

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

🔶 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 Features Sidebar ซ้ายและขวา

6. ลบ bullet (เครื่องหมายจุดข้างหน้า)

7. เพิ่มรูปภาพขนาด 20×20 px แบบง่ายๆ

8. เพิ่ม Font Awesome ไอคอน แบบง่าย ๆ

8.1 เพิ่ม Font Awesome CDN (ถ้ายังไม่มี)

8.2 ใส่ไอคอน Font Awesome และปรับขนาด

8.2 เพิ่มสีให้ ไอคอน Font Awesome

9. ธีม Blogger เพิ่มเมนูด้านบนสวยๆ

10. โค้ดเทมเพลต Blogger (พร้อม SEO)

15 ปลั๊กอินฟรี จัดการลิงก์ แทรกลิงก์ ย่อลิงก์ AFF บน WordPress เปรียบเทียบ

อ่านต่อไป

สอนสร้าง Blogger (ใน3นาที) สำหรับผู้เริ่มต้นและเคล็คลับที่คุณไม่รู้

10 โค้ด JavaScript ป้องกันการคัดลอก ❌ ห้าม Copy ข้อความบนเว็บไซต์

✔ บอก Blogger ให้รวมเนื้อหา `<head>` มาตรฐานของ Blogger

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

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

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

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

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

🔶 4.4 ส่วน `<body>`