Jak vložit widgety Tumblr do postranního panelu

Úvod

Mnoho webových stránek nabízí widgety, které můžete vložit do svého blogu a tak výrazně rozšířit možnosti jeho úpravy. Pokud vaše téma na Tumblr obsahuje postranní panel (sidebar), stačí vložit jediný řádek HTML kódu do značky sidebar a widget se objeví. Kód vygeneruje samotná stránka poskytující widget, takže programátorské znalosti nejsou potřeba. Tumblr má vestavěný HTML editor s vyhledávacím polem, které vám rychle pomůže najít tag sidebar.

Kde najít widgety

Navštivte stránky jako Widgetbox, ShareThis nebo Tumblring. Každá z nich nabízí různé typy widgetů – od tlačítek sociálního sdílení přes hudební přehrávače až po vyhledávače. Postup generování kódu se může lišit, ale všechny poskytují jasné instrukce.

Postup krok za krokem

1. Vyberte widget a nastavte vzhled. Většina widgetů umožňuje zvolit rozvržení, barvy či písmo. Pokud například vkládáte hudební přehrávač, možná budete muset nejprve vytvořit playlist podle pokynů poskytovatele.
2. Vygenerujte HTML kód. Po nastavení klikněte na tlačítko „Generate HTML“ (nebo podobné) a zkopírujte kód z textového pole.
3. Uložte kód pro případnou úpravu. Otevřete Notepad, vložte kód a uložte soubor pod názvem, který vám připomene, o jaký widget jde (např. "widget_music.html").
4. Otevřete editor HTML v Tumblru. Přihlaste se na svůj dashboard, klikněte na ikonu ozubeného kola u požadovaného blogu, zvolte „Customize“ a poté „Edit HTML“.
5. Uložte originální HTML téma. V editoru zkopírujte celý obsah do nového souboru (např. "tumblr_original.html"). Tento soubor vám poslouží jako záloha, pokud budete chtít změny vrátit.
6. Najděte tag sidebar. V editoru stiskněte Ctrl+F, zadejte slovo sidebar a najděte otevírací značku, např. <div id="sidebar">. Tag končí </div>.
7. Vložte kód widgetu. Umístěte zkopírovaný HTML kód **uvnitř** značky <div id="sidebar">, ale **mimo** samotné úvodní a závěrečné úhlové závorky. Výsledek bude vypadat takto:
   <div id="sidebar">

</div>
8. Uložte a otestujte. Klikněte na „Update Preview“, podívejte se na náhled. Pokud vše vypadá podle očekávání, stiskněte „Save“. V opačném případě můžete kód nahradit původním souborem ze kroku 5 a proces opakovat.

Tipy

• Pokud vkládáte více widgetů, vkládejte je v pořadí, v jakém chcete, aby se zobrazily v postranním panelu.
• Mezi widgety můžete vložit prázdné řádky (<br>) nebo CSS třídy pro lepší rozestup.