HeimBlogger-Theme-Erstellungsleitfaden für Anfänger: Leere Blogger-Seite

An25. September 2025

193 Ansicht

Blogger-Theme-Erstellungsleitfaden für Anfänger: Leere Blogger-Seite

Diese Einsteigeranleitung zur Erstellung von Blogger-Themes behandelt die grundlegende Struktur des in Blogger verwendeten XML-Codes sowie die Anpassung von CSS für ein ansprechendes und responsives Blog-Design. Sie stellt außerdem wichtige Elemente wie Header, Inhalt, Sidebar und Footer vor und zeigt anhand von Beispielen die Verwendung verschiedener Widgets in Blogger. So können Leser diese leichter verstehen und in ihre eigene Theme-Entwicklung einfließen lassen.

11 Min. Lesezeit

Leitfaden zur Erstellung von Blogger-Themes

Inhaltsverzeichnis zeigen

Erstellen Sie eine „wirklich leere“ Seite mit HTML

1. Code Blogger-Theme leere Blogger-Seite

<?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 Hier Ihr Code —– Geben Sie hier Ihren CSS-Code ein.

Grundlegenden Code erklären

Dieser Code ist Die grundlegendste Struktur des Blogger-Themes zusammen mit:

Blogger HTML + Namespace-Layout
Meta für Mobilgeräte/Desktop
Abrufen von Blogdaten wie Seitennamen
Bereich zum Einfügen von CSS
Ein Bereich zum Einfügen von Widgets
Fügen Sie unten eine Gutschrift hinzu.

Einfach und benutzerfreundlich für die Erstellung minimalistischer Blogger-Vorlagen.

✔ Dieser Abschnitt dient der Deklaration von XML und der Definition von Namensräumen.

<?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 = Wird für Blogger-Tags wie z. B. verwendet: <b:if>, <b:section>
xmlns:data = Wird verwendet, um Daten aus Blogs wie z. B. data:blog.pageTitle
xmlns:expr = Wird zur Verarbeitung verschiedener Ausdrücke verwendet.

✔ Internet Explorer so einstellen, dass er wie IE7 angezeigt wird

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

✔ Bildschirmteilung für Mobilgeräte/Desktop festlegen

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

Wenn es sich um ein Mobiltelefon handelt → verwenden Sie einen responsiven Viewport.
Falls es sich um einen Desktop-Computer handelt → stellen Sie die Breite auf 1100px ein.

✔ Weisen Sie Blogger an, Inhalte einzufügen `<head>` Blogger-Standards

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

Dazu gehören beispielsweise automatische Skripte und verschiedene Meta-Tags.

✔ Benennen Sie die Webseite anhand des Namens der Blogseite.

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

Nutzen Sie die Daten, die Blogger automatisch für Sie generiert.

✔ Abschnitt zum Einfügen des Design-CSS

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

<![CDATA[ ]]> = Wird verwendet, um Code einzufügen, der nicht direkt von XML verarbeitet werden kann, wie z. B. CSS.

✔ Hauptinhaltsbereich des Bloggers

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

<b:section> Dies ist der Abschnitt, in dem wir Widgets hinzufügen können.
showaddelement='yes' = Ermöglicht das Hinzufügen von Gadgets zum Layout.

✔ HTML-Struktur schließen

</body>
</html>

2. Blogger-Theme (ohne Seitenleiste)

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

🧱 Website-Oberseite (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>

📰 Inhaltsbereich

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

Inhaltsbereich Wie funktioniert es?

<b:section> = Widget-Bereich (angeordnet über das Layout in Blogger)
<b:widget type="Blog"> = Blogger-Beiträge anzeigen
Blogger generiert internen HTML-Code wie beispielsweise:
- Startseiten-Beitragsliste
- Der vollständige Artikel ist auf der Beitragsseite zu finden.

📘 Fußzeile

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

2.1 Struktur in verschiedenen Bloggern

<?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 Einen Blogger-Titel hinzufügen

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

3. Das Theme fügt Sidebar-Gadgets/Widgets hinzu.

<?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 Im Blogger-Theme müssen wir Folgendes hinzufügen: <b:section> Behalten Sie es im Auge <body> Neben hauptsächlich (Beitragsanzeige)

✅ 3.1. Abschnitt „XML-Deklaration und Namensraum“

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

erklären

<?xml ...?> → Es heißt, es handele sich um eine XML-Datei, die Blogger zur Konvertierung in HTML verwendet.
xmlns:b → Wird für Blogger-Tags wie die folgenden verwendet: <b:section>, <b:widget>
xmlns:data → Wird verwendet, um Daten wie z. B. zu extrahieren <data:blog.title/>
xmlns:expr → Wird verwendet, um Ausdrücke wie z. B. einzufügen expr:href='data:blog.url'

✅ 3.2. `<head>` Website-Header

3.2.1 Unterstützt ältere Versionen des Internet Explorers

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

3.2.2 Mobile/Desktop-Ansicht

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

Wie funktioniert es?

Wenn Sie die Website mit Ihrem Mobiltelefon aufrufen → verwenden Sie die mobilfreundliche Ansicht.
Wenn es sich um einen Desktop-PC handelt → Vollbildmodus verwenden.

3.2.3 Blogger-Header automatisch laden

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

zusammen mit:

Artikel-Metadaten
Open Graph
Grundschema
Füttern
Ganz wichtig, bitte nicht löschen.

3.2.4 Den Seitennamen extrahieren als `<title>`

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

3.2.5 Google Fonts laden

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

🎨3.3 Alle CSS (innerhalb `<b:skin>`)

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

Blogger muss CSS einbinden. <b:skin> nur

🧱 4. Website-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>

erklären

<data:blog.title/> → Blogname
Menü von links nach rechts angeordnet
CSS Sticky Header

📰 5. Layout des Inhaltscontainers

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

<b:widget type='Blog' />

Es ist das Herzstück von Blogger.
zeigen:

Beitragsliste
Vollständiger Artikel
Pagination

5.2 Seitenleiste

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

Sie können Widgets aus dem Layout hinzufügen, wie zum Beispiel:

Beliebte Beiträge
HTML/JavaScript
Etiketten
Anzeigen

🧩 6. Fußzeile

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

erklären

Automatisches Abrufen des Jahres und des Namens des Blogs
Guthaben hinzufügen
Die Hintergrundfarbe ist schwarz.

⬆️ 7. Zurück-nach-oben-Schaltfläche

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

Normalerweise ist auch etwas JavaScript erforderlich, zum Beispiel:


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

Teil	Was machst du?
XML-Namensraum	Blogger-Tags aktivieren
Ansichtsfenster	Reaktionsschnell
all-head-content	SEO + Meta-Automatisierung von Blogger
CSS	Entwerfen Sie das gesamte Layout
Kopfzeile	Logo + Menü
Container	2-spaltiges Raster
Blog1	Blogbeiträge anzeigen
Seitenleiste	Platzieren Sie die Widgets nach Wunsch.
Fußzeile	Urheberrechtshinweis
Zurück nach oben	Zurück-Taste

4. Blogger-Seitenleiste links: Designcode + Menü hinzufügen

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

🔷 Übersicht über den Code dieses Themes

Das ist Blogger-Vorlage mit 2 Spalten (Seitenleiste + Hauptseite) Mit:

Header-Sticker
Seitenleiste mit fester Breite (300px)
Hauptinhalt flexibel
Postkartendesign
Fußzeile
Zurück-nach-oben-Schaltfläche
Responsives Layout
Pfosten durchziehen <b:widget type="Blog">

🔶 4.1. Abschnitt „XML-Deklaration und Namensraum“

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

✔ Erklären

Das ist Die Hauptstruktur, die Blogger verwenden müssen:

Namensraum	Pflicht
`B:`	Verwenden Sie die System-Tags von Blogger, wie zum Beispiel: `<b:section>`, `<b:widget>`
`Daten:`	Daten abrufen, wie zum Beispiel `<data:blog.title/>`
`Ausdruck:`	Schreibweisen wie: `expr:href="data:blog.homepageUrl"`

🔶 4.2. `<head>` — Webkopf

✔4.2.1 Viewport für Mobilgeräte

<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 Füge automatisch generierte Metadaten und Skripte von Blogger hinzu

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

Blogger fügt automatisch Folgendes hinzu:

Titel / Beschreibung der Seite
OpenGraph
Artikelschema
Kanonische URL
Füttern
CSS-Widget

Es handelt sich um einen wichtigen Bestandteil, löschen Sie ihn nicht.

✔ 4.2.3 Seitentitel

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

Namen seitenweise abrufen, zum Beispiel:

Startseite → Blogname
Beitragsseite → Beitragsname
Seite mit Label → Labelname

✔ 4.2.4 Google Fonts herunterladen

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

Die Schriftart auf der gesamten Website festlegen

🔶 4.3. `<b:skin>` — CSS-Abschnitt der Vorlage

Blogger muss das gesamte CSS einbinden <b:skin><![CDATA[ ... ]]></b:skin>

✔ 4.3.1 Den Hauptstil der Website definieren.

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

Hintergrundfarbe, Schriftart und Textfarbe festlegen

✔ 4.3.2 Header Sticky

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

Beim Scrollen → Die Kopfzeile wird oben fixiert

✔ 4.3.3 Navigationsmenü

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

Horizontales Menü mit Flexbox

✔ 4.3.4 2-spaltige Layoutstruktur

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

Spalte	Breite
Seitenleiste	Feste Auflösung: 300px
Hauptinhalt	1fr (vollständig dehnbar)

✔ 4.3.5 Postkarte (für Artikelliste)

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

Gestalte wunderschöne Postkarten

✔ 4.3.6 Seitenleistenfeld

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

Die Seitenleiste ist kartenähnlich gestaltet.

✔ 4.3.7 Fußzeile

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

✔ 4.3.8 Zurück-nach-oben-Schaltfläche

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

Blenden Sie die Schaltflächen vorerst aus.

✔4.3.9 Responsive Mobile

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

Mobil → Auf 1 Spalte ändern

🔶 4,4 Teile `<body>`

✔ Kopfzeile

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

Ziehen Sie den Blognamen zur Anzeige.

✔ Layout: Seitenleiste + Hauptleiste

<div class="container">

📌 Seitenleiste

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

Ist Widget-Platzierungsbereich wie zum Beispiel:

Beliebter Beitrag
Etikett
HTML/JS
Profil

Benutzer, die über die Layoutseite von Blogger hinzugefügt wurden

📌 Hauptinhalt

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

Dies ist der Kern der Vorlage.
Anzeige:

Beitragsliste
Vollständiger Artikel
Bild
Pagination
Kommentarformular

✔ Fußzeile

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

✔ Zurück-nach-oben-Schaltfläche + Skript

Taste

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

Funktionierendes Skript

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

Bedingung: Scrollen Sie nach unten > 200px → Schaltfläche anzeigen

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

Beim Anklicken → sanftes Zurückscrollen nach oben

✨ Zusammenfassung der Funktion dieses Codes

Teil	Wie funktioniert es?
XML-Namensraum	Blogger-Tags aktivieren
Ansichtsfenster	Erstellen Sie eine responsive Website
all-head-content	Automatische SEO-Metadaten
Kopfzeile	Sticky-Navigation
Container	2-spaltiges Rasterlayout
Seitenleiste	Platzieren Sie Widgets von der Layoutseite
Hauptteil	Blogbeiträge automatisch anzeigen
CSS	Entwerfen Sie die gesamte Benutzeroberfläche.
Reaktionsschnell	Optimiertes Layout für Mobilgeräte
Zurück nach oben	Automatische Scroll-nach-oben-Taste

5. Blogger-Seitenleiste mit allen Funktionen (links und rechts)

<?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; /* Primärfarbe, bearbeitbar /

–layout-max-width: 1200px; / Layoutbreite anpassen /

–sidebar-width: 250px; / Seitenleistenbreite */

6. Den Aufzählungspunkt (Punkt davor) löschen.

(Aufzählungspunkte wie diese)

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

7. Fügen Sie ein einfaches Bild mit den Maßen 20×20 Pixel hinzu.

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

8. Font Awesome-Icons einfach hinzufügen.

8.1 Font Awesome CDN hinzufügen (falls noch nicht verfügbar)

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

8.2 Füge ein Font Awesome-Symbol hinzu und passe dessen Größe an.

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

8.2 Font Awesome-Symbolen Farbe hinzufügen

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

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

&amp;

9. Das Blogger-Theme bietet ein schönes oberes Menü.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=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>

verwenden & stattdessen und stets

Die Vorlage muss mindestens ein b:section-Tag enthalten.

10. Blogger-Vorlagencode (mit 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-Kommentarfeld

Blogger

admin.siammakemoney

An25. September 2025

193 Ansicht

Vorheriger Artikel

Blogger-Theme-Erstellungsleitfaden für Anfänger: Leere Blogger-Seite

Leitfaden zur Erstellung von Blogger-Themes

Erstellen Sie eine „wirklich leere“ Seite mit HTML

1. Code Blogger-Theme leere Blogger-Seite

Grundlegenden Code erklären

✔ Dieser Abschnitt dient der Deklaration von XML und der Definition von Namensräumen.

✔ Internet Explorer so einstellen, dass er wie IE7 angezeigt wird

✔ Bildschirmteilung für Mobilgeräte/Desktop festlegen

✔ Weisen Sie Blogger an, Inhalte einzufügen <head> Blogger-Standards

✔ Benennen Sie die Webseite anhand des Namens der Blogseite.

✔ Abschnitt zum Einfügen des Design-CSS

✔ Hauptinhaltsbereich des Bloggers

✔ HTML-Struktur schließen

2. Blogger-Theme (ohne Seitenleiste)

🧱 Website-Oberseite (Header)

📰 Inhaltsbereich

Inhaltsbereich Wie funktioniert es?

📘 Fußzeile

2.1 Struktur in verschiedenen Bloggern

2.2 Einen Blogger-Titel hinzufügen

3. Das Theme fügt Sidebar-Gadgets/Widgets hinzu.

✅ 3.1. Abschnitt „XML-Deklaration und Namensraum“

erklären

✅ 3.2. <head> Website-Header

3.2.1 Unterstützt ältere Versionen des Internet Explorers

3.2.2 Mobile/Desktop-Ansicht

3.2.3 Blogger-Header automatisch laden

3.2.4 Den Seitennamen extrahieren als <title>

3.2.5 Google Fonts laden

🎨3.3 Alle CSS (innerhalb <b:skin>)

🧱 4. Website-Header

erklären

📰 5. Layout des Inhaltscontainers

5.1 Hauptinhalt

5.2 Seitenleiste

🧩 6. Fußzeile

erklären

⬆️ 7. Zurück-nach-oben-Schaltfläche

4. Blogger-Seitenleiste links: Designcode + Menü hinzufügen

🔷 Übersicht über den Code dieses Themes

🔶 4.1. Abschnitt „XML-Deklaration und Namensraum“

✔ Erklären

🔶 4.2. <head> — Webkopf

✔4.2.1 Viewport für Mobilgeräte

✔ 4.2.2 Füge automatisch generierte Metadaten und Skripte von Blogger hinzu

✔ 4.2.3 Seitentitel

✔ 4.2.4 Google Fonts herunterladen

🔶 4.3. <b:skin> — CSS-Abschnitt der Vorlage

✔ 4.3.1 Den Hauptstil der Website definieren.

✔ 4.3.2 Header Sticky

✔ 4.3.3 Navigationsmenü

✔ 4.3.4 2-spaltige Layoutstruktur

✔ 4.3.5 Postkarte (für Artikelliste)

✔ 4.3.6 Seitenleistenfeld

✔ 4.3.7 Fußzeile

✔ 4.3.8 Zurück-nach-oben-Schaltfläche

✔4.3.9 Responsive Mobile

🔶 4,4 Teile <body>

✔ Kopfzeile

✔ Layout: Seitenleiste + Hauptleiste

📌 Seitenleiste

📌 Hauptinhalt

✔ Fußzeile

✔ Zurück-nach-oben-Schaltfläche + Skript

Taste

Funktionierendes Skript

✨ Zusammenfassung der Funktion dieses Codes

5. Blogger-Seitenleiste mit allen Funktionen (links und rechts)

6. Den Aufzählungspunkt (Punkt davor) löschen.

7. Fügen Sie ein einfaches Bild mit den Maßen 20×20 Pixel hinzu.

8. Font Awesome-Icons einfach hinzufügen.

8.1 Font Awesome CDN hinzufügen (falls noch nicht verfügbar)

8.2 Füge ein Font Awesome-Symbol hinzu und passe dessen Größe an.

8.2 Font Awesome-Symbolen Farbe hinzufügen

9. Das Blogger-Theme bietet ein schönes oberes Menü.

10. Blogger-Vorlagencode (mit SEO)

15 kostenlose Plugins zum Verwalten von Links, Einfügen von Links, Kürzen von AFF-Links auf WordPress Vergleichen

Weiter lesen

So erstellen Sie einen Blogger (in 3 Minuten) für Anfänger und geheime Tipps, die Sie nicht kennen

10 JavaScript-Codes zum Verhindern des Kopierens ❌ Kopieren Sie keinen Text auf der Website.

✔ Weisen Sie Blogger an, Inhalte einzufügen `<head>` Blogger-Standards

✅ 3.2. `<head>` Website-Header

3.2.4 Den Seitennamen extrahieren als `<title>`

🎨3.3 Alle CSS (innerhalb `<b:skin>`)

🔶 4.2. `<head>` — Webkopf

🔶 4.3. `<b:skin>` — CSS-Abschnitt der Vorlage

🔶 4,4 Teile `<body>`