14. augusta 2017

Ako pridať na blog pekný font s diakritikou

Trochu som sa hrala so vzhľadom môjho blogu. Chcelo to niečo nové a zaujímavé. Niečo, čo návštevníka stránky zaujme. Tým niečím sú nove fonty písma. Samozrejme veľa fontov ponúka i samotný blogger, no ako naschvál tým najkrajším fontom chýba diakritika typická pre slovenčinu či češtinu. Nakoniec som však problém s písmom vyriešila a pre tých, ktorých už nudia klasické fonty som pripravila návod ako rýchlo a jednoducho vložiť nové druhy písma do šablóny blogu.

1.krok

Prezrite si fonty na stránke fonts.google.com a vyberte si niekoľko fontov, ktoré sa vám páčia. Ak píšete blog v slovenčine alebo češtine, nezabudnite si skontrolovať, či daný font obsahuje potrebnú diakritiku. Zvolené písmo pridáte do vášho výberu stlačením znamienka plus.


 2.krok

Samotná stránka vám vygeneruje kódy potrebné na pridanie fontov do systému blogger.



 3.krok

Skopírujeme kód, ktorý sa nám zobrazí po stlačení @IMPORT a vložíme ho do HTML kódu nášho blogu hned za znak <head>.

MOTÍV - UPRAVIŤ HTML - na začiatku HTML kódu nájsť znak <head> - za nájdený znak vložiť vygenerovaný kód - ULOŽIŤ MOTÍV



4.krok

Skopírujeme jeden z CSS kódov, ktorý nám vygenerovala stránka fonts.google.com a pridáme ho k selektoru prvku, ktorému chceme zmeniť písmo.

MOTÍV - pRISPôSOBIŤ  - ROZŠÍRENÉ - PRIDAŤ CSS - VLOŽIŤ VYBRANÝ KÓD KU VYBRANÉMU SELEKTORU - POUŽIŤ NA BLOG - späť NA SLUžBU BLOGGER





Na inšpiráciu som pripravila niekoľko CSS kódov.

TEXT V CELOM BLOGU     body { font-family: 'Amatic SC', cursive; }
TEXT ČLÁNKOV   .post  { font-family: 'Amatic SC', cursive; }
NADPISY ČLÁNKOV   h3.post-title { font-family: 'Amatic SC', cursive; }


DÁTUMY   h2.date-header { font-family: 'Amatic SC', cursive; }
NADPIS KOMENTÁROV   .comments h4 { font-family: 'Amatic SC', cursive; }
NADPISY BOČNÝCH WIDGETOV   .sidebar h2 { font-family: 'Amatic SC', cursive; }


Nezabudnite upraviť aj fonty v mobilnej šablóne vášho blogu. Návod nájdete tu.


Vidíte, že nakoniec najťažšie na celej úprave je iba správne zladiť fonty. Budem rada, keď v komentároch dáte svoje tipy na pekné fonty s diakritikou.

1 komentár:

♥ ĎAKUJEM ZA KOMENTÁR ♥