Blogger - jak wykorzystać klasy stylów

Każdy webmaster doceni potęgę stylów, za pomocą których tworzy wizualną stronę budowanej przez siebie witryny. Nie mam jednak pewności, czy w dobie powszechnie stosowanych CMS-ów (Content Management System), jak WordPress, Joomla, Blogger czy Witryny Google nie zapominamy, jak style mogą ułatwić życie.

Narzędzie: Usługa Blogger
Kategoria: blogi
Temat: Zastosowanie klasy stylów w Bloggerze
Poziom trudności: 2/3
Wielkość dokumentu: ok. 2400 znaków, 1 ilustracja

Widoczną w moich wpisach ramkę z informacjami o treści wpisu tworzę za pomocą wydzielonych bloków sformatowanych za pomocą stylów (CSS – kaskadowe arkusze stylów) – stąd to odmienne tło, fikuśne cieniowanie czy przyjemne zaokrąglenia narożników. Jednak nie style są przedmiotem mojego wpisu, a sposób, w jaki te ramki wprowadzam do wpisów w Bloggerze. A jest on bajecznie prosty - naturalnie kod wstawiamy w widoku HTML, czyli w kodzie źródłowym wpisu:

<div class=”metryczka”>treść ramki</div>

Div to HTML-owy znacznik do tworzenia bloku, ale tutaj najbardziej interesujący jest fragment, który ma postać class=”metryczka”. Otóż class to klasa stylów dla bloków, zaś metryczka to nazwa, jaką nadałem tej klasie, chcąc wyróżnić właśnie metryczkę z informacjami.

I teraz, zamiast za każdym razem formatować pracowicie ten blok (formatowanie jest dość skomplikowane, choć każdy webmaster doskonale rozumie tę składnię: background-color: whitesmoke; border-radius: 10px; box-shadow: 4px 4px 7px #182019; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 500px; font-size: 12px), podaję we wpisie jedynie podany wyżej kod bloku.

A gdzie się podział zatem kod z formatowaniem?

Gdy przejdziesz do zaplecza administracyjnego blogu i klikniesz kolejno kartę Szablon, potem przycisk Dostosuj, a w wyświetlonym Projektancie szablonów Zaawansowane, na dole listy poleceń znajdziesz Dodaj arkusz CSS. Otóż w tym miejscu trzeba podać kod klasy.

W moim konkretnym przypadku wygląda to następująco:



Wystarczy jeszcze kliknąć Zastosuj do bloga i kod zacznie działać.

Od momentu wprowadzenia tam definicji klasy, mogę ją swobodnie wykorzystywać w dowolnych wpisach, przywołując ją jedynie za pomocą nazwy – kod umieszczony w arkuszu stylów w Projektancie dba o poprawne wyświetlanie każdego elementu objętego tym kodem.

Myślę, że wielu użytkownikom Bloggera przyda się znajomość tej techniki, a niektórzy blogerzy być może docenią nawet przydatność samodzielnie definiowanych stylów i zechcą je nieco postudiować.