Dostal jsem opět pár dotazů, jak něco opravit na Blogger.com, takže tento příspěvek je určen všem, kdo by si chtěli dělat nějaké ruční úpravy kódu v šabloně na tomto blogovacím systému, který nabízí Google a kde hostuji i tento blog.
Navazuji tak na předchozí příspěvek z cyklu - Jak upravit blog na Blogger.com, kde jsem shrnul některé základní zdroje. Začátečníkům bych ale doporučil raději najít na Webu nějaký "Free template", který bude vyhovavat jak graficky, tak i funkčně, neboť ruční úpravy kódu šablony jsou mírně náročné.
(Nějaké linky na dobré šablony zdarma jsem již kdysi zmiňoval, stačí si tedy jen vybrat.)
Jak na ruční úpravy blogu na Blogger.com?
Jeden z dotazů čtenářů byl na téma, jak přidat do blogu nějaké horní navigační Drop-Down menu, kdy jsem poradil najít si na Webu nějaké Free menu, příp. vybrat si z nabídky List of Menus, kdy pak stačí HTML kód přidat v Layoutu stránek do hlavičky a CSS definice menu dát přímo do šablony.
Vytvořil jsem testovací blog "Test Web Template", kde v rychlosti ukážu integraci menu a mírné změny šablony blogu.
Při vytvoření blogu jsem nechal základní template (Minima), který se nabízí při vytvoření každého nového blogu. Při následném zobrazení právě vytvořeného blogu vypadá takto základní design:
Základní strukturu má i Layout stránek:
Jak je vidět na obrázku, tak není možno přidávat např. žádné nové elementy pod NavBar, tj. do hlavičky stránky, což je podstatné omezení, když chci třeba přidat do hlavičky blogu nějaké menu.
Chybí volba "Add a Gadged" u horní komponenty "Test Web Template (Header)". Jednoduchou opravou šablony se to dá ale rychle opravit.
Jak umožnit přidání komponent do hlavičky blogu?
Nutno opravit šablonu blogu (menu Layout - Edit HTML):
- v okně se zobrazeným kódem šablony vyhledáme řetězec:
<b:section class='header'
- nějak takto bude vypadat nalezený řádek:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- u parametrů maxwidgets a showaddelement změníme hodnoty:
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
Výsledný Layout (menu Layout - Page Elements) pak bude mít tuto podobu, kdy přibyla volba "Add a Gadget" v hlavičce blogu, což umožňuje do hlavičky přímo přidat "HTML/JavaScript" kód.
Po stisku "Add a Gadget" se zobrazí výběr dostupných komponent na Blogger.com z různých kategorií. Pro účely přidání menu do hlavičky blogu můžeme vybrat ze seznamu "HTML/JavaScript" komponentu, kdy do okna Content vložíme daný kód:
Jak přidat MENU do blogu na Blogger.com?
Máme-li upravenou šablonu dle výše uvedeného postupu, můžeme do hlavičky přidávat libovolnou "HTML/JavaScript" komponentu.
Čtenář, který se na uvedený problém ptal, mi zaslat jedno takové ukázkové Drop-Down menu, které se skládá ze dvou sobourů:
- CSS definice (dropdown_one.css),
- HTML kód menu (dropdown.html),
+ dva malé obrázky (down-arrow.gif, right-arrow.gif).
(Nahrál jsem to pro zjednodušení na Google pages, ale autorská práva patří autorovi, jak uvedeno v hlavičce souboru.)
Menu přidáme do blogu ve dvou krocích:
1. Přidání CSS definice do šablony blogu:
V šabloně na Blogger.com jsou v <HEAD> tagu, v <b:skin> sekci, definované styly pro všechny prvky stránky. CSS definice vložíme ze souboru dropdown_one.css pro názornost na konec <b:skin> sekce, která končí řetězcem "]]></b:skin>", což je obvykle před </HEAD> tagem.
- v šabloně (menu Layout - Edit HTML) najdeme řetězec:
]]></b:skin>
- před tento řádek, tj. před uzavírací znaky "]]>", pak vložíme CSS definice z dropdown_one.css souboru.
Pokročilý uživatel může odkazovat na externí .css soubor uložený někde na serveru, pro jednoduchost ale stačí přidat všechny řádky z .css souboru přímo do šablony.
2. Přidání HTML kódu menu do Layoutu blogu:
Máme-li tedy CSS vložený do šablony, můžeme přidat vlastní HTML kód menu ze souboru dropdown.html, který lze vložit přímo do šablony, ale z důvodu rychlejších úprav menu je vhodnější přidat ten HTML kód jako novou komponentu do hlavičky blogu.
V menu Layout - Page Elements, zvolíme "Add a Gadget" v hlavičce blogu, z nabízených komponent vybereme "HTML/JavaScript" a do okna "Content" vložíme HTML kód (úpravy textu menu a jednotlivých voleb můžeme nechat na později):
Po uložení si můžeme zobrazit titulní stránku blogu, zda se nám vložení úspěšně podařilo a hned vidíme, že nás čekají další úpravy:
Jak zvětšit šířku hlavičky blogu na Blogger.com?
Z ukázky výše je vidět, že celé menu se nevleze do hlavičky a je tak zalomeno na dvou řádcích. Stačilo by upravit HTML kód menu a nějaké volby zrušit, ukážu zde ale, jak hlavičku blogu rozšířit.
- v šabloně (menu Layout - Edit HTML) najdeme řetězec:
#header-wrapper
- nějak takto bude vypadat nalezená definice:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
- stačí zvětšit šířku width:660px; např. na width:700px; a současně je možno odstranit rámeček kolem hlavičky, border:0px, což je nutno opravit v sekci #header-wrapper i v následující #header.
Kdo by si chtěl současně s hlavičkou změnit v šabloně i šířku celého blogu, velikost a rozmístění jednotlivých sekcí blogu, tak si upraví v šabloně parametr "width" v sekcích #outer-wrapper, #main-wrapper, příp. #sidebar-wrapper, kdy je možné upravit i pozici elementů nebo přidat další sloupce blogu.
Možnosti úprav blogu jsou neomezené!
Na Blogger.com se v kódu "XML templates" používá XHTML syntaxe s přesnými pravidly a chvíli trvá, než se pochopí logika struktury jednotlivých elementů blogu. Když se tomu ale chvíli věnujeme, tak následné úpravy jsou již docela jednoduché.
Já osobně jsem třeba tyhle ukázkové "úpravy" sázel z hlavy, neboť již mám docela zafixované, co a kde změnit. Jen se mi s tím nějak nechce moc hrát, proto i tento blog je tak amatérský a asi navždy zůstane ;-)
U tohoto testovací příkladu jsem ještě odstranil horní NavBar, jak jsem o tom již kdysi psal:
Nyní stačí jen upravit HTML kód menu, doplnit správné adresy stránek a podstránek, či některé volby vyřadit. Místo textu "Test Web Template" v hlavičce je možno třeba nahrát nějaký tématický obrázek, upravit barvy, změnit CSS definice pro typy písma, pozadí, rámečky...
No, není časově úspornější si spíše vybrat a nainstalovat nějakou free šablonu pro blog, která je již řádně optimalizovaná, obsahuje nějaké integrované menu, ve které pak budeme dělat jen nějaké drobné úpravy nebo přidávat hotové komponenty?
Záleží na každém, co preferuje, všechno má své výhody i nevýhody.
Cayman Islander | Diary of a Freelance Programmer traveling the world
Partners & Sponsors
Advertisement
10 comments :
Díky moc za návod, nečekal jsem že to pochopím protože jsem docela na PC tupec, ale tento návod byl fakt hezky napsaný, zvládl jsem to během 15 minut, ještě jednou díky.
Však já vím, že ty to zvládáš rychle, ale je tady pár čtenářů, kteří na Blogger.com začínají, proto ten detailní popis. Ať se daří.
Skvely popis, ted zkousim pridat 3. sloupec, ale mi to nejak nejde. Budu to jeste zkouset, Neni nejaky popis co je "#outer-wrapper, #main-wrapper, #sidebar-wrapper"?
Moc diky
Martin
Chtěl jsem se ještě zeptat, když dám to menu vlastně dolů pod obrázek tak mi ta vyjíždějící lišta menu mizí pod článkem nejde to udělat tak aby nemizela?:-)(Nevím jestli to jde z mého krkolomného popisu pochopit:-))
Mrkni na Test Web Template, tam to Drop-Down menu funguje v pohodě, když jsem to dal pod hlavičku. Vůbec netuším, čím by to u tebe mohlo být ;-)
Zajímavé,podle mě to nejspíš bude asi templatem blogu...
S "Bloggerom" sa dajú robiť fakt rôzne veci, tiež na ňom "fičím"!
Jsem líná všechno číst, omlouvám se jestli se ptám na něco z článku. Já jen.. vytvořila jsem pěknej blog, nahoře mám rozdělení stránek (rubrik) ale články se mi publikují stále jen na tu hlavní x/ Co s tím? A co vlastně dělají "štítky"?.. vůbec se v tom nevyznám..
zdravim a nejaky popis na zdielanie Facebooku ? každeho prispevku alebo fotky ?
Zdravím :-) Mohla bych se prosím zeptat - dle Vašeho návodu jsem si vytvořila na blogu jednoduché menu, ale nevím si rady s nastavením písma v tomto menu, jeho barvě a také s doplněním správných adres stránek a podstránek, aby mi po kliknutí na položku menu nepsalo "Omlouváme se, ale hledaná stránka blogu neexistuje". Předem moc děkuji za radu!!