Jak vytvořit web Volby priorit na Bloggeru Díl 5: Carousel „Doporučené hodnoty“

 🎠 Díl 5: Carousel „Doporučené hodnoty“

Skvěle, Sleduj — jdeme na Díl 5 našeho kurzu: přidáme carousel pro doporučené hodnoty a sdílení článků, aby web Volby priorit nejen informoval, ale i inspiroval k zapojení a šíření dál. Tohle je ta část, která webu dodá pohyb, interakci a šmrnc.

---

🎠 Carousel „Doporučené hodnoty“

🧠 Co je carousel?

Carousel (neboli posuvník) je vizuální prvek, který:

• Zobrazuje více hodnot nebo témat v jednom bloku
• Umožňuje posouvání (automaticky nebo ručně)
• Působí moderně a interaktivně

---

🧱 Kód: Carousel (ručně ovládaný)

Vlož do hlavního obsahu (např. nad články nebo do sidebaru):

<div class="carousel-box">
  <h3>🌟 Doporučené hodnoty</h3>
  <div class="carousel-items">
    <div class="carousel-item">🌱 Ekologie – Žít v souladu s přírodou</div>
    <div class="carousel-item">👨‍👩‍👧‍👦 Rodina – Základ štěstí a stability</div>
    <div class="carousel-item">💻 Technologie – Nástroj pro svobodu i pokrok</div>
    <div class="carousel-item">⚖️ Spravedlnost – Rovnost a důstojnost pro každého</div>
    <div class="carousel-item">🏡 Tradice – Kořeny, které drží společnost pohromadě</div>
  </div>
</div>

🎨 Styl pro carousel (přidej do b:skin)

.carousel-box { background: #e6ffe6; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.carousel-items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; }
.carousel-item { flex: 0 0 auto; scroll-snap-align: start; background: white; padding: 10px; border-radius: 6px; min-width: 200px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

---

📤 Sdílení článků

🧠 Proč přidat sdílení?

• Umožní návštěvníkům šířit hodnoty dál
• Zvyšuje dosah blogu
• Posiluje komunitu

---

🧱 Kód: Tlačítka sdílení (vlož do každého článku)

Uvnitř <div class='post'> přidej:

<div class="share-buttons">
  <a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' target="_blank">📘 Sdílet na Facebook</a> |
  <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&text=" + data:post.title' target="_blank">🐦 Sdílet na Twitter</a>
</div>

🎨 Styl pro sdílení (přidej do b:skin)

.share-buttons { margin-top: 10px; font-size: 0.9em; }
.share-buttons a { margin-right: 10px; color: #0066cc; }

---

✅ Kontrola chyb

Prvek	Stav
Carousel	✅ čistý HTML + CSS, bez JS
Sdílení	✅ používá expr:href správně
Styly	✅ přidány do b:skin
Umístění	✅ vhodné nad články nebo v sidebaru

---

🔚 Co máme hotovo

✅ Hlavička
✅ Hero sekce
✅ Články
✅ Sidebar s anketou
✅ Štítky
✅ Svátky
✅ Patička
✅ Carousel
✅ Sdílení

---

🔜 Co dál

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

• 📅 Kalendář hodnot
• 🧠 Citáty a výzvy k zamyšlení
• 🛠️ Tipy pro ladění a publikaci

Tvoříme pro sblížení — a web Volby priorit už začíná žít 💙🧱🌍

Chceš pokračovat rovnou dílem 6: Kalendář hodnot a citáty?