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

30.10.2016


Zobacz pierwszą część

Pierwsza część tego wpisu przyjęła się bardzo dobrze, więc postanowiłam zrobić część drugą. Ta część od pierwsze będzie różniła się tym, że zrobimy sobie jeden szablon, a nie dwa. Na czym polega ta seria wpisów? Podaje Wam kody na zrobienie danego szablonu. Tak, podaje Wam najzwyczajniej w świecie gotowce. Dlaczego nie udostępniam tych szablonów do pobrania za darmo? Bo mimo wszystko jest to forma nauki, poznaje się kody, które dla niektórych mogły być nieznane i jednocześnie można je od razu zmodyfikować pod siebie, bez szukania CSSa w kodzie szablonu, tak jak to jest w przypadku szablonów do pobrania. Zaczynamy!

1. Na początek jako naszą bazę wybieramy sobie szablon Simple (prosty) biały. Od razu mówię, że od góry zakładam, że zdjęcia do wpisów będziemy wstawiać w oryginalnym rozmiarze. Na początek, mniej więcej nasz szablon będzie prezentował się tak:

1. Przechodzimy do układu - pasek nawigacyjny - edytuj - wyłączone - zapisz


2. Wracamy do szablon - układ - wybieramy sobie układ prawo lub lewo kolumnowy i rodzaj stopki. U mnie to wygląda tak: 


3. Teraz musimy ustawić sobie szerokość naszego bloga. Przechodzimy więc do "Dostosuj ustawienia szerokości". Ja ustawiłam najbardziej optymalną czyli cały blog 1240px a kolumna boczna 330px 

4. Wracamy do zaawansowane - dodaj arkusz CSS i wklejamy kody.
Pierwszy kod, jest na dopasowanie zdjęć do szpalty, bez ruszenia mniejszych zdjęć. Małe zdjęcia pozostaną małe.


.post-body img {
  max-width:100%;
  height: auto;}
.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;
}

Teraz, dodajemy kod na usunięcie ramek i cienia zdjęć we wpisie, które w szablonie Simple są narzucane odgórnie.

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

Teraz zajmiemy się naszymi stronami. Przechodzimy do "tło kart" i zaznaczamy wszystko na przezroczyste. Następnie przechodzimy do "akcenty" i tam również wszystko zaznaczamy na przezroczyste. Przechodzimy do arkusza CSS i wklejamy tam taki kod: 

#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}
#PageList1  {border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
letter-spacing: 2px;
text-transform: uppercase;}

Oczywiście kolor i rodzaj fontu (czcionki) ustawiamy w zakładce "tekst kart". U mnie w menu, font to Times New Roman. 

Przechodzimy dalej. Teraz zajmiemy się wpisami. Tutaj pracujemy głównie w CSSie. Dodajemy kod:

.column-center-inner {text-align: justify;}
.post {font-family: Open Sans;
color: #444;
font-size: 12px;}
h3.post-title {text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Times New Roman;
font-size: 18px;}
h3.post-title a {
color: #000;}
h3.post-title a:hover {
color: #76a5af;}

Przechodzimy do "nagłówek z datą". Tam zmieniamy kolor tła na przezroczyste, a kolor tekstu na czarny, ciemno szary czy jaki tam chcecie. Odznaczamy pogrubienie. Wracamy do CSSa i dodajemy kod:

h2.date-header {text-align: center;
font-family: Times New Roman;
font-size: 10px;}

Przechodzimy do "stopka posta" i kolor tekstu zmieniamy na dowolny kolor, a kolor tła i cienia na przezroczyste. Przechodzimy do CSSa i dodajemy kod:
.post-footer { text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Open Sans;
font-size: 8px;
border-bottom: 1px solid #ddd;
padding: 10px;} 

Przy okazji dodajemy efekt dla cytatów: 

.post blockquote {
margin: 1em 20px;
}
.post-body blockquote {
line-height:21px;
background: #fff;
border: 1px solid #dadada;
padding:10px;
}

Oraz pozbywamy się tego co nam przeszkadza. Czyli kropek w pagerze bloga, "Subskrybuj: Posty (Atom)", "Technologia Blogger" i przerywanej linii w stopce bloga. 

#blog-pager {background: transparent;}
.Attribution, .feed-links {display: none;}
.footer-outer {border: 1px solid transparent;}

Skoro już jesteśmy na dole naszego bloga, to dostosujemy sobie nasz Pager, wklejając kod: 

#blog-pager a{display: inline-block;  
color: #888;  
letter-spacing: 2px;  
text-transform: uppercase;  
font-size: 10px;  
border: 1px solid #e5e5e5;  
padding: 13px 15px;  
font-weight: 700;
background-color:#ffffff;}

Skoro już mamy wszystko ogarnięte, to została nam kolumna boczna, a właściwie tytuły gadżetów. Tutaj również robimy wszystko za pomocą CSSa. Dodajemy kod: 

.sidebar .widget h2, #Followers1 h2 {font-family: Times New Roman;
font-size: 15px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #000;
padding: 2px;}

Pewnie zastanawiacie się, czemu zostało dopisane #Followers1 h2 - ten selektor odpowiada za nagłówek obserwatorów. Do niektórych gadżetów, trzeba dopisać selektor po przecinku, tak jak w kodzie powyżej np. #Text1 h2 - selektor dla tytułu gadżetu "Tekst". 

Następnie dodajemy kod, na wyśrodkowanie nagłówka:

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Zapisujemy szablon. Przedstawiłam Wam ogólny zarys szablonu jaki możecie zrobić. Poniżej są linki do wpisów z których możecie skorzystać przy dalszej modyfikacji. Nie wstawiłam ich tutaj, ponieważ nie chce powielać tego co już jest na blogu :)



6 komentarzy:

  1. Fajna seria :) napewno wiele osób skorzysta !

    OdpowiedzUsuń
  2. Papierowa blondynka31 października 2016 19:39

    Jak zwykle przyjemnie się to czyta i zawsze można skorzystać z twoich rad. :)

    OdpowiedzUsuń
  3. Twoje rady na pewno dla niektórych to dar z nieba :D Brawa za Twoją pracę i chęć nauczania innych :)

    OdpowiedzUsuń
  4. Tu jest tyle przydatnych porad, że można godzinami czytać :) Świetna robota.

    OdpowiedzUsuń
  5. Świetne porady, dziękuję, teraz jestem dumna z mojego bloga :) Zapraszam na https://edunauczyciel.blogspot.com/

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia