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-extoraz
/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);
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.
Bardzo fajny i przydatny wpis, na pewno znajdzie sie w moich linkach tygodnia nastepnym razem. Pozdrawiam serdecznie Beata
OdpowiedzUsuńMiło mi to czytać:)
OdpowiedzUsuńuwielbiam blogowe poniedziałki u Ciebie, mnóstwo przydatnych i prosto wytłumaczonych bajerów! :)
OdpowiedzUsuńbardzo Ci dziękuję za każdy wpis dotyczący wszystkiego co jest związane z modyfikacją bloga.. pozdrawiam serdecznie
OdpowiedzUsuńWłaśnie to było mi potrzebna :) Jak znajdę chwilę na pewno się tym zajmę :) Dzięki za instrukcję. Pozdrawiam!
OdpowiedzUsuńKolejny świetny wpis, który bardzo się przyda! Dziękuję :*
OdpowiedzUsuńPozdrawiam
Rozumiem, że na wordpress com nie da rady bo nie można instalować żadnych wtyczek?
OdpowiedzUsuńZ wordpressem nie mam żadnego doświadczenia. Jeśli jednak możesz ingerować w kod HTML to powinnaś móc dokonać zmian.
OdpowiedzUsuńDziękuję :D Dzięki twoim mam natchnienie do nowego wystroju bloga.
OdpowiedzUsuńSuper, U Ciebie zawsze coś przydatnego! Ja walczę z moim blogiem jak umiem, żeby wyglądał "jak człowiek". Czcionek jeszcze nie próbowałam mu przestawiać. Za to zmieniłam banner - starałam się iść za Twoją radą "mniej znaczy więcej"... i chyba jest lepiej :) Dzięki i pozdrawiam! Aga
OdpowiedzUsuńBardzo przydatny post, na pewno wykorzystam!;)
OdpowiedzUsuńzapraszam do mnie
alqxx.blogspot.com
kocham cię och jak ci dziękuję, kocham cię.
OdpowiedzUsuńChyba na jakiś czas mi wystarczy to co u mnie zrobiłaś :-) Więc radę zostawiam na kiedyś :-)
OdpowiedzUsuńPozdrawiam!
Ty to jesteś skarbnica wiedzy technicznej:). Znowu przez Ciebie zarwę kilka wieczorów "dopieszczając" blogusia.
OdpowiedzUsuńAle to sama przyjemność:) Ja mam trochę planów odnośnie swojego i wciąż są ważnejsze rzeczy:)
OdpowiedzUsuń:D
OdpowiedzUsuńNowy baner jest BARDZO przyjemny!:)
OdpowiedzUsuńOj widzę, że jesteś takim samym grzebaczem blogowym jak ja:). Aż jestem na siebie zła, bo zasiadam, żeby napisać jakiegoś posta, ale tak patrzę i patrze i myślę sobie: no nie w takich warunkach nie mogę pisać, muszę coś wyśrodkować, dodać, zmienić kolor, itd. Ciągle coś;).
OdpowiedzUsuńDługo się powstrzymywałam i pękłam w końcu:)
OdpowiedzUsuńHa,ha:). No ja już się pogodziłam z tym, że nic już dziś nie napiszę, dzisiaj wieczór grzebania. A jak schowałaś stopkę posta, że Ci się wyświetla dopiero po wejściu w posta?
OdpowiedzUsuńNie schowałam tylko wszystko przeniosłam pod tytuł posta.
OdpowiedzUsuń