Zrób ze mną szablon na bloga część 4

piątek, 25 października 2019


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ę

Brak komentarzy:

Prześlij komentarz

W razie pytań/pomocy przy pobranym szablonie: tworczynotatnik@gmail.com

Copyright © Twórczy notatnik