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.

.post-body img, .column-right-inner img {border: 0 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; padding: 0px !important; background: none !important; }

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 ;)

.post-body img { max-width:100%; height: auto; margin-left: 0; padding:0px; } .post-body .tr-caption-container { padding: 0; } .post-body .tr-caption-container img { max-width: 100%; height: auto; margin-left: 0; padding: 0; display: block; }

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:


.readmore a, #blog-pager-post a { background: #2f2f3c; color: #fff; text-transform: uppercase; font-family: Open Sans; font-weight: 100; font-size: 10px; letter-spacing: 2px; padding: 10px 30px; display: block; max-width: 500px; margin: 10px auto; } .readmore a:hover, #blog-pager-post a:hover { background: #e96446; color: #fff; text-transform: uppercase; font-family: Open Sans; font-weight: 100; font-size: 10px; letter-spacing: 2px; padding: 10px 30px; display: block; max-width: 500px; margin: 10px auto; }

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

.Attribution, .feed-links {display: none;}

Zastosuj do bloga

Pager bloga

#blog-pager {background: transparent; text-transform: uppercase; font-weight: 700; font-family: Open Sans; font-size: 15px;} .footer-outer {border-top: solid 1px transparent;}

Zastosuj do bloga

11. Ustawienia ogólne

Ustawienia tekstu - rodzaj fontu, kolor, ułożenie tekstu, wielkość fontu

body {font-family: Open Sans; color: #444; font-size: 13px; text-align: justify;}

Usuwanie podkreśleń linków, po najechaniu na nie myszką

a:hover {text-decoration: none;}

12. Posty

Ustawienia daty i tytułu wpisu

Data

h2.date-header {letter-spacing: 2px; text-transform: uppercase; font-family: Open Sans; font-size: 8px; text-align: center; font-weight: 300; top: -1px; padding: 0px;}

Tytuł wpisu

h3.post-title { padding: 10px; color: #000; text-transform: none; font-family: Playfair Display; font-size: 25px; text-align: center; font-weight: 400;} h3.post-title a { font: 25px 'Playfair Display'; font-weight: 400; text-transform: none; color: #000!important; padding: 10px!important; margin-left: -10px; text-align: center; } h3.post-title a:hover { font: 25px 'Playfair Display'; text-transform: none; padding: 10px!important; margin-left: -10px; text-align: center; font-weight: 400; color: #e96446 !important; }

Stopka posta

.post-footer { color: #666666; text-transform: uppercase; border-bottom: 0px; font-size: 11px; letter-spacing: 1px; }

Zastosuj do bloga

13. Posty wewnątrz (po kliknięciu na nie ) i komentarze

Cytaty

blockquote { background: #eee; color: #666666; position:relative; font-size:90%; padding:20px; border-top: solid 10px #e96446; }


Przejdź do wpisu z tym kodem
Komentarze

.comment-header { font-family: Open Sans; letter-spacing: 1px; font-weight: 400; font-size: 10px; text-transform: uppercase;} .comment-header a:link {color: #2f2f3c;} .comment-header a:visited {color: #e96446;} .comments h4 { text-align: center; padding: 10px; color: #444; text-transform: uppercase; font-size: 20px; letter-sapcing: 3px; font-family: Open Sans; font-weight: 700;} .comment p { color: #444; font-size: 12px; font-family: Open Sans; } .comments .comment .comment-actions a, .comments .thread-toggle a { background: #2f2f3c; font-size: 8px; padding: 5px; margin: 5px 5px; font-family: Open Sans; color: #fff; text-transform: uppercase;} .comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover { background: #e96446; font-size: 8px; padding: 5px; margin: 5px 5px; font-family: Open Sans; color: #fff; text-transform: uppercase;}


Przejdź do wpisu z tym kodem Zastosuj do bloga

14. Kolumna boczna

Tytuły gadżetów

.sidebar .widget h2, #BlogArchive1 h2, #PopularPosts1 h2, #FollowByEmail1 h2{ text-align: center; text-transform: none; letter-spacing: 1px; font-family: Playfair Display; font-weight: 200; font-size: 18px;}

Zmiana Wyglądu gadżetu "obserwuj przez e-mail"

.FollowByEmail .follow-by-email-inner .follow-by-email-address { height: 40px; font: 10px Open Sans; text-transform: uppercase; color: #000 !important; width: 280px; margin: 20px 10px 10px; text-align:center; border: 1px solid #f5f5f5; letter-spacing: 1px; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit { width: 53px; color:#ffffff; background-color: #2f2f3c; font: 12px Open Sans; text-transform: uppercase; letter-spacing: 2px; height: 42px; margin: 0 10px 20px; width: 280px; } .follow-by-email-inner .follow-by-email-submit:hover { background: #e96446; color:#ffffff; } .follow-by-email-inner td{ display: block; width: 100%; } .follow-by-email-inner tr{ background-color:#FAFAFA; }

Przejdź do wpisu z tym kodem
Styl dla Archiwum - hierarchia

.archivedate {text-transform: uppercase;} .archivedate a:link {color: #2f2f3c;} .widget .zippy { color: #2f2f3c; font-size: 10px; text-shadow: none; }

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.

.tabs-outer{ position:fixed; top:0px; left:0px; width:100%; z-index:10; border-bottom:1px solid #888; background: #fff; } .tabs-inner, .tabs-inner > .section{ padding: 0 !important; margin: 0 !important; } .tabs-inner .widget ul { text-align:center; padding-bottom: 13px; padding-top:11px; margin: 0 auto; } .tabs-inner .widget li { float:none; display:inline-block; zoom:1; } .tabs-inner .widget li:last-child:after{ content: ""; } .tabs-inner .widget li a { display: inline-block; padding: .2em 4em; font: 11px Open Sans; color: #444; text-transform: uppercase; letter-spacing: 3px; } .tabs-inner .widget li:first-child a { } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #e96446; background-color: transparent; text-decoration: none; }

Zastosuj do bloga

16. Nagłówek i grafika na górze bloga

Wyśrodkowanie nagłówka

.header-inner .widget div, .header-inner img { margin-left:auto; margin-right:auto; padding-bottom: 10px; padding-top: 80px; }

Grafika na górze bloga

.header-outer { background: url(LINK DO GRAFIKI) no-repeat; height: 250px; background-position: center; padding-top: 10px; }

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ę

Jeśli spodobał Ci się wpis, przekaż go dalej :)