Mój Blog - Mój Kod: Podstawy

Blog jest naszym magicznym miejscem, w którym dzielimy się kawałkiem siebie. Pokazujemy swoje pasje, zarażamy nimi innych, pomagamy, uzewnętrzniamy się. Ile autorów, tyle najróżniejszych blogów. Dlatego sytuacja, kiedy to my musimy dopasować się do bloga, a nie odwrotnie jest wykluczona! Praca nad nowym szablonem skłoniła mnie do rozpoczęcia serii tutoriali dotyczących zmian na blogu z poziomu kodu. W dużej mierze skupimy się na CSSie, czyli wyglądzie estetycznym bloga. Jednak jeśli zajdzie taka potrzeba, zmienimy trochę budowę za pomocą HTMLa.
Jeśli ktoś teraz stwierdzi, że tego typu tutoriali jest tysiące w Internecie, odpowiem, że w takim razie zabieram się za pisanie tysiąc pierwszego i dalej! Także zapraszam do czytania i stosowania w praktyce!

O czym będzie mój blog?

To jest podstawowe pytanie, które powinien sobie zadać każdy blogger zanim zabierze się za tworzenie szablonu, bądź pobierze szablon już gotowy i będzie chciał go ustawić u siebie. Dlaczego? Ponieważ każda tematyka wymaga odmiennego podejścia do tematu! Inaczej będzie wyglądał blog z instrukcjami, inaczej pamiętnik, jeszcze inaczej lifestyle czy portfolio.

Przykładowe blogi: graficzny, lifestyle, portfolio

Warto sobie również zrobić niewielki szkic z założeniami, jak nasz blog będzie wyglądał, co będzie w sobie zawierał (jakie gadżety; który w której kolumnie), jakie kolory będą tymi wiodącymi. Dopiero potem można zaczynać zabawę z szablonem. Poniżej tego akapitu umieściłam wyjściowy wygląd szablonu mojego bloga (będę go produkowała na innym blogu, aby Grafik-Us sam w sobie nie straszył wyglądem przez okres zmian) oraz symulację stworzoną w Photoshopie, która ma mi pokazywać, do jakiego efektu będzie całość zmierzała.

Szablon wyjściowy i ostatnie zmiany automatyczne

Zawsze przed drastycznymi zmianami szablonu, sprowadzam całość do jednego z podstawowych szablonów. Dlaczego? Ponieważ mam pewność, że dostanę czyściutki, bezbłędny kod, który w dalszych etapach tworzenia będe mogła psuć, przerabiać i dostosowywać do swoich potrzeb.
Wchodzimy w ustawienia Bloggera, obok pomarańczowego przycisku z ołówkiem oraz drugiego przycisku z kartkami, jest strzałka skierowana w dół. Klikamy na nią i na rozwijanej liście wybieramy Szablon.

Zjeżdżamy następnie w dół i z dostępnych szablonów najeżdżamy na dowolny jeden i klikamy Zastosuj do bloga. Od razu tutaj zaznaczam, że zmieni się jedynie szablon, wszelkie notki i gadżety nie zmienią swych treści, a dane nie zostaną utracone.

Skoro Projektant szablonów jeszcze działa, możemy z jego pomocą ustalić ustawienie bloga, jego kolumn i stopki. Ułatwi to nam późniejszą pracę i przyspieszy ją. Także wyjeżdżamy z powrotem na górę strony i pod miniaturą naszego szablonu klikamy na pomarańczowy przycisk Dostosuj.

Gdy otworzy nam się Projektant szablonów, w lewym górnym rogu wybieramy zakładkę Układ. Dzięki tej wygodnej opcji możemy wybrać, ile kolumn będzie na naszym blogu, po której stronie będą się znajdowały oraz na ile kolumn podzielimy stopkę.

Po wprowadzeniu zmian, klikamy na Zastosuj do bloga w prawym górnym rogu, a kiedy pojawi się informacja w żółtej ramce, że Szablon został zastosowany, klikamy na Powrót do Bloggera w prawym górnym blogu.

Ostatnim krokiem będzie dodanie najpotrzebniejszych gadżetów na blog i odpowiednie ich ustawienie. W menu po lewej stronie wybieramy Układ.

W tym miejscu możemy dodawać gadżety, edytować je oraz zmieniać ich położenie na blogu. Podstawową zasadą jest umiar. Jeśli na naszym blogu ustawimy 10 i więcej gadżetów, może się okazać, że będzie on nieczytelny i zamiast skupiać się na wpisie, czytelnik będzie rozpraszany rożnymi okienkami po bokach
Najważniejsze gadżety, według mnie, to przede wszystkim Menu nawigacyjne, które można uzyskać za pomocą gadżetu Strony bądź HTML / JavaScript (tym drugim przypadkiem będziemy się zajmowali, ponieważ daje więcej możliwości), Archwium, które pozwala czytelnikowi prześledzić poprzednie wpisy, Etykiety, jeśli takowymi oznaczamy notki, Obserwatorzy (choć to powoli odchodzi, a przynajmniej takie mam wrażenie; wygodniej korzystać z zewnętrznych serwisów śledzących wpisy np. Bloglovin), Popularne posty, aby w prosty sposób odesłać czytelnika do najciekawszych wpisów. Jeśli nie macie pewności, jakie gadżety będą dla waszego bloga najlepsze - nic się nie dzieje. Na późniejszym etapie Układ w miarę będzie działał ;) Po wprowadzeniu zmian, klikamy Zapisz zmiany w prawym górnym rogu.

Pierwsze zmiany w kodzie

Nareszcie możemy przystąpić do mojej ulubionej czynności, czyli zabawy w kodzie. W menu po lewej na powrót wybieramy Szablon i tym razem klikamy na Edytuj kod HTML pod miniaturką szablonu.

Tak wygląda nasz blog od strony kodu. Czasem trzeba poruszać kółkiem od myszki, aby pojawił się on w całości.
Na początku wpisu wspominałam, że głównie będziemy wprowadzać zmiany w arkuszu CSS, który jest zawsze w nagłówku bloga, a raczej jego "głowie" - pomiędzy znacznikami <head>...</head>. W naszym przypadku arkusz stylów jest zwinięty, ale możemy go rozwinąć klikając na czarną strzałkę w wierszu 13, obok znaczników <b:skin>...</b:skin>.

Wszelkie Variable definitions to kod odpowiadający za Projektanta szablonów i zmiany, jakie możemy w nim wprowadzać automatycznie. Kiedyś przeczytałam na Graphical-Thoughts, że warto skasować ten cały bełkot, aby nie przeszkadzał nam w dalszych działaniach i zwyczajnie nie psuł efektów, jakie wprowadzamy w arkuszu stylów. Od tamtej pory jest to pierwsza rzecz jaka robię! Dzięki Tyler!
Ustawiamy kursor po CDATA[ a przed /*, zjeżdżamy do wiersza ok. 135, przytrzymujemy Shift i zaznaczamy lewym przyciskiem myszki po Use this with... */. Powinien nam się zaznaczyć w całości zbędny kod. Nastepnie klikamy Delete i żegnamy się z nim.

Jeśli w tym momencie linijka /* Content znajduje się w 15 bądź zbliżonym wersie - jesteśmy w domu i polecam kliknąć u góry Zapisz szablon. Tutaj od razu zachęcam was do wyrobienia sobie nawyku częstego zapisywania zmian. Nie mówię, że akurat przy pisaniu kodu, ale również gdy piszecie jakieś wypracowanie, robicie grafikę. Lepiej zapisać niż później biadolić, że program się wyłączył i wszelkie zmiany zostały utracone.
Po zapisaniu szablonu, klikamy u samej góry Wyświetl bloga. Efekt? Blog jest tylko zbiorem tekstów i obrazków, ale szablon jako taki znikł.

Wygląd bloga po wyrzuceniu zbędnego kodu

Selektor body

Ostatnią rzeczą, której poświęcę ten wpis, to selektor body i podstawowe deklaracje, które narzucimy ogólnie na szablon. Ale najpierw krótka notka teoretyczna.
Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja podaje to formatowanie i jest umieszczona w nawiasie klamrowym {...}. Każda deklaracja składa się przynajmniej z jednej cechy lub inaczej własności albo właściwości (ang. property) - wartość (ang. value), przy czym można podać dowolną liczbę, rozdzielając kolejne znakiem średnika (;).
http://www.kurshtml.edu.pl

selektor {
deklaracja: cecha cecha;
deklaracja:cecha;
}

Takich reguł w arkuszu stylów może być naprawdę sporo.

Body w HTMLu odpowiada za wszystkie elementy, które znajdują się na blogu. Determinuje ich położenie i działanie. Natomiast w arkuszu stylów możemy nadać tej całości odpowiedni wygląd, od rozmiarów, tła, koloru tekstu, jego rozmiaru i kroju pisma.
Każde pojedyncze polecenie w kodzie będę tłumaczyła obok wytłuszczonym tekstem.

/* GŁÓWNA
----------------------------------------------- */
body {
...
}

Przede wszystkim jestem zwolennikiem porządku w kodzie, dlatego każdą kolejną część tytułuje w zależności czego dotyczy. Będzie to Główna, Linki, Menu, Posty, Nagłówek i inne. Wszelkie notatki w arkuszu stylów wstawiamy pomiędzy znaczniki /* tekst */. Dzięki temu nie wpływa ona na kod i jest niewidoczna dla bloga.

Pierwszym selektorem, jakim się zajmiemy, będzie body, a pierwszą deklaracją będzie background czyli tło. W tym miejscu może być ono jednokolorowe i wtedy wystarczy po dwukropku wstawić #numer_koloru np.

background:#ffffff;

Każdą jedną opcję zamykamy średnikiem! Dodatkowo dla czytelności kodu, każdą deklarację wraz z cechami umieszczam w osobnej linijce. Wracając do tła, w tle może być również obrazek. Aby taki wstawić, będzie nam potrzebny bezpośredni link do niego. Ja stosuję metodę wrzucania grafiki na swój dysk ze Zdjęciami w Googlach.

Wtedy wystarczy kliknąć na załadowany obrazek prawym przyciskiem myszki i wybrać opcję Kopiuj adres obrazu. I ten własnie adres będzie nam potrzebny.

background:url('adres_obrazu') repeat;

Jeśli obrazek jest mały i ma się powtarzać w poziomie i pionie, po nawiasie wstawiamy słówko repeat. Jeśli nie - wystarczy wstawić no-repeat i domyślnie, obrazek wystąpi tylko raz, w lewym górnym rogu bloga.

Jaki ma sens taki niepowtarzający się obrazek? Przykładowo możemy stworzyć jedną wielką grafikę i umieścić ją jako tło. Jednak po przesunięciu całej strony w dół pojawi się problem - tło występuje tylko jeden raz i dolne partie bloga zostaną odsłonięte.

Jest jednak na to lekarstwo!

background:url('adres_obrazu') no-repeat fixed;

Cecha fixed na końcu deklaracji oznacza "stała". Nasze tło w tym momencie jest nieruchome, natomiast wszystko co jest nad nim (posty, gadżety) będzie się przesuwało jak standardowa strona. Jest jednak minus tej metody - tak duże tło waży więcej niż niewielki obrazek, który się powtarza. A co za tym idzie, przy słabszym łączu, będzie się ładował o wiele dłużej i może to zepsuć efekt. Ewentualnie jakiś programista zostanie przyprawiony o ból głowy :D Osobiście pozostanę przy małym powtarzalnym obrazku. Polecam również na końcu deklaracji wstawić cechę z kolorem zbliżonym do koloru na tle obrazkowym. Będziemy mieć pewność, że gdyby obraz się nie załadował, treść na blogu będzie widoczna (przykładowo biały tekst na czarnym obrazku - gdyby obrazek się nie załadował, tekst będzie niewidoczny).

body {
font-family:Calibri;
font-size:13px;
color:#000000;
}

Teraz zajmiemy się tekstem na całym blogu.
Font-family oznacza rodzaj fontu. Możemy tu wstawić Calibri, Tahomę, Verdanę lub inny krój pisma dostępny domyślnie na blogu. Podrzucam również radę, którą dała nam nasza psorka od projektowania: Fonty z szeryfami typu Times New Roman czy Georgia są dobre, ale do książek. Poprawiają nasza czytelność. Jednak tekst wyświetlany o wiele lepiej czyta się fontami bez szeryfów np. Calibri, Tahoma czy Verdana.

Regułą to oczywiście nie jest, co potwierdza mi wiele stron i blogów. Tutaj powinniśmy się zdać na czytelników, którzy czytają naszego bloga.
Jeśli chodzi o różne inne kroje pisma, które mamy na swoim komputerze i wykorzystujemy na blogu - tak nie robimy! To, że u nas wygląda to ślicznie wcale nie oznacza, że inny zobaczy to samo! Ten ktoś również musiałby mieć ten konkretny font u siebie. Jeśli tak nie jest, tekst wyświetli mu się krojem domyślnym, który jemu może popsuć całą wizję bloga.
Jeszcze innym problemem są kroje pisma bez polskich znaków. Tekst taki wygląda dziwnie, bo każda jedna literka z ogonkiem czy kropką jest wykorzystana już z innego fontu. Zwracam waszą uwagę, aby zewnętrzne fonty testować na znajomych, tj. wysłać im link bloga i spytać, czy wyświetla im się font, polskie znaki. Jeśli nie, to naprawdę nie radzę używać takiego kroju pisma!

Kolejną deklaracją jest font-size określający wielkość liter. I tutaj przestrzegam przed zbyt drobnym tekstem! Wystrzegajcie się 8 - 10px. To już jest maczek, a zaręczam wam, nikt nie będzie męczył oczu na takiej drobnicy. Ja na ogół celuję w 14 - 16px.
Deklaracja color definiuje nam kolor tekstu. I tutaj również zwracam uwagę na czytelność! Zbyt ciemny tekst na równie ciemnym tle będzie bardzo ciężko widoczny. Odwrotnie również!

Na tym możemy zamknąć selektor body. Pod spodem podsumowanie:

/* GŁÓWNA
----------------------------------------------- */
body {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5S6wKplx_t5tYwso9ge7huRBDH0z41Pmzsdh_42oD6Ylti8ZfYI-Pn-OohmfyUPf3n8cNHl37of-5EZXIjexkKPx8UWzlhIxNIReyUfwrKIQan0qWFZT9CwVCh2gzrLakIscgFavwg/s100-no/63139599.png') repeat #d6d6d6;
font-family:Calibri, sans-serif;
font-size:15px;
color:#000000;
}

I porównanie szablonu wyjściowego z tym, co zrobiliśmy do tej pory.

BlogChallenge - Day 6: Your last random act of kindness

Moja znajoma z roku stwierdziła, że takie plannery, jakie projektuję, powinnam sprzedawać, a nie wstawiać, żeby każdy mógł korzystać :D Więc w sumie, z mojej strony to taka mała dobroć i ukłon skierowany w stronę czytelników. A poza tym zawsze przytrzymuje drzwi od sklepu, kiedy jakaś starsza osoba wchodzi lub wychodzi! Liczy się?


Jestem bardzo ciekawa, czy ktokolwiek przebrnął przez tę masę tekstu i czy komukolwiek to się przyda. Jeśli będzie to chociaż jedna osoba, dla mnie to będzie mały osobisty sukces! Cała seria może się składać od 15 do 20 wpisów, także będzie w czym przebierać! Z tutoriali, jakie pojawią się tu w przyszłości, będzie na pewno ustawienia odnośnie postu, jego wyglądu, posty kafelkowe, wszelkie rodzaje menu, modyfikacje wyglądu gadżetów jak Archiwum czy Etykiety i wiele innych.

Ostatnio na którymś blogu znalazłam informację w profilu autora, że jego staż w blogerskim świecie wynosi 5 lat. Mój wynosi 10... Kurczaki, brzmi poważnie!

Jak wam się podobają tego typu notki? Przydadzą się?