Návod: Jak napsat nový blog

⚡

Použít generátor — nejrychlejší cesta

Pro blog ve stylu příběhu jedné fotografie (jako blog o Martinu Švihlovi) máte k dispozici PHP generátor. Vyplníte formulář, generátor sestaví hotové HTML a nabídne ho ke stažení. Žádné ruční kopírování šablon.

Otevřít generátor

⚡ Generátor 1 — jedna fotografie → ⚡ Generátor 2 — reportáž / více fotek →

Generátor 1 — pro blog ve stylu „příběh jedné fotografie" (jako blog o Martinu Švihlovi). Vyplníte formulář, generátor sestaví hotové HTML a nabídne ke stažení. Žádné ruční kopírování šablon.

Generátor 2 — pro reportáž s více fotkami. Skládáte si blog z dynamických bloků: úvod, odstavce, mezitiulky, citáty, info boxy, oddělovače, galerie 1/2/3/6 fotek, odkaz na album. Bloky můžete řadit v libovolném pořadí (↑↓), smazat (×) nebo přidat na konec.

Formátování textu v generátoru V poli „Hlavní text" použijte tyto příkazy na začátku řádku:

[H2] Název sekce → mezititulek
[Q] Text citátu → zvýrazněný citát
[HR] → vodorovný oddělovač

Každý ostatní řádek = normální odstavec <p>.

Po stažení HTML souboru:

Nahrajte soubor do kořene webu (vedle index.html)
Přidejte kartu do blog.html — viz krok 9
Aktualizujte blog strip v index.html — viz krok 10
Aktualizujte sidebar v ostatních příspěvcích — viz krok 8

Kdy ruční postup Oba generátory pokrývají běžné případy. Pro specifické úpravy (custom HTML, nestandardní rozložení, vlastní CSS triky) použijte ruční postup níže se šablonami blog-VZOR.html nebo blog-VZOR-jednaFotka.html.

1

Zkopírujte šablonu

Soubor blog-VZOR.html je vaše šablona. Tento soubor nikdy neupravujte přímo — vždy ho nejdřív zkopírujte.

Co udělat Najděte soubor blog-VZOR.html ve složce webu. Zkopírujte ho (Ctrl+C / Cmd+C) a vložte ve stejné složce (Ctrl+V / Cmd+V). Vznikne kopie, zpravidla pojmenovaná blog-VZOR — kopie.html.

2

Přejmenujte soubor

Přejmenujte zkopírovaný soubor podle tématu příspěvku. Používejte pouze malá písmena bez diakritiky, slova oddělujte pomlčkou, bez mezer.

Vzor pojmenování blog-nazev-tematu.html

Příklady dobrých názvů:
blog-aikido.html
blog-masopust-krc-2025.html
blog-portret-jana.html

Pozor Jakmile soubor pojmenujete a nalinkujete ho na webu, název neměňte — jinak se odkaz rozbije.

3

Vyplňte záhlaví a meta

Otevřete soubor v textovém editoru (Notepad, VS Code, Sublime…). Nahoře v sekci <head> vyplňte dvě věci:

description — krátký popis příspěvku pro Google, 1–2 věty, max. 160 znaků.
title — název příspěvku, který se zobrazí v záložce prohlížeče. Formát: Název příspěvku — Ondřej Plachý

<!-- Najděte tyto dva řádky a upravte je: -->

<meta name="description" content="VYPLŇTE — krátký popis příspěvku, 1–2 věty." />
<title>NÁZEV PŘÍSPĚVKU — Ondřej Plachý</title>

4

Nastavte titulní fotku (hero)

Hned pod navigací je sekce post-hero. Vyplňte src titulní fotky a vše ostatní v bloku.

src fotky — buď relativní cesta k souboru ve složce fotky/, nebo přímý odkaz z Google Photos (viz níže jak na to).
alt — krátký popis fotky pro čtečky obrazovky.
datetime — datum ve formátu RRRR-MM-DD, viditelný text slovně česky.
Kategorie (blog-tag) — vyberte jednu: Street · Portrét · Reportáž · Sportovní reportáž · Kulturní akce · Dokument · Dlouhodobý projekt
Nadpis (post-title) — název příspěvku, může být dvouřádkový pomocí <br>.

<div class="post-hero">
  <img
    src="fotky/nazev-titulni-fotky.jpg"
    alt="Stručný popis titulní fotky" />
  <div class="post-hero-overlay">
    <div class="container">
      <a href="blog.html" class="post-back">← Zpět na blog</a>
      <div class="post-hero-meta">
        <time datetime="2025-06-15">15. června 2025</time>
        <span class="blog-tag">Street</span>
      </div>
      <h1 class="post-title">Název příspěvku</h1>
    </div>
  </div>
</div>

Fotky z Google Photos — jak získat přímý odkaz 1. Otevřete album ve Fotkách Google.
2. Klikněte na fotku → pravé tlačítko myši → Kopírovat adresu obrázku.
3. Zkopírovaná URL bude vypadat takto:
https://lh3.googleusercontent.com/pw/HASH=w1920-h1080
4. Změňte koncovku na =w1200 pro velké fotky nebo =w800 pro menší. Výsledek vložte do atributu src.

5

Napište text příspěvku

V sekci post-body najdete vzorové bloky textu. Každý blok je okomentovaný. Nepotřebné bloky prostě smažte. Bloky, které chcete opakovat, zkopírujte.

Základní struktura textu Vždy začněte odstavcem post-lead (velký úvod).
Pak střídejte normální odstavce <p> s fotkami a mezitiulky <h2>.
Zakončete navigací na další/předchozí příspěvek.

Podrobný přehled všech formátování je v tabulce níže (krok 11).

6

Vložte fotografie

Ve vzoru jsou čtyři způsoby jak zobrazit fotky. Zkopírujte ten, který potřebujete, a vyplňte src a alt.

1 velká fotka přes celou šířku:

<figure class="post-img-full lb-trigger">
  <img src="fotky/moje-fotka.jpg" alt="Popis" loading="lazy" />
  <figcaption>Volitelný popis pod fotkou</figcaption>
</figure>

2 fotky vedle sebe:

<div class="post-img-pair">
  <figure class="lb-trigger">
    <img src="fotky/fotka-1.jpg" alt="Popis 1" loading="lazy" />
    <figcaption>Popis 1</figcaption>
  </figure>
  <figure class="lb-trigger">
    <img src="fotky/fotka-2.jpg" alt="Popis 2" loading="lazy" />
    <figcaption>Popis 2</figcaption>
  </figure>
</div>

3 fotky vedle sebe: — stejné jako pair, ale třída je post-img-trio a vložte tři <figure> bloky.

6 fotek v mřížce (2 řady × 3 sloupce):

<div class="post-img-grid6">
  <!-- Zkopírujte tento figure 6× a vyplňte src + alt -->
  <figure class="lb-trigger">
    <img src="fotky/fotka-X.jpg" alt="Popis" loading="lazy" />
  </figure>
</div>

Třída lb-trigger Každý <figure> nebo <div> s třídou lb-trigger se automaticky přidá do lightboxu. Kliknutím se otevře zvětšená verze a šipkami nebo klávesami ←→ lze listovat. Bez této třídy lightbox nefunguje.

7

Nastavte navigaci mezi příspěvky

Na konci sekce post-body je navigace předchozí/následující. Vyplňte odkaz a název příspěvku. Pokud příspěvek nemá jednu stranu (první nebo poslední v seznamu), celý příslušný <a> tag smažte.

<nav class="post-nav">
  <!-- Předchozí (starší) příspěvek -- smažte pokud neexistuje -->
  <a href="blog-predchozi.html" class="post-nav-prev">← Název předchozího</a>
  <!-- Následující (novější) příspěvek -- smažte pokud neexistuje -->
  <a href="blog-dalsi.html" class="post-nav-next">Název dalšího →</a>
</nav>

Nezapomeňte Po přidání nového příspěvku aktualizujte i navigaci v sousedních příspěvcích — v tom nejnovějším přidejte odkaz dopředu, v nejstarším dozadu.

8

Aktualizujte postranní panel (sidebar)

V postranním panelu je seznam dalších příspěvků. Přidejte tam odkaz na nový příspěvek a případně odstraňte starý, pokud jich je příliš mnoho. Nechte max. 3–4 položky.

<ul class="sidebar-posts">
  <!-- Zkopírujte a vyplňte pro každý existující příspěvek -->
  <li>
    <time>červen 2025</time>
    <a href="blog-nazev.html">Název příspěvku</a>
  </li>
</ul>

Tip Aktualizujte sidebar ve všech existujících příspěvcích, aby byl seznam vždy aktuální. Stačí zkopírovat blok sidebar-posts a vložit ho do ostatních souborů.

9

Přidejte příspěvek na stránku blog.html

Otevřete soubor blog.html. Najděte komentář  a hned za ním vložte novou kartu. Nejnovější příspěvek patří nahoře.

Zkopírujte celý tento blok a vyplňte zvýrazněné části:

<article class="blog-card reveal">
  <a href="blog-nazev.html" class="blog-card-img">
    <img
      src="fotky/titulni-foto.jpg"
      alt="Popis titulní fotky"
      loading="lazy" />
  </a>
  <div class="blog-card-body">
    <div class="blog-meta">
      <time datetime="2025-06-15">15. června 2025</time>
      <span class="blog-tag">Kategorie</span>
    </div>
    <h2 class="blog-card-title">
      <a href="blog-nazev.html">Název příspěvku</a>
    </h2>
    <p class="blog-card-perex">
      Krátký perex — 1–2 věty, které zaujmou a naznačí téma.
    </p>
    <a href="blog-nazev.html" class="blog-read-more">Číst dál →</a>
  </div>
</article>

10

Aktualizujte blog strip na index.html

Na hlavní stránce je malý blok s nejnovějším příspěvkem. Otevřete index.html, najděte sekci id="blog-strip" a vyplňte odkaz, fotku, název a datum.

<div class="bs-simple reveal">
  <a href="blog-nazev.html" class="bs-thumb">
    <img
      src="fotky/titulni-foto.jpg"
      alt="Popis fotky"
      loading="lazy" />
  </a>
  <div class="bs-simple-text">
    <p class="bs-latest-label">Nejnovější příspěvek</p>
    <h3 class="bs-latest-title">
      <a href="blog-nazev.html">Název nejnovějšího příspěvku</a>
    </h3>
    <p class="bs-latest-date">
      <time datetime="2025-06-15">15. června 2025</time>
    </p>
  </div>
</div>

11

Přehled všech formátování textu

Kompletní tabulka dostupných bloků ve vzoru příspěvku:

HTML třída / tag	Co dělá — kdy použít
<p class="post-lead">	Velký kurzívní úvodní odstavec. Vždy jako první blok textu. Jen jednou.
<p>	Normální odstavec. Hlavní tělo textu. Opakujte libovolně.
<p class="post-intro">	Zvýrazněný odstavec — silnější, tmavší. Pro klíčovou myšlenku nebo přechod sekce.
<h2>	Mezititulek. Strukturuje delší příspěvky. Nepoužívejte pro krátké texty.
<blockquote class="post-quote">	Citát nebo vytažená myšlenka. Zlatohnědý levý rámeček. Pro cizí i vlastní citáty.
<div class="post-infobox">	Informační box. Pro technické detaily, poznámky, tipy, fact-boxy.
<figure class="post-img-full lb-trigger">	Jedna velká fotka přes celou šířku textu. Kliknutím lightbox.
<div class="post-img-pair">	Dvě fotky vedle sebe. Vložte dvě `<figure class="lb-trigger">`.
<div class="post-img-trio">	Tři fotky vedle sebe. Vložte tři `<figure class="lb-trigger">`.
<div class="post-img-grid6">	Šest fotek v mřížce 2×3. Vložte šest `<figure class="lb-trigger">`.
<hr class="post-hr">	Jemný vodorovný oddělovač sekce. Pro výrazný předěl v textu.
<a class="blog-read-more">	Odkaz „Číst dál" nebo odkaz na Google Photos album. Zlatohnědý text s šipkou.
<nav class="post-nav">	Navigace předchozí/následující příspěvek. Vždy na konci post-body.

✓

Rychlý checklist před zveřejněním

Soubor je pojmenován blog-nazev.html bez mezer a diakritiky.
Vyplněny <meta description> a <title>.
Titulní fotka (hero) má správný src a alt.
Datum a kategorie jsou nastaveny.
Všechny fotky mají třídu lb-trigger pro lightbox.
Navigace předchozí/následující odkazuje na skutečně existující soubory.
Sidebar obsahuje aktuální seznam příspěvků.
Příspěvek je přidán jako karta na blog.html (nahoře).
Blog strip na index.html ukazuje nejnovější příspěvek.
Sousední příspěvky mají aktualizovanou navigaci a sidebar.

Jak napsat nový blog
a nalinkovat ho na web

Obsah

Použít generátor — nejrychlejší cesta

Zkopírujte šablonu

Přejmenujte soubor

Vyplňte záhlaví a meta

Nastavte titulní fotku (hero)

Napište text příspěvku

Vložte fotografie

Nastavte navigaci mezi příspěvky

Aktualizujte postranní panel (sidebar)

Přidejte příspěvek na stránku blog.html

Aktualizujte blog strip na index.html

Přehled všech formátování textu

Rychlý checklist před zveřejněním

Jak napsat nový bloga nalinkovat ho na web

Obsah

Použít generátor — nejrychlejší cesta

Zkopírujte šablonu

Přejmenujte soubor

Vyplňte záhlaví a meta

Nastavte titulní fotku (hero)

Napište text příspěvku

Vložte fotografie

Nastavte navigaci mezi příspěvky

Aktualizujte postranní panel (sidebar)

Přidejte příspěvek na stránku blog.html

Aktualizujte blog strip na index.html

Přehled všech formátování textu

Rychlý checklist před zveřejněním

Jak napsat nový blog
a nalinkovat ho na web