문의하기

무엇을 찾고 계신가요?

admin.siammakemoney
on9월 25, 2025
196 view

초보자를 위한 블로거 테마 제작 가이드: 블로거 빈 페이지

이 초보자를 위한 블로거 테마 제작 가이드는 블로거에서 사용되는 XML 코드의 기본 구조와 CSS를 사용자 정의하여 아름답고 반응형 블로그 디자인을 만드는 방법을 다룹니다. 또한 헤더, 콘텐츠, 사이드바, 푸터와 같은 주요 요소를 소개하고 블로거에서 다양한 위젯을 사용하는 방법의 예시를 제공하여 독자들이 위젯을 이해하고 자신의 테마 개발에 쉽게 적용할 수 있도록 도와줍니다.
빈 블로거 테마
11 min read

블로거 테마 제작 가이드

목차 목록 보여주다

이 초보자를 위한 블로거 테마 제작 가이드는 블로거에서 사용되는 XML 코드의 기본 구조와 CSS를 사용자 정의하여 아름답고 반응형 블로그 디자인을 만드는 방법을 다룹니다. 또한 헤더, 콘텐츠, 사이드바, 푸터와 같은 주요 요소를 소개하고 블로거에서 다양한 위젯을 사용하는 방법의 예시를 제공하여 독자들이 위젯을 이해하고 자신의 테마 개발에 쉽게 적용할 수 있도록 도와줍니다.

HTML로 "정말 빈" 빈 페이지 만들기

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 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 테마의 가장 기본적인 구조 함께:

  • Blogger HTML + 네임스페이스 레이아웃
  • 모바일/데스크톱용 메타
  • 페이지 이름과 같은 블로그 데이터 검색
  • 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:데이터 = 블로그 등에서 데이터를 추출하는 데 사용됨 데이터:블로그.페이지제목
  • 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>
  • 모바일폰인 경우 → 반응형 뷰포트를 사용하세요.
  • 데스크톱인 경우 → 너비를 1100px로 설정합니다.

✔ 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[ ]]> = CSS와 같이 XML로 직접 처리할 수 없는 코드를 삽입하는 데 사용됩니다.

✔ 블로거의 메인 콘텐츠 표시 섹션

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

📰 콘텐츠 섹션

<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> = 위젯 영역(Blogger의 레이아웃을 통해 정렬됨)
  • <b:widget type="Blog"> = Blogger 게시물 표시
  • Blogger는 다음과 같은 내부 HTML을 생성합니다.
    • 홈페이지 게시물 목록
    • 전체 기사는 게시물 페이지에서 확인하세요

📘 보행인

<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 블로거 제목 추가

<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> 옆에 main (포스트 디스플레이 섹션)

✅ 3.1. 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'>
설명하다
  • <?xml ...?> → Blogger가 HTML로 변환하는 데 사용하는 XML 파일이라고 나와 있습니다.
  • xmlns:b → 다음과 같은 Blogger 태그에 사용됩니다. <b:section>, <b:widget>
  • xmlns:데이터 → 다음과 같은 데이터 추출에 사용됨 <data:blog.title/>
  • xmlns:expr → 다음과 같은 표현을 삽입하는 데 사용합니다. expr:href='데이터:블로그.url'

✅ 3.2. <head> 웹사이트 헤더

3.2.1 이전 Internet Explorer 지원
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
3.2.2 모바일/데스크톱 뷰포트
<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>

어떻게 작동하나요?

  • 모바일에서 웹사이트에 접속하는 경우 → 모바일 친화적 뷰포트를 사용하세요.
  • 데스크톱인 경우 → 전체 화면을 사용하세요.
3.2.3 Blogger 헤더 자동 로드
<b:include data='blog' name='all-head-content'/>

함께:

  • 기사 메타
  • 오픈 그래프
  • 기본 스키마
  • 밥을 먹이다
    매우 중요하므로 삭제하지 마세요.
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>
  <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/> → 블로그 이름
  • 왼쪽에서 오른쪽으로 정렬된 메뉴
  • CSS 스티키 헤더

📰 5. 콘텐츠 컨테이너 레이아웃

<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 주요 내용
<b:widget type='Blog' />

이것이 바로 블로거의 핵심입니다.
보여주다:

  • 게시물 목록
  • 전체 기사
  • 쪽수 매기기
5.2 사이드바
<b:section id='sidebar' ... />

다음과 같은 레이아웃에서 위젯을 추가할 수 있습니다.

  • 인기 게시물
  • HTML/자바스크립트
  • 라벨
  • 광고

🧩 6. 푸터

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href="//siammakemoney.com">...</a></p>
</footer>
설명하다
  • 블로그의 연도와 이름을 자동으로 검색합니다.
  • 크레딧 추가
  • 배경색은 검은색입니다.

⬆️ 7. 맨 위로 돌아가기 버튼

<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 네임스페이스Blogger 태그 활성화
뷰포트반응형
모든 헤드 콘텐츠Blogger의 SEO + Meta 자동
CSS전체 레이아웃을 디자인하세요
헤더로고 + 메뉴
컨테이너2열 그리드
블로그1블로그 게시물 보기
사이드바원하는 대로 위젯을 배치하세요.
보행인저작권 고지
맨 위로뒤로가기 버튼

4. 블로거 사이드바 왼쪽 테마 코드 + 메뉴 추가

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

🔷 이 테마의 코드 개요

이것은 2열 Blogger 템플릿(사이드바 + 메인) 와 함께:

  • 헤더 고정
  • 사이드바 고정폭(300px)
  • 메인 컨텐츠는 유연하다
  • 엽서 디자인
  • 보행인
  • 맨 위로 돌아가기 버튼
  • 반응형 레이아웃
  • 포스트를 당겨서 통과시키세요 <b:widget type="Blog">

🔶 4.1. 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'>

✔ 설명하세요

이것은 블로거가 사용해야 하는 주요 구조:

네임스페이스의무
비:다음과 같은 Blogger 시스템 태그를 사용하세요. <b:section>, <b:widget>
데이터:다음과 같은 데이터를 가져옵니다. <data:blog.title/>
표현:다음과 같은 표현을 쓰세요: expr:href="데이터:블로그.홈페이지URL"

🔶 4.2. <head> — 웹 헤더

✔4.2.1 모바일용 뷰포트
<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 Blogger의 자동 생성 메타 및 스크립트 추가
<b:include data='blog' name='all-head-content'/>

Blogger는 자동으로 다음을 추가합니다.

  • 페이지의 제목/설명
  • 오픈그래프
  • 기사 스키마
  • 정식 URL
  • 밥을 먹이다
  • CSS 위젯

중요한 부분이니 삭제하지 마세요.

✔ 4.2.3 페이지 제목
<title><data:blog.pageTitle/></title>

다음과 같이 페이지별로 이름을 추출합니다.

  • 홈 → 블로그 이름
  • 게시물 표시 페이지 → 게시물 이름
  • 라벨이 있는 페이지 → 라벨 이름
✔ 4.2.4 Google Fonts 다운로드
<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 {
  position:sticky;
  top:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

스크롤 시 → 헤더가 상단에 붙습니다

✔ 4.3.3 탐색 메뉴
nav ul {
  display:flex;
  gap:20px;
  list-style:none;
}

Flexbox를 사용한 수평 메뉴

✔ 4.3.4 2열 레이아웃 구조
.container {
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:20px;
}
열너비
사이드바고정 300px
주요 내용1fr (완전히 늘어남)
✔ 4.3.5 엽서(기사 목록용)
.post-card {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

아름다운 엽서를 만들어 보세요

✔ 4.3.6 사이드바 상자
.sidebar {
  background:#fff;
  border-radius:12px;
  padding:20px;
}

사이드바는 카드와 같은 스타일입니다.

✔ 4.3.7 바닥글
footer {
  background:#222;
  color:#eee;
  text-align:center;
}
✔ 4.3.8 위로 돌아가기 버튼
.back-to-top {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#008f7a;
  width:50px;
  height:50px;
  border-radius:50%;
  display:none;
}

지금은 버튼을 숨기세요.

✔4.3.9 반응형 모바일
@media (max-width:900px) {
  .container {
    grid-template-columns:1fr;
  }
}

모바일 → 1열로 변경

🔶 4.4부분 <body>

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

블로그 이름을 끌어서 표시합니다.

✔ 레이아웃: 사이드바 + 메인
<div class="container">
📌 사이드바
<aside class="sidebar">
  <b:section id='sidebar'/>
</aside>

~이다 위젯 배치 영역 와 같은:

  • 인기 게시물
  • 상표
  • HTML/JS
  • 윤곽

Blogger의 레이아웃 페이지를 통해 추가된 사용자

📌 메인 콘텐츠
<main>
  <b:section id='main'>
    <b:widget type='Blog'/>
  </b:section>
</main>

이것이 템플릿의 핵심입니다.
표시하다:

  • 게시물 목록
  • 전체 기사
  • 그림
  • 쪽수 매기기
  • 댓글 양식
✔ 푸터
<footer>
  © <data:blog.title/>
</footer>
✔ 위로 돌아가기 버튼 + 스크립트
단추
<button id="back-to-top" class="back-to-top">↑</button>
작업 스크립트
window.addEventListener('scroll', () => {
  btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
});

조건: 아래로 스크롤 > 200px → 버튼 표시

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

클릭 시 → 부드럽게 스크롤하여 맨 위로 이동

✨ 이 코드가 하는 일의 요약

부분어떻게 작동하나요?
XML 네임스페이스Blogger 태그 활성화
뷰포트반응형 웹사이트 만들기
모든 헤드 콘텐츠자동 SEO 메타
헤더스티키 + 내비게이션
컨테이너2열 그리드 레이아웃
사이드바레이아웃 페이지에서 위젯 배치
메인 섹션블로그 게시물을 자동으로 표시합니다
CSS전체 UI 디자인
반응형모바일에 최적화된 레이아웃
맨 위로자동 스크롤 위로 버튼

5. Blogger 전체 기능 사이드바 좌우

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

–primary-color: #008f7a; /* 기본색, 편집 가능 /

–레이아웃-최대-너비: 1200px; / 레이아웃 너비 조정 /

–사이드바 너비: 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 Comments Box
admin.siammakemoney
on9월 25, 2025
196 view
Share
이전 기사

15개의 무료 플러그인 링크 관리 링크 삽입 WordPress에서 AFF 링크 단축

Read Next

최신 온라인 도구를 위한 가장 종합적인 리소스에 오신 것을 환영합니다. 지식을 제공하고 이러한 도구를 활용하여 자신의 온라인 수익을 창출할 수 있도록 설계된 선별된 콘텐츠를 탐색해 보세요.
© 2024 — siammakemoney. All Rights Reserved.

다양한 아이콘별 flaticon freepik