Zainstalowałaś już wybrane czcionki od Google Fonts na swoim blogu, ale wciąż zastanawiasz się, jak ich użyć na Bloggerze? Jeśli kompletnie nie wiesz, jak się zabrać za zmianę fontów tytułów i innych elementów na swojej stronie, ten post jest dla Ciebie. Pokażę Ci krok po kroku, jak zmienić czcionki na niestandardową od Google Fonts na przykładzie najbardziej istotnych elementów Twojej strony.
Kod CSS od Google Fonts - do czego służy?
Jeśli przeczytałaś poprzedni post o tym, jak zainstalować wybrany font od Google Fonts na Bloggerze, to zapewne zastanawiałaś się, do czego Ci się przyda zapisany kod CSS (dla przypomnienia grafika poniżej) dla danej czcionki - zaznaczyłam w niej, by go zachować, ale nie wyjaśniłam, dlaczego. Dziś śpieszę z odpowiedzią: ten kod posłuży Ci właśnie do zmiany fontu dla wybranych elementów Twojego bloga. Zachowaj go, nie zgub, bo to 50% sukcesu! :D Oczywiście, jest to tylko właściwość z wartością w kodzie CSS - nie musisz wiedzieć, co to, ważne, że oprócz niej potrzebujesz jeszcze selektora, czyli unikalnej nazwy dla Twojego elementu, który chcesz zmienić.
Selektory dla wybranych elementów bloga na Bloggerze - jak ich używać?
Bez selektora zmiana fontu danego elementu jest praktycznie niemożliwa. Co nam on daje? Dzięki selektorowi, wskazujesz swojej stronie, dla którego elementu dokładnie ma dokonać zmian. Jeśli nie wiesz, skąd wziąć selektor dla wybranego elementu, śpieszę z pomocą! Poniżej podaję kilka najistotniejszych selektorów wraz z opisem, czego dotyczą:
- tytuły postów:h3.post-title
- tytuł komentarzy ("brak komentarzy", "1 komentarz" itd.):.comments h4
- nazwa autora komentarza:.comments .user a
- treść posta:#Blog1
- tekst w kolumnie bocznej:.sidebar
- tytuły gadżetów w kolumnie bocznej:.sidebar .widget h2
Wraz z właściwością i wartością (wspomnianym kodem CSS) od Google Fonts zbudujesz sama własną kompletną regułę CSS, która wklejona w odpowiednie miejsce w Projektancie motywów Bloggera zmieni czcionkę dla wybranego elementu na Twoim blogu. Zasada jest bardzo prosta:
selektor {
właściwość: wartość ;
}
Zamiast wyrażenia "właściwość: wartość;" należy wkleić w nawiasie kod CSS od Google Fonts, a zamiast "selektor" podstawić odpowiedni selektor z wybranych powyżej, dla elementu, który chcesz zmienić. Zasady są już dość jasne, pora na szczegółową instrukcję krok po kroku :)
Jak zmienić czcionkę na font Google Fonts na Bloggerze?
- Wejdź w Motyw > Dostosuj > Zaawansowane > Dodaj arkusz CSS (ta opcja jest na samym dole na liście).
- W okienko, które zobaczysz, wklej selektor elementu, którego czcionkę chcesz zmienić. Otwórz nawias (lub skopiuj jego znak z kodu w ramce powyżej).
- Wklej skopiowany kod CSS od Google Fonts, a następnie zamknij nawias.
- Upewnij się, że nie pominęłaś żadnego znaku (przykładowy, kompletny kod poniżej).
- Kliknij Zastosuj do bloga i gotowe! :)
Przykładowy kod zmieniający czcionkę tytułu posta będzie wyglądał tak:
h3.post-title {
font-family: 'Dancing Script', cursive;
}
Co zrobić, jeśli kod nie działa?
Poniżej 3 kroki, które pomogą Ci poradzić sobie z problemem, jeśli mimo dodania kodu nie zobaczysz na swojej stronie zmian.
- Upewnij się, że nie pominęłaś żadnego znaku - każdy średnik czy dwukropek jest ważny!
- Jeśli wszystko jest w porządku z kodem, spróbuj dodać w kodzie CSS z Google Fonts przed średnikiem na końcu linijki wyrażenie:!important
- W przypadku tytułów postów może być tak, że szablon, z którego aktualnie korzystasz, nie korzysta z nagłówka h3, tylko innego, np. h2 lub h1. Spróbuj zmienić to w kodzie - zamiast h3.post-title wypróbuj h2.post-title, itd.
- Jeśli korzystasz z niestandardowego szablonu Bloggera od jakiegoś niezależnego twórcy, takiego jak ja, a żaden z powyższych sposobów Ci nie pomógł i szablon dalej "nie chce Cię słuchać", istnieje bardzo duże prawdopodobieństwo, że twórca stworzył ten szablon od zera i nadał swoje nazwy selektorów. Być może kolumna boczna - zwykle zwana sidebarem - nie ma u Ciebie selektora .sidebar, ale jest jakiś inny. W takim wypadku bez analizy kodu strony (żeby dowiedzieć się, jak gadżet ten się nazywa i odpowiednio przerobić powyższe kody) się nie obędzie.
Przekonana? To do dzieła!
Mam nadzieję, że zachęciłam Cię do poeksperymentowania ze swoim blogiem i odświeżenia wyglądów nagłówków i tekstu. Pamiętaj, że to, czy czytelnik zostanie na Twoim blogu na dłużej, czy pójdzie dalej i już nigdy nie wróci, rozstrzyga się nie w ciągu sekund, ale milisekund. Warto, by Twoja strona robiła jak najlepsze pierwsze wrażenie, a oryginalny wygląd na pewno Ci w tym pomoże!
Jeśli chciałabyś tu przeczytać jakiś konkretny wpis na interesujący Cię temat - zostaw pomysł w komentarzu, postaram się taki wpis przygotować :) Pytania również mile widziane - na wszystkie postaram się odpowiedzieć.
Brak komentarzy