Jak na Blogger: Jak si vylepšit menu

V druhém článku ze série blogových tipů se zaměříme na menu. Jak mít text v menu zarovnaný na střed nebo do bloku? Jak mít všechny názvy gadgetů napsané velkými písmeny automaticky, bez nutnosti je ručně přepisovat? A jak to lidé dělají, že mají za těmi názvy pozadí? Pojďme se na to společně podívat!

1. Zarovnání textu

Hned první bod je jednoduchý jako facka a plno z vás ho už možná zná, i přes to ho ale zmíním, neboť někomu určitě přijde vhod.

Pokud máte v menu text, který byste rádi zarovnali na střed, do prava nebo do bloku, stačí jít do HTML úpravy daného textu a před jeho začátek zadat:

1. <center> pro zarovnání doprostřed
2.  <right> pro zarovnání vpravo
3. <justify> pro zarovnání do bloku

Na konec textu pak už jen dopiště </center> (případně </right> anebo </justify>) a máte hotovo.

Funguje to samozřejmě nejen u textů, ale i u jakéhokoliv obsahu widgetů, kterým můžete přímo během úpravy obsahu upravovat i HTML kód.

2. Názvy gadgetů zarovnané doprostřed

Text jste už zarovnali, teď ještě názvy gadgetů? Inu, pojďme na to!

Otevřete si přizpůsobení šablony vašeho blogu a v záložce pokročilé sjeďte úplně dolů, kde najdete Přidat CSS, tam pak vložte tento kód:

.sidebar h2 {
text-align: center;
}

"Center" můžete v případě potřeby nahradit pojmem "right", které vám názvy zarvoná k pravé straně.

3. Názvy gadgetů velkými písmeny

Pokud chcete, aby se vám názvy gadgetů automaticky zobrazovaly napsané velkými písmeny a vy tak nemuseli každý název ručně přepisovat pokaždé, kdy změníte názor, tenhle trik váš problém hravě vyřeší.

V tomto případě platí úplně stejný postup, jako u bodu 2 akorát vložíte kód:

.sidebar h2 {
text-transform: uppercase;

}

V případě, že jste použili i předchozí kód, přidejte do závorky pod "text align:" pouze část "text-transform: uppercase;".

4. Pozadí gadgetů

V případě, že chcete, aby se vám za názvem gadgetu zobrazovalo barevné pozadí, otevřete si úpravu CSS, jako v předchozích případech.

Pokud si vystačíte pouze s obyčejným barevným pozadím, použijte kód:

.sidebar h2 {
padding: Xpx;
background: #YYYYYY
}

"X" označuje počet pixelů nad a pod textem. Pohrajte si s ním, vyzkoušejte různé hodnoty až dojdete k té, která vám bude vyhovovat. Místo "YYYYYY" doplňte kód požadované barvy (tu zjistíte např. zde).

Pokud jste náročnější a preferujete pozadí s motivem, prvním krokem je nahrání daného obrázku někam na internet (třeba do galerie od Googleu), abyste získali jeho URL adresu. Jestli jste si takový obrázek našli někde na internetu a nevztahují se na něj autorská práva, jenž by vám zabraňovala v jeho použití, máte o starost méně. Je ale třeba myslet na to, že pokud bude daný obrázek z místa, kde jste ho vzali, odstraněn, zmizí i z vašeho blogu, je proto lepší si ho uložit a znovu nahrát někam, kde ho budete mít pod palcem jen a jen vy.

Pro ukázku použijeme tento obrázek:

Jeho URL adresa vypadá následovně: http://nd03.jxs.cz/189/312/df599a8adc_104372379_o2.png.

Pozor! Je nutné, aby adresa vedla přímo na obrázek, ne do galerie.

Když už máme nachystaný obrázek, přesuneme se opět do úpravy CSS (viz výše). Tentokrát zadáme následující:

.sidebar h2 {
background-image:url(sem vložte odkaz na obrázek);
background-position: top center;
background-repeat: no-repeat;
height: XYpx;

padding-top: 0px;
}

Toto je základní kód, po jehož zadání názvy gadgetů vypadají následovně:

Pokud to stále není ono, ukážeme si i další možnosti úprav:

"height:" - Jde o výšku pozadí, číslo upravte tak, aby vám tam obrázek hezky seděl. Pokud zadáte číslo, které je větší než výška obrázku a nemáte zaplé opakování (viz níže), budete mít pod obrázkem barevný pruh.

"background-position:" - Zde si nastavujete umístění pozadí. "Top center" zajistí, že se vám bude obrázek rovnat k prostředku horní hrany.

"background-repeat:" - Pokud dáte "no-repeat", obrázek se nebude opakovat. V případě motivu, kde opakování vyžadujete, zadejte "repeat".

"padding-top:" - Pokud necháte hodnotu na 0, text bude hned na horním okraji obrázku. V případě, že chcete, aby mezi horním okrajem a textem byla mezera, či byl text rovnou uprostřed, zadejte nějakou hodnotu a sledujte, co to udělá, od toho odhadnete, kolik zhruba pixelů je potřeba, aby to vypadalo jak chcete a zkoušejte dál, dokud nenajdete to pravé.

V mém případě bylo ideální odsazení 10px, výsledek vypadal takto:

Další možnost je, že nechcete do pozadí kompletní výplň, ale třeba jen jednu vodorovnou čáru či cokoliv jednoduššího, co nezabírá celou plochu. Zkrátka a dobře, něco ve stylu tohohle:

V tomto případě je postup vlastně úplně stejný, jako u pozadí výše. Nicméně je třeba si více vyhrát s čísly a rozměry, aby vám text zapadal tak, jak potřebujete.

Pozadí samozřejmě můžete kombinovat i s ostatními prvky, které jsme si v článku uvedli. Ostatně i na mých ukázkách můžete vidět automatická velká písmena a zarovnání na střed.

Upřímně doufám, že bylo všechno srozumitelné a jasné. Pokud by tomu tak nebylo, neváhejte se v komentářích na cokoliv zeptat, ráda pomohu a dovysvětlím.