Szablony na Bloggera - niby proste, niby łatwe do dostosowania, ale jednak wciąż sprawiają problemy. Nie ma w tym nic złego i przede wszystkim - nie ma w tym nic dziwnego, nie każdy ma czas i cierpliwość aby kombinować i zmieniać, dlatego, postanowiłam wznowić serię, która jest Waszą ulubioną, a wnioskując po mailach jakie od Was dostaje - jest również bardzo potrzebna.
Dla wszystkich nowych czytelników, którzy nie znają poprzednich wpisów z tej serii - nie tworzymy szablonu od a do z, modyfikujemy ten, który jest udostępniony przez Bloggera, a wpis opiera się na tym, że tworzymy konkretny styl z podanych kodów - są to kody, które znajdziecie u mnie na blogu oraz takie, które pojawiają się pierwszy raz.
Oczywiście, można wszystko dostosować pod siebie, kolory, fonty, etc. nie jest konieczne trzymanie się kropka w kropkę tego co Wam podam ;)
Gotowi? No to zaczynamy! :)
Na początek paleta kolorów, z której będziemy korzystać, pochodzi ona z grafiki, którą wykorzystamy do tego szablonu
#EA8093 #6F7CBF #CED0DD #FBBACB #78ACFF #000000
Przed każdą edycją szablonu, zrób jego kopię zapasową, aby w razie pomyłki, nie utracić cennych dla Ciebie danych :)
1. Za bazę naszego szablonu wybieramy szablon
Simple (prosty) - biały.
*Będziemy tworzyć szablon prawo kolumnowy
2. Wybieramy motyw - dostosuj - dostosuj ustawienia szerokości i ustawiamy nasz szablon na takie wartości:
Cały blog - 1240
Kolumna boczna prawa - 320
Klikamy "
zastosuj do bloga"
3. Następnie przechodzimy do zakładki układ i wybieramy układ prawo kolumnowy, a w układzie stopki wybieramy 3 kolumnowy. Klikamy "
zastosuj do bloga".
4. Przechodzimy do zaawansowane
Tekst strony - ustawiamy na kolor
#000000
Tła - tło zewnętrzne białe, główne tło zmieniamy na transparentne, tło nagłówka również zostaje transparentne
Linki - kolory jakie użyłam (z powyższej palety koloru) to: dla koloru linku i koloru odwiedzonego linku -
#000000, drugi kolor to -
#EA8093 dla kolor po wskazaniu kolorem
Następna karta do której przechodzimy to tło kart, tam zmieniamy ustawienia na kolor przezroczysty
Nagłówek z datą - kolor tekstu, roboczo ustawiamy na czarny czyli
#000000, a kolor tła ustawiamy na przezroczysty
Stopka posta - kolor tekstu
#000000, kolor tła oraz kolor cienia - przezroczysty
Obrazy - kolor tła i obramowania - przezroczyste, kolor tekstu -
#000000
Akcenty - wszędzie ustawiamy na przezroczyste
No to teraz arkusz CSS
5. Pierwszym kodem jaki dodamy to usunięcie cienia i ramek ze zdjęć w poście oraz w kolumnie bocznej.
Wybieramy "
zastosuj do bloga"
Przejdź do wpisu z tym kodem
Teraz, zajmiemy się dostosowaniem zdjęć we wpisie, tak, aby wszystko było jak należy :) Poniższy kod, dostosuje nam zdjęcia do wpisu i nie naruszy nam tych mniejszych ;)
Wybieramy "
zastosuj do bloga"
6. Teraz zrobimy automatyczne skracanie wpisu w naszym szablonie, a dokładną instrukcję znajdziecie
TUTAJ
Zmiany jakie dokonamy w tym kodzie to:
posts_no_thumb_sum = 600;
posts_thumb_sum = 520;
img_thumb_height = 520;
img_thumb_width = 820;
Teraz zajmiemy się aktywnym przyciskiem "czytaj dalej", kod do tego przycisku również znajdziecie w podlinkowanym wpisie, jednak na potrzeby tego wpisu, trochę się on zmieni i będzie wyglądał tak:
7. Teraz, aby było nam wygodniej, opuścimy na chwilę sekcje z dostosowaniem bloga. Wybieramy "
powrót do Bloggera" i wybieramy "
układ"
8. wybieramy pasek nawigacyjny -
edytuj - wyłączone - zapisz
Następnie przechodzimy do sekcji "
główny" (nadal w układzie) -
edytuj - i odznaczamy: godziny, pokaż opcje szybkiej edycji, pokaż przycisk udostępniania, lokalizacja - zapisz
9. Wracamy do motyw - dostosuj
10. Teraz zajmiemy się dołem naszego bloga.
Usuwamy:
Subskrybuj: posty (Atom) oraz Obsługiwany przez usługę Blogger
Zastosuj do bloga
Pager bloga
Zastosuj do bloga
11. Ustawienia ogólne
Ustawienia tekstu - rodzaj fontu, kolor, ułożenie tekstu, wielkość fontu
Usuwanie podkreśleń linków, po najechaniu na nie myszką
12. Posty
Ustawienia daty i tytułu wpisu
Data
Tytuł wpisu
Stopka posta
Zastosuj do bloga
13. Posty wewnątrz (po kliknięciu na nie ) i komentarze
Cytaty
Przejdź do wpisu z tym kodem
Komentarze
Przejdź do wpisu z tym kodem
Zastosuj do bloga
14. Kolumna boczna
Tytuły gadżetów
Zmiana Wyglądu gadżetu "obserwuj przez e-mail"
Przejdź do wpisu z tym kodem
Styl dla Archiwum - hierarchia
Przejdź do wpisu z tym kodem
Zastosuj do bloga
15. Menu/strony
Jeśli nie mamy dodanych stron/menu
Wybieramy
powrót do Bloggera - układ - wszystkie kolumny - dodaj gadżet - strony - zapisz
Wracamy do
motyw - dostosuj - zaawansowane - dodaj arkusz CSS
Dodamy teraz kod, który przeniesie nasze strony na górę bloga.
Zastosuj do bloga
16. Nagłówek i grafika na górze bloga
Wyśrodkowanie nagłówka
Grafika na górze bloga
Zastosuj do bloga
Wszystkie wartości są zmienne, nie trzeba się trzymać schematu z tego posta - można również dodać coś od siebie :)
Efekt końcowy:
Pobierz grafikę
