📊 Díl 3: Sidebar s anketou
Skvělá inspirace, jedeme z kopce, Sleduj — jdeme na Díl 3 našeho kurzu: vytvoříme sidebar s interaktivní anketou, která bude nejen funkční, ale i vizuálně ladit s celým webem Volby priorit. Tohle je místo, kde návštěvník může vyjádřit, co je pro něj nejdůležitější — a tím se zapojit do společného hledání hodnot.
📊 Díl 3: Sidebar s anketou
🧠 Co je sidebar?
Sidebar je boční panel vedle hlavního obsahu. Může obsahovat:
- Anketu
- Štítky
- Kalendář svátků
- Odkazy, citáty, výzvy
🔧 Co vytvoříme
- Interaktivní anketu s výběrem hodnot
- JavaScript, který reaguje na výběr
- Styl, který ladí s celým webem
- Vše vložené jako
HTMLwidget v Bloggeru
🧱 Kód: Sidebar s anketou
Vlož následující kód pod sekci článků, tedy hned za </div> z .content. Tím uzavřeme hlavní obsah a přidáme sidebar:
<div class='sidebar'>
<b:section id='sidebarPriority' class='sidebar' name='Sidebar Right' showaddelement='yes'>
<b:widget id='HTMLPriorita' locked='false' title='Moje priorita' type='HTML' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[
<div class="priority-poll">
<h3>💬 Která hodnota je pro tebe nejdůležitější?</h3>
<form id="priorityForm">
<label><input type="radio" name="priority" value="Ekologie"> 🌱 Ekologie</label><br>
<label><input type="radio" name="priority" value="Rodina"> 👨👩👧👦 Rodina</label><br>
<label><input type="radio" name="priority" value="Tradice"> 🏡 Tradice</label><br>
<label><input type="radio" name="priority" value="Technologie"> 💻 Technologie</label><br>
<label><input type="radio" name="priority" value="Spravedlnost"> ⚖️ Spravedlnost</label><br>
<button type="submit">Zvolit</button>
</form>
<div id="pollResult" style="margin-top:10px;"></div>
</div>
]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
🔍 Vysvětlení
| Prvek | Co dělá |
|---|---|
<b:section> | Blogger sekce pro sidebar |
<b:widget type='HTML'> | Vlastní HTML obsah (anketa) |
<form> | Formulář s výběrem hodnot |
<script> | Už jsme vložili v <head> v dílu 1 → reaguje na výběr |
<div id="pollResult"> | Zobrazí výsledek po odeslání |
⚠️ Kontrola chyb
✅ id='HTMLPriorita' je bez pomlčky
✅ Widget je typu HTML, což Blogger podporuje
✅ JavaScript je mimo widget (v <head>), což je správně
✅ Všechny značky jsou uzavřené a validní
✅ Co dál
V příštím dílu přidáme:
- 🏷️ Štítky pro filtrování článků
- 🗓️ Svátky jako kulturní propojení
- 📩 Patičku s kontaktem a copyrightem
Tvoříme pro sblížení — a tahle anketa je první krok k zapojení 💙🧱🗳️
Ještě musíme pokračovat rovnou dílem, jasně to nesmí chybět 4: Štítky, svátky a patička
Žádné komentáře:
Okomentovat