Jak zrobić własny szablon? Modyfikacja szablonu Cz. 1

Większość szablonów, które tworzą profesjonaliści projektowana jest w programach graficznych. Taki projekt przekładany jest później na język HTML i style CSS.
Ponieważ dostaję od Was bardzo wiele pytań o to Jak stworzyć własny szablon na blogspot, czy też po prostu o to jak zmienić wygląd bloga, postanowiłam napisać przewodnik.

Jak zrobić własny szablon blogspot?

W tym poście podam Wam przykład szablonu/wyglądu bloga, który będziemy się starać osiągnąć. Nie będziemy tworzyć szablonu od podstaw, wykorzystamy jeden z domyślnych szablonów bloggera, który będziemy modyfikować.

Modyfikacja szablonu, zmiana wyglądu szablonu

Do modyfikacji wybrałam szablon Rewelacja, czarny. Łatwo można w nim zmieniać poszczególne elementy, nie ma tu przekłamań kolorów, zbytecznych cieni itp.

1. Zmiana szablonu na Rewelacja

Wchodzimy w SZABLON, przewijamy w dół i wybieramy pierwszy czarny szablon z rodzaju REWELACJA i klikamy Zastosuj do bloga:

Przewijamy stronę z powrotem do góry i klikamy na Dostosuj:

Pozbędziemy się teraz czerni i zamiast niej wprowadzimy biel. Wchodzimy w Tło i klikamy Usuń obraz. Następnie wchodzimy w Zaawansowane i kolejno zmieniamy:

Strona:
 Kolor tła - klikamy na biały
 Kolor tekstu - klikamy na ciemny szary

Wprowadzane zmiany są od razu widoczne na blogu.  Jeśli chcesz je zapisać kliknij pomarańczowy przycisk Zastosuj do bloga. Modyfikujemy szablon dalej. Przechodzimy do Linki i ustalamy kolor dla odnośników. Zwykle określam taki sam kolor dla dwóch pierwszych opcji, a dla trzeciej nieco inny. Bardzo często prosicie o szablony w kolorystyce biało-szaro-różowej więc linki możemy teraz określić właśnie na np. pudrowy róż.

Linki:
Kolor linku
Kolor odwiedzonego linku
Kolor linku po najechaniu kursorem myszy

Tytuł bloga:
Kolor tytułu: szary. Nie ma on później znaczenia bo i tak wykonamy sobie nagłówek w programie graficznym. Jednak  w obecnym etapie pozwoli nam na stworzenie spójnego wyglądu
Kolor nagłówka: biały, czyli taki sam jak tło strony. Kolor ten ma znaczenie przy późniejszym ustawianiu obrazu w nagłówku. Obraz nie będzie musiał zajmować całej szerokości strony.

Opis bloga:
Kolor tekstu: szary. Nie ma on później znaczenia bo i tak wykonamy sobie nagłówek w programie graficznym. Jednak  w obecnym etapie pozwoli nam na stworzenie spójnego wyglądu

Tekst kart:
Kolor tekstu: szary
Kolor po zaznaczeniu: szary

Karty to menu górne lub boczne. Czasami mówicie na nie Zakładki. Więcej o tworzeniu menu znajdziecie już niedługo w poście [Jak stworzyć menu?]. W skrócie: aby zrobić menu należy dodać gadżet Strony. Na tym etapie ustalamy kolor tekstów na szary i kolory tła na biały

Tło kart:
Kolor kart: biały
Kolor po zaznaczeniu: biały
Kolor obramowania: biały

Nagłówek z datą:
Kolor tekstu: szary
Kolor obramowania: przezroczysty

Tytuł posta
Kolor tekstu: szary

Tło posta: (wszędzie Przezroczysty)

Tytuł gadżetu:
Kolor tekstu: szary

Tekst gadżetów: (wszędzie Przezroczysty)

Linki do gadżetów:
Możemy powtórzyć kolory linków purpurowy róż. Żeby jednak nie przesadzać z różem proponuję ustawić również kolor szary.

Tło gadżetów:
Jeśli  mamy w planie ustawienie dla bloga tła warto oznaczyć tutaj kolor biały lub np. bardzo jaśniutki szary.

Kolor paska bocznego:
Przezroczysty

Obrazy: 
tu już zależy jak chcecie by wyglądały obrazki na waszym blogu. Możecie ustawić kolor tła przezroczysty. Jeśli nie chcecie mieć ramki ustawcie kolor obramowania również na przezroczysty

Kanał, Linki do kanałów: ustawiam na szary






Dalsza część posta już niedługo ...




W kilku krokach jak osiągnąć taki efekt:

1. rewealcja, białe wszystko
2. przełożenie nagłówka nad posty: showaddelements=yes i edytuj dla nagłówka locked-=false