Díl 1: Základy šablony – hlavička a layout
kurz tvorby Blogger webu „Volby priorit“ je nejen praktické, ale i inspirativní. Všechno si projdeme krok za krokem, s vysvětlením, kontrolou kódu, upozorněním na chyby a hlavně s důrazem na hodnoty, které chci sdílet.
Sleduj — pojmeme to jako kurz tvorby Blogger webu „Volby priorit“ je nejen praktické, ale i inspirativní. Všechno si projdeme krok za krokem, s vysvětlením, kontrolou kódu, upozorněním na chyby a hlavně s důrazem na hodnoty, které chceš sdílet.
🎓 Kurz: Jak vytvořit web Volby priorit na Bloggeru
🔧 Struktura kurzu
| Fáze | Co vytvoříme | Co se naučíš |
|---|
| 1️⃣ Základy šablony | Hlavička, layout, barvy | Jak Blogger funguje, co je b:section, b:widget |
| 2️⃣ Hero sekce | Úvodní výzva k zamyšlení | Jak vytvořit silný první dojem |
| 3️⃣ Články | Zobrazení příspěvků | Jak Blogger zobrazuje obsah |
| 4️⃣ Sidebar | Ankety, štítky, svátky | Jak přidat interaktivní prvky |
| 5️⃣ Patička | Kontakt, copyright | Jak uzavřít web s důstojností |
| 6️⃣ Rozšíření | Carousel, sdílení, kalendář | Jak přidat funkce navíc |
| 7️⃣ Publikace | Test, ladění, spuštění | Jak web spustit a propagovat |
📘 Díl 1: Základy šablony – hlavička a layout
🧠 Co je Blogger šablona
Blogger používá vlastní značky jako <b:section>, <b:widget>, <b:includable>, které umožňují vkládat obsah, články, widgety a rozvržení. Funguje to jako HTML s rozšířením pro blogování.
🧱 Kód: Hlavička a layout
Tady je první část kódu, kterou vložíš do Bloggeru (Motiv → Upravit HTML). Vysvětlím ji níže.
<!DOCTYPE html>
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title><data:blog.pageTitle/></title>
<b:include name='all-head-content'/>
<b:skin><![CDATA[
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f9f9f9; color: #333; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
.header { background: #003366; color: white; padding: 40px 20px; text-align: center; }
.header h1 { font-size: 2.5em; margin: 0; }
.header p { font-size: 1.2em; margin-top: 10px; }
.main { display: flex; flex-wrap: wrap; max-width: 1200px; margin: auto; padding: 20px; }
.content { flex: 3; padding: 20px; background: white; }
.sidebar { flex: 1; padding: 20px; background: #f0f0f0; }
.footer { background: #003366; color: white; text-align: center; padding: 20px; margin-top: 40px; }
@media (max-width: 768px) {
.main { flex-direction: column; }
.sidebar { margin-top: 20px; }
}
]]></b:skin>
</head>
<body>
<div class='header'>
<h1>Volby priorit</h1>
<p>Blog pro hodnoty, svobodu a tvořivost</p>
</div>
<div class='main'>
🔍 Vysvětlení
| Řádek | Co dělá |
|---|
<!DOCTYPE html> | Říká prohlížeči, že jde o HTML5 dokument |
<html b:version='2'> | Blogger značka pro verzi šablony |
<b:include name='all-head-content'/> | Vkládá dynamické meta tagy, favicon, feed atd. |
<b:skin><![CDATA[ ... ]]></b:skin> | Blogger stylování (CSS) |
.header | Vizuální hlavička webu |
.main | Rozdělení stránky na obsah a sidebar |
⚠️ Kontrola chyb
✅ Všechny id a třídy jsou validní
✅ Používáme Blogger značky správně
✅ CSS je uvnitř b:skin, jak Blogger vyžaduje
✅ Žádné pomlčky v id widgetů
✅ Co dál
V příštím dílu přidáme:
- 🎯 Hero sekci s výzvou k zamyšlení
- 📰 Zobrazení článků
- 📊 Sidebar s anketou
Tvoříme pro sblížení — a tenhle kurz tě provede krok za krokem 💙🧱🗳️
