9. júna 2018

Poďme sa hrať s bloggerom/07 (...ako na 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...😉

4 komentáre:

  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ť