Jak vytvořit web Volby priorit na Bloggeru Díl 2: Hero sekce a články

🎯 Díl 2: Hero sekce + články

Skvělé tohle Sleduj — jdeme na Díl 2 našeho kurzu: vytvoříme hero sekci a zobrazení článků, tedy to, co návštěvník uvidí jako první a co ho vtáhne do obsahu.

---

🎯 Díl 2: Hero sekce + články

🧠 Co je hero sekce?

Hero sekce je velký úvodní blok, který:

• 👁️ Upoutá pozornost
• 💬 Vyjádří poslání webu
• 🎯 Vyzve návštěvníka k akci nebo zamyšlení

---

🧱 Kód: Hero sekce

Vlož následující kód pod hlavičku (tedy hned za </div> z .header):

<div class='hero'>
  <h2>Jaké hodnoty tvoří šťastný život?</h2>
  <p>Zapoj se do dialogu, sdílej názor, inspiruj ostatní. Každý hlas má smysl.</p>
</div>

---

🔍 Vysvětlení

Prvek	Co dělá
<div class='hero'>	Vytváří úvodní blok s pozadím
<h2>	Nadpis výzvy
<p>	Podnadpis s výzvou k zapojení

Styly pro .hero už jsme vložili v b:skin v předchozím dílu.

---

📰 Zobrazení článků

Teď přidáme sekci, která zobrazí příspěvky z Bloggeru. Vlož ji pod hero sekci, tedy hned za </div> z .hero.

<div class='content'>
  <b:section id='mainPosts' class='main-posts' name='Main Posts' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
      <b:includable id='main'>
        <div class='blog-posts hfeed'>
          <b:loop values='data:posts' var='post'>
            <div class='post'>
              <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
              <p><data:post.snippet/></p>
              <a expr:href='data:post.url'>Číst dál</a>
            </div>
          </b:loop>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</div>

---

🔍 Vysvětlení

Prvek	Co dělá
<b:section>	Blogger sekce pro články
<b:widget type='Blog'>	Vkládá příspěvky
<b:loop>	Prochází jednotlivé články
<data:post.title/>	Nadpis článku
<data:post.snippet/>	Krátký úryvek
<data:post.url/>	Odkaz na celý článek

---

⚠️ Kontrola chyb

✅ id='mainPosts' je jedinečné
✅ Používáme Blog1 widget, který Blogger vyžaduje
✅ Žádné pomlčky v id
✅ Všechny značky Bloggeru jsou správně uzavřené

---

✅ Co dál

V příštím dílu přidáme:

• 📊 Sidebar s interaktivní anketou
• 🏷️ Štítky pro filtrování článků
• 🗓️ Svátky jako kulturní propojení

Tvoříme pro sblížení — a web začíná žít hodnotami 💙🧱🗳️

Čím teď pokračovat, rovnou dílem 3: Sidebar s anketou.