25. 7. 2017

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.

4 komentáře:

  1. tak to sú veľmi užitočné rady, ktoré sa dajú krásne zúžitkovať! :).

    KEJMY ♥.

    OdpovědětVymazat
  2. Šikovné rady, já jsem v HTML uplně ztracena. Sice jsem se to na střední škole učila, ale to už je dávno.
    http://life-by-marie.blogspot.cz

    OdpovědětVymazat
    Odpovědi
    1. Také jsme to teď ve škole krátce prolítli, ale dost silně pochybuju, že z toho někomu něco v hlavě zůstalo alespoň do konce hodiny. :D Já na to běžně chodím způsobem "pokus-omyl-google". :D

      Vymazat