9. júna 2018

Poďme sa hrať s bloggerom/07 (...ako si nainštalovať krásne fonty s diakritikou...)

Po dlhom čase vás opäť vítam pri novom článku týkajúcom sa vylepšovania blogu. Dnes vás čaká veľmi jednoduchý návod, v ktorom sa dozviete, ako si môžete za pár minút zmeniť písmo na blogu a dodať mu tak nový šmrnc. Pretože, úprimne, aj keď mám blogger rada, v základných nastaveniach neponúka veľa fontov, ktoré by podporovali aj slovenskú abecedu a tým správne zobrazovanie jej diakritiky. Ale to sa dnešným článkom zmení, lebo si ukážeme, ako si zadarmo nainštalovať písmo podľa vlastného gusta, kde sa o diakritiku už nemusíme báť...👍
1.
Prejdime na stránku fonts.google.com
 2.
Pod každý font môžete zadať svoj vlastný text, a tak otestovať diakritiku písma. Ja som použila jednoduchý pangram (ďakujem Wikipédia, že som o čosi múdrejšia! 😄) v znení: Kŕdeľ ďatľov učí koňa žrať kôru + doplnila som chýbajúce písmenká slovenskej abecedy, ako môžete vidieť aj na obrázku nižšie, a klikla na APPLY TO ALL FONTS.
 3.
Text sa aplikoval na všetky písma, a tak môžeme vidieť, ktoré písma nepodporujú slovenskú abecedu.
 4.
Fontov tu nájdete požehnane, takže je z čoho vyberať. Ak vám predsa len už nejaký padol do oka, tak si ho môžete pridať do "košíka" dvoma spôsobmi:
a) kliknite na to malé plus. Font sa vám automaticky pridá do výberu a môžete si hľadať ďalšie písma, ktoré by ste chceli použiť na blog a rovnako ich pridať kliknutím na plus.
b) kliknite na názov písma, čím sa vám zobrazí detailnejšie.
5.
Ak ste sa rozhodli rozkliknúť si písmo, zobrazí sa vám komplet celá abeceda, a k tomu si ho môžete ešte raz overiť. Ak sa vám páči, vyberte možnosť SELECT THIS FONT.
 6.
Písmo sa vám pridá do výberu alebo môžeme povedať, do pomyselného košíka.
7.
Ak by ste si to rozmysleli a nejaký z vybraných fontov by sa vám nepáčil, dá sa z výberu jednoducho odstrániť.

8.
Ako môžete vidieť, nakoniec som si vybrala až dva fonty. A teraz je načase nainštalovať ich. Rozkliknite si výber a zvoľte možnosť CUSTOMIZE.
 9.
Skrolujte až na koniec, kde nájdete kolonku Languages. A teraz POZOR! Toto je najdôležitejší krok, bez ktorého vám diakritika na blogu nebude fungovať. Musíte zaškrtnúť možnosť Latin Extended, čím sa vám latinka rozšíri a nemusíte sa báť, že by vám diakritiku nezobrazovalo správne (ak vidíte na mojom blogu správnu diakritiku, tak to na 100% funguje! 😁).
 10.
Tak, a teraz ideme fonty nainštalovať. Prejdite na svoj blogger účet a kliknite na Motív➝Upraviť kód HTML.
 11.
Kliknite hocikde v HTML kóde a naraz stlačte klávesu Ctrl + F. Zobrazí sa vám vyhľadávacie okno, kde zadajte <head> Vyhľadaný kód sa vám v texte zvýrazní.
 12.
Teraz sa vráťte na stránku Google Fonts a skopírujte si celý kód, ktorý vám bol vygenerovaný (viď obrázok nižšie).
 13.
Tento bod je opäť veľmi dôležitý, bez neho vám písmo na blogu nebude fungovať! 
Skopírovaný kód vložte nad vyhľadaný kód <head> a za slovo "stylesheet" napíšte lomku (viď obrázok nižšie). Kód uložte.
 14.
Teraz nás budú zaujímať kódiky v kolonke Specify in CSS, z ktorých si vytvoríme CSS kód pre zmenu písma na blogu.
15.
Po uložení HTML kódu v nastaveniach HTML prejdite do úpravy motívu (Prispôsobiť) a vyberte možnosť Rozšírené➝Pridať CSS. Ak chceme zmeniť písmo nadpisu, tak kód bude vyzerať takto:
h3.post-title {TU ZADAJ CSS FONTU}
napr.:
h3.post-title { font-family: 'Cinzel', serif; }
...
font-family: 'Cinzel', serif; je kódik, ktorý som si skopírovala zo spomínanej kolonky Specify in CSS.
 16.
Konečný výsledok...
...
Zmena písma na blogu je veľmi jednoduchá a dúfam, že vám tento postup, ako tak pomohol. Nezabudnite, najdôležitejšie je zaškrtnúť Latin Extended a do skopírovaného kódu, ktorý vkladáte nad <head> dopísať za slovo "stylesheet" lomku. Potom si už iba zvoliť "miesto" (napr. zmena fontu príspevkov, bočného panela, citácií...), kde chcete zmeniť písmo a do zátvoriek dopísať kód skopírovaný z kolonky Specify in CSS. A máte hotovo! 😊
...
Mám tu pre vás ešte pár kódov, ktoré vám pomôžu zmeniť písmo určitému miestu na blogu:
Zmena písma nadpisov článkov
h3.post-title {TU ZADAJ CSS FONTU}

Zmena písma hlavičky dátumu
.date-header span {TU ZADAJ CSS FONTU}

Zmena písma hlavičiek v bočnom paneli
.sidebar .widget h2 {TU ZADAJ CSS FONTU}

Zmena písma textu v pravom bočnom paneli
.column-right-inner {TU ZADAJ CSS FONTU}

Zmena písma textu v ľavom bočnom paneli
.column-left-inner {TU ZADAJ CSS FONTU}

Zmena písma pre text článku + päty príspevku
#Blog1 {TU ZADAJ CSS FONTU}

Zmena písma v päte príspevku
.post-footer {TU ZADAJ CSS FONTU

Zmena písma v päte blogu
.footer-outer {TU ZADAJ CSS FONTU}

Zmena písma prerušovaného prechodu
.jump-link {TU ZADAJ CSS FONTU}

Zmena písma v citáciach
.post blockquote {TU ZADAJ CSS FONTU}
...
Majte sa krásne a v prípade otázok, či nejasností mi pokojne napíšte do komentárov...😉

10 komentárov:

  1. Moc pěkný a užitečný článek :) Do teď jsem si s blogerem moc nehrála, protože nejsem žádný velký html expert, ale tohle bych podle tvého skvělého návodu zvládla :)

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne♥^_^♥ Som veľmi rada, že ťa tento postup zaujal a buď si istá, že nič ľahšie ani neexistuje, aj ja som prekvapená, že som to zvládla :D Prajem ti krásny deň...

      Odstrániť
  2. Tohle se mi bude vážně hodit, až se někdy rozhodnu trošku poupravit vzhled blogu! :D Mám s tím vždycky problém. :)

    OdpovedaťOdstrániť
    Odpovede
    1. Som veľmi rada, že ti môžem takto pomôcť :) Maj sa krásne!

      Odstrániť
  3. Skvelý článok a obzvlášť pre takých technických antitalentov ako som ja. :D Kedysi dávno som len zo zvedavosti klikla na HTML a tak som sa zľakla, že som to hneď aj zatvorila. :D Ale je neskutočné, koľko sa s tým dá robiť, keď človek vie, ako na to. Super, že nám to takto ukazuješ. :)

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne♥^_^♥ Musím povedať, že som mala rovnaké pocity aj ja, keď som po prvýkrát rozklikla HTML :D Absolútny chaos! Ale nakoniec to nie je až taká hrôza, ako to vyzerá :) Som veľmi rada, že ťa článok zaujal a bol nápomocný...maj sa krásne!

      Odstrániť
  4. Pěkný článek, já se v tom sice už radši nepřehrabuju potom, co si mi to tam hezky takhle nastavila, ale vždy si ráda přečtu takový typ tvých článků.

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne, Tánička♥♥♥ Som veľmi rada, že sa ti písma páčia, ale určite, ak budeš chcieť niekedy zmenu v tomto smere, tak mi napíš - určite sa dohodneme :D
      Prajem ti nádherný deň!

      Odstrániť
  5. Touto rubrikou zachraňuješ životy mnohých bloggerov, vrátane toho môjho.:D Keby som nebola taká lenivá a prokrastinácia sa nestala mojou vernou spoločníčkou, možno by som sa aj pustila do nejakých menších úprav. No v prvom rade je asi potrebné rozhýbať sa s článkami a potom riešiť ten zvyšok..:D Každopádne, skvelý článok Mony.:) V budúcnosti bude isto nápomocný.

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne!♥ Veru nejaký článoček od teba by bol vrelo vítaný!!! :-D Joj, kiežby tá prokrastinácia odišla :-) Tiež ju poznám, otrava jedna, ale človek ju porazí len tým, že sa jej vzoprie...takže sa naozaj veľmi-preveľmi teším na tvoje budúce články a teší ma, že článoček inšpiroval :))

      Odstrániť