Ako upraviť mobilnú verziu webovej stránky blogu

Často venujeme veľa času a energie úprave šablóny našich blogov. Väčšina webových šablón je krásna a prepracovaná. Veľké percento čitateľov však číta blogy na mobilných zariadeniach. A tu nastáva menší problém. Mobilné šablóny väššiny blogov zostali v podobe primárnych nastavení. Všimli ste si, že napriek tomu, že hoci ste šablónu vášho blogu zmenili tak, že na prvý pohľad ani nepoznať, že patrí službe Blogger, tak mobilná šablóna zostáva stále rovnaka? Ak vás teda táto téma zaujíma, čítajte ďalej. Návod na zmenu mobilnej verzie blogu nebude vôbec ťažký.

AKO ZMENIŤ MOBILNÚ VERZIU BLOGU

Táto časť je najjednoduchšia a postačuje na ňu iba práca v redakčnom systéme služby Blogger. Netreba teda žiadne znalosti HTML a CSS.

1. V sekcií Šablóna kliknite na ozubené koliesko.

2. Zvoľte možnosť Áno na zobrazovanie šablóny pre mobil a z predvolených šablón vyberte možnosť Vlastná. Nezabudnite Uložiť.

 3. Zobrazí sa ukážka mobilnej verzie webovej stránky. Stránku však určite skontrolujte aj na mobilnom zariadení. Hotovo.

Tu to vo väčšine prípadov skončí. Môže sa však stať, že chceme upraviť vzhľad prvkov, ktoré sa zobrazujú v mobilnej verzii.

AKO UPRAVIŤ PRVKY MOBILNEJ VERZIE BLOGU

Na zmenu vzhľadu prvkov mobilnej verzie blogu použijeme CSS. Okrem základom práce s CSS potrebujeme poznať označenie jednotlivých prvkov mobilnej verzie stránky.

 1. Označenie prvkov zistíme tak, že si zobrazíme zdrojový kód stránky. Napríklad v prehliadači Mozilla Firefox klikneme na stránku blogu pravým tlačidlom myši a vyberieme možnosť View Page Source. V ďalšom okne sa nám zobrazí zdrojový kód stránky.

2. Stlačíme klávesovú skratku CTRL+F a do okienka na vyhľadávanie napíšeme mobile. Hľadáme v zdrojovom kóde, kým neuvidíme CSS kód pre mobilnú verziu stránky.

3. Tak sme našli označenia pre pre prvky, ktoré sú zobrazené v našej mobilnej šablóne. Označenia sa môžu v jednotlivých šablónach líšiť. V tomto prípade napríklad:

.mobile .post  {...}     -príspevky

.mobile .date-header span {...}     -dátum

.mobile h3.post-title {...}     -nadpis

Ak chceme zistiť, čo jednotlivé označenie znamenajú, ja to robím napríklad tak, že pridám CSS kód meniaci farbu pozadia a sledujem čo sa v šablóne zmenilo. Nastavenia CSS meníme klasický v šablóna, prispôsobiť, rozšírené, pridať CSS. Napríklad uvedený kód zmení pozadie dátumu na zelenú farbu.

.mobile .date-header span {
background-color: green;
}


Ak nechceme, aby sa niektorý prvok zobrazoval v mobilnej verzií stačí použiť  display:none; Napríklad ak nechcem v mobilnej verzií zobrazovať dátum použijem:

.mobile .date-header span {
display: none;
}
 

Týmto by úprava mobilnej šablóny mohla tiež skončiť. Môže ale nastať prípad, že chceme aby sa zobrazovali aj iné prvky, prípadne aby sa niektoré prvky zobrazovali iba v mobilnej šablóne. V tomto prípade návod pokračuje ďalej.

  AKO ZOBRAZIŤ AJ ĎALŠIE PRVKY MOBILNEJ VERZIE BLOGU

V mobilnej šablóne by sme možno radi zobrazili menu, ktoré máme vo verzií pre web. Prípadne chceme zobraziť napríklad ikony s odkazom na sociálne siete, ktoré napríklad nepotrebujeme mať vo verzií pre web. Na to slúži mobile='yes' , ktorý zobrazí prvok aj na mobilnej verzií a mobile='only' , ktorý zobrazí prvok iba na mobilnej verzií stránky. Problémom môže byť to, že tento kód musíme umiestniť do HTML šablóny blogu, čo však tiež nie je náročné.

1. V sekcií Šablóna zvolíme možnosť Upraviť kód HTML

 2. Stlačíme klávesovú skratku CTRL + F, ktorá nám zobrazí okienko na vyhľadávanie. Teraz musíme nájsť požadovaný prvok. Odporúčam vyhľadávať podľa slovenských označení prvkov, ktoré sme použili pri ich vytváraní: napríklad pravidelní čitatelia, obľúbené príspevky, návštevnosť a podobne. Ak by sme prvok nechceli mať takto pomenovaný, odporúčam ho kvôli efektívnejšiemu vyhľadaniu dočasne pomenovať a neskôr označenie v redakčnom systéme odstrániť. Nájdený prvok bude v HTML kóde farebne odlíšený.

 3. Do HTML kódu umiestnime mobile='yes' ak chceme, aby bol prvok viditeľný na webovej aj mobilnej verzií, prípadne mobile='only' ak chceme, aby bol viditeľný iba v mobilnej verzií.

<b:widget id='Followers1' locked='false' mobile='yes' title='PRAVIDELNÍ ČITATELIA' type='Followers' visible='true'>

alebo

<b:widget id='Followers1' locked='false' mobile='only' title='PRAVIDELNÍ ČITATELIA' type='Followers' visible='true'>

 
4. Šablónu uložíme a skontrolujeme zmeny. Pri úprave mobilnej šablóny však nesmieme zabudnúť, že by mala byť jednoduchá, prehľadná, grafický nenáročná a obsahovo zjednodušená.



 
Ak bol návod užitočný, určite mi zanechajte v komentároch odkaz na váš blog. Rada sa pozriem.