Popíšeme si postup vložení vyhledávacího okénka Google do klientských stránek systému.

Na stránce http://www.google.com/coop/cse/ klikneme na modré tlačítko "Create a Custom Search Engine" (vytvoření nového vyhledávacího pole). Google nás vyzve k přihlášení.

Pokud nemáte na Google uživatelské jméno, klikněte vpravo dole na odkaz "Create an account now" a registrujte se. Přijde Vám email, ve kterém kliknete na první odkaz a tím potvrdíte registraci. Poté se opět vrátíte na stránku http://www.google.com/coop/cse/ a kliknete na "Create a Custom Search Engine".

Přihlásíme se naším Google uživatelským jménem (většinou ve formě emailové adresy). Na další stránce vyplníme položky:
- "Search engine name:" např. "osobni vyhledavani"
- "Search engine description:" např. "vyhledavac na me stranky"
- "Search engine keywords:" např. "osobní stránky, webgarden, ..."
- "Search engine language:" vybereme "czech"
- "Sites to search:" vyplníme adresu našich stránek ve formátu mojestranka.webgarden.cz (vždy bez www.!)
- nakonec dole zaškrtneme souhlas s pravidly použití "I have read and agree to the Terms of Service."
- ostatní položky ponecháme nezměněné

Klikneme na tlačítko next a posléze finish.

Na další stránce vidíme v sekci "Search engines I've created" (vyhledávače, které jsme vytvořili) naše vyhledávací pole (např. "osobni vyhledavani"). Klikneme na odkaz "control panel" a na další stránce na odkaz "code". Uprostřed stránky uvidíme možnosti volby vzhledu vyhledávacího panelu. Doporučujeme zvolit spodní variantu (s vodotiskem uprostřed vyhledávacího okénka). Klikneme na tlačítko "save changes" (uložit změny) a v okně pod ním označíme celý kód a zkopírujeme stiskem kláves ctrl+c.

Nyní vstoupíme do administrace našich stránek na webgarden|zone. V sekci obsah - panely vytvoříme nový "html kód" panel. Do okna "HTML kód" vložíme stiskem kláves ctrl+v kód vyhledávacího panelu. Před uložením ještě doporučuji změnit parametr z kódu size="40" na size="17" (vhodné pro většinu vzhledů, s šířkou můžeme experimentovat). Panel uložíme.

Teď už na našich stránkách nalezneme vyhledávací panel, který ale ještě nemusí být plně aktivní. Nezapomeňte, že Google nějakou dobu trvá, než zaregistruje změny na Vašich stránkách. Doba se pohybuje od několika hodin do několika týdnů. Nicméně můžete se spolehnout, že mu nic neuteče.

Dnes si ukážeme dva způsoby vložení vlastního loga do záhlaví stránek. Systém webgarden|zone umožňuje zapracovat do vzhledu stránek vlastní obrázek dvěma cestami.

První varianta je jednodušší a s tímto návodem ji zvládne každý levou zadní. Předpokládejme, že máte na svém počítači vytvořený obrázek s logem. Použít můžete standardní webové obrázkové formáty s příponami .jpg, .gif a doporučené .png (ideální poměr kvality a datového objemu).

V administraci klikneme na záložku VZHLED a EDITOR VZHLEDU a počkáme, až se javascriptový editor inicializuje. To může v závislosti na prohlížeči a počítači trvat několik sekund. Pokud najedeme kurzorem myši na náhled Naší stránky a plocha pod kurzorem zežloutne, je editor inicializovaný. Někdy je k použití editoru nutné aktualizovat internetový prohlížeč na nejnovější verzi. Editor lze spustit v prohlížeči Internet Explorer ve verzi 6 a 7, ve Firefoxu a v Opeře.

Naše stránka je rozdělena do mnoha bloků, jejich rozložení si můžeme prohlédnout na tomto schématu. Pro vložení loga je zpravidla nejvhodnější blok Horní část [#top]. Klikneme do oblasti nadpisu stránky a zobrazí se nám nabídka, která obsahuje několik odkazů. Ty reprezentují navrstvené bloky v místě, kam jsme klikli. V tomto seznamu se objevuje také námi vybraný blok Horní část. Na odkaz klikneme a administrace nám otevře do nového okna formátovací nabídku.

Formátovací nabídka upravuje vždy jeden jediný blok stránky. Je rozdělena na 4 části: základní rozměry, vlastnosti rámečku, písma a pozadí. Pokud používáme jako součást vzhledu obrázek, vkládáme ho vždy jako pozadí bloku.

Klikneme na tlačítko vybrat v části pozadí - obrázek. Administrace nám otevře další (a poslední) okénko, ve kterém možná uvidíme obrázky pro práci se vzhledem. Poprvé ale máme okno prázdné a žádné obrázky neuvidíme. Musíme je nejprve vložit (uploadovat) na server stisknutím tlačítka Procházet (nebo vybrat apod., liší se podle prohlížeče). Vyskočí nám dialog pro vložení souboru z pevného disku našeho počítače. Vybereme soubor s obrázkem loga, který jsme si předem vytvořili a potvrdíme. Vybraný obrázek uploadujeme na server stiskem tlačítka Nahrát obrázek. Po několika sekundách uvidíme výřez z obrázku v předchozím okénku, to znamená, že je již zkopírován na server. Obrázek vložíme do pozadí bloku kliknutím na odkaz vložit obrázek. Administrace nás vrátí do formátovací nabídky. Zde ještě nastavíme v části pozadí - opakování možnost neopakovat a tlačítkem Uložit potvrdíme. Objevíme se zpátky v náhledu naší stránky, která se automaticky aktualizuje a uvidíme logo v záhlaví stránky.

U některých prohlížečů budete muset stránku sami aktualizovat kliknutím na tlačítko v horní liště prohlížeče (aktualizovat, reload, obnovit apod.). Je také možné, že zvolený vzhled Vaší stránky způsobí, že nebude logo vidět. K tomu dojde například pokud je zakryté jiným blokem stránky s barevným pozadím. Pak je nutné trochu experimentovat a např. zkusit vložit logo do jiného bloku.

Více možností nám přinese druhá metoda vkládání obrázku, ale pro někoho by mohla být obtížná. V administraci klikneme na záložku VZHLED - EDITACE CSS. Css je formátovací jazyk, kterým říkáme prohlížeči, jak má texty na stránce poskládat a obarvit. Jeho princip je poměrně jednoduchý, ale skrývá také několik záludností.

V levé části obrazovky vidíme obrázky určené pro práci se vzhledem (pokud jsme si je dříve uploadovali). Mezi obrázky vložíme také naše logo stisknitím tlačítka Procházet (nebo vybrat apod.) a posléze tlačítka Nahrát obrázek. Administrace bude chvíli naše logo kopírovat na server a nakonec nám ho zobrazí mezi ostatními obrázky. Pod ním nalezneme adresu obrázku neboli URL. Adresu budeme později potřebovat.

Nyní vložíme potřebné CSS definice. Ve velkém rámečku s kódem (označeném CSS) srolujeme myší dolů na konec kódu připíšeme tyto 4 řádky: Prohlížeč stránek jsme tím informovali o tom, který blok stránky upravujeme. V tomto případě jsme zadali cestu k bloku Horní část [#top], cesty k ostatním blokům můžeme vydedukovat z tohoto schématu.

Pokud jste na Vašich stránkách experimentovali s editorem vzhledu, bude zobrazený CSS kód končit daty z editoru. Tato data bývají uvozena řádkem podobným tomuto:

 /*--31b5c4724fed3c373ca8a7dd7b471174--*/

Doporučuji vkládat Vaše CSS definice před tento řádek.

Uznačili jsme tedy blok stránky určený k úpravě a přistoupíme k vlastnímu vložení obrázku (loga) do kódu. Mezi složené závorky vložte tento řádek: Přičemž modře označenou část nahradíme naší unikátní URL adresou, zobrazenou pod obrázkem. Vlastnost background-image prohlížeči stránek říká, jaký obrázek má použít jako pozadí.

Dále můžeme ovlivnit, zda se bude obrázkové logo opakovat nebo bude na pozadí pouze jednou. Ve většině případů zvolíme druhou variantu vložením řádku (opět mezi složené závorky, tedy pod předchozí definici): Pro opakování loga na celém pozadí bloku zaměníme no-repeat za repeat, repeat-x nebo repeat-y.

CSS nám nabízí ještě jednu možnost formátování - pozice obrázkového pozadí: První hodnota ovlivňuje vodorovnou pozici obrázku ( left - vlevo, right - vpravo), druhá vertikální ( top - nahoře, center - uprostřed, bottom - dole). Uvedu ješte další příklady: Nezapomeňte, že všechny tyto změny mohou být ovlivněny vzhledem, ze kterého vycházíte. Pokud se Vám nebude dařit, buďte trpěliví a zkuste nejprve stránkám nastavit jiný vzhled (čím jednodušší, tím lépe). Některé vzhledy mají šířku nastavovanou podle aktuální velikosti obrazovky, Vaše logo se tedy může zobrazit na různých monitorech odlišně. Např. obrázek s pozicí background-position: 30% 50% ; bude na Vašem počítači akorát zarovnaný k názvu stránky, ale jinému uživateli s menší obrazovkou bude do názvu zasahovat.

Dnes jednoznačně nejpopulárnější indernetová video služba YouTube umožňuje linkování jednotlivých klipů z ostatních stránek. Ukážeme si, jak vložit video z YouTube do stránek vytvořených pomocí webgarden|zone.

Vpravo od každého klipu na YouTube nalezneme okénko nazvané Embed. Do okénka klikneme, označí se nám jeho kód a ten pomocí kláves ctrl+c zkopírujeme do schránky.

Přemístíme se do administrace webgarden|zone, vybereme některou rubriku a do rubriky přidáme nový článek. Článku vyplníme libovolný titulek (např. Moje video). U okénka Podtitulek (úvod článku) nejprve přepneme textový editor do zdrojového režimu (tlačítkem zdroj; ve zdrojovém režimu zešedne většina tlačítek editoru) a vložíme klávesami ctrl+v dříve zkopírovaný kód.

Pokud chceme k videu připsat text, přepneme textový editor zpět do editačního režimu (opět tlačítkem zdroj). Okno pro psaní textu bude prázdné, ale systém si vložený kód pamatuje. Po skončení uložíme článek stiskem tlačítka uložit změny.

Zobrazíme naše stránky a video je na svém místě. Nezapoměňte, že ve skutečnosti je video uloženo stále na serveru YouTube, takže nám prakticky nezabírá datový prostor na našich stránkách. Na druhou stranu, když autor video smaže, nebude dostupné ani od nás.