Dostaję od Was mnóstwo sygnałów, że blogowe poniedziałki dają Wam motywację i narzędzia do zmian na Waszych blogach. Czujecie się na nich lepiej, chce się Wam blogować. Wiem też, że prowadzanie zmian może uzależnić:) Dzisiaj przygotowałam instrukcję dodawania nowych czcionek do bloga na bloggerze. Teoretycznie w opcjach dostosowania szablonu mamy ich sporo do wyboru, jednak ten kto próbował poszukać czegoś interesującego szybko odkrył, że wiele z nich nie posiada polskich znaków, a część z tych, która te znaki ma nie jest poprawnie obsługiwana przez niektóre przeglądarki. Dzisiaj nauczycie się wgrywać nowe czcionki i definiować rodzaj czcionki dla poszczególnych elementów na blogu.
Wybór czcionki
W pierwszej kolejności udajemy się na stronę Google Fonts i wybieramy interesującą nas czcionkę. Aby mieść pewność, że nasza wybranka ma polskie znaki, w polu Preview Text wpisujemy je wszystkie. Oprócz tego możemy dopisać fragment próbnego tekstu, aby widzieć jak czcionka się prezentuje.
Jeśli decyzja zapadła to po prawej stronie, obok wybranej czcionki, klikamy w małą strzałeczkę.
Wyświetli się strona z dwoma liniami kodu. które będą nam za chwilę potrzebne. Trochę zmodyfikowany kod z pierwszej linii posłuży nam do dodania nowej czcionki do bloga, a drugi pomoże wskazać, że dane element na stronie ma być wyświetlany za jej pomocą.
Dodanie nowej czcionki do bloga
Logujemy się do bloggera i robimy kopię zapasową szablonu. Następnie SZABLON>EDYTUJ KOD HTML. Klikamy na dowolny fragment kodu i wciskamy CTRL i F jednocześnie. W okienku wyszukiwania wpisujemy:
</head>
Wciskamy enter. Powyżej </head> wklejamy kod z pierwszej linii. Musimy go zmodyfikować dodając za nazwą czcionki
&subset=latin,latin-ext
oraz
/
przed zamknięciem nawiasu.
W moim przykładzie będzie to wyglądało następująco:
<link href=’http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext’ rel=’stylesheet’ type=’text/css ’ />
Zmiana czcionki elementów na blogu
W celu zmiany czcionki w poszczególnych elementach wyszukujemy kody (wymienię je za chwilę) i podmieniamy na kod z linii nr 2, czyli w moim przykładzie na font-family: 'Open Sans’, sans-serif; Tego typu zmiana sprawi, że nie będziemy mogły już zmieniać tej czcionki za pomocą narzędzia dostosowywania szablonu.
Kody, które trzeba podmienić, aby zmienić poszczególne elementy bloga:
NAGŁÓWEK BLOGA (opcja dla tych, którzy nie mają banera blogowego)
font: $(header.font);
TYTUŁ POSTA
font: $(post.title.font);
TREŚĆ POSTA
font: $(post.body.font);
BODY BLOGA (np. tekst gadżetów) – jeśli w trybie edycji posta zmiEniasz czcionkę na inna niż domyślna to zmiana nie będzie widoczna.
font: $(body.font);
TYTUŁY GADŻETÓW I DATA
font: $(widget.title.font);
Po zmianie czcionki w ten sposób może być konieczność zmiany również jej rozmiaru. Wówczas pod kodem, który podmieniłyśmy możemy je dodać:
font-size: 14px;
Ilością px regulujemy wielkość czcionki.
