Jak to jest zrobione?

No więc w tym poście pokaże wam jak zrobiłam szablon "Together, we are stronger".
Może sie wydawać, ze to trudne, ale to tylko pozory.
No więc zaczynamy.

1)Jeśli juz mamy wybrany nagłówek. Musimy zdobyć do niego link. Ja używam www.imageshack.us

Klikamy upload: 

 

Natępnie wybieramy nagłówek któy nas interesuje:

 Zdjecie się ładuje:

 Klikamy Go to My Images:

Wybieramy link i go kopiujemy:

Wchodzimy w edytor szablonów w bloggerze:

W punktach:

Strona: 

Kolor tła:"przezroczyste"

Tło kart:

Kolor tła: transparent

Kolor po zaznaczeniu: transparent

Kolor obramowania: transparent

Nagłówek z datą: 

Kolor obramowania: transparent

Tło posta:

Kolor tła: transparent

Kolor obramowania: transparent

Kolor skosu: transparent

Tekst gadżetów:

Kolor alternatywny: transparent

Tło gadżetów:

Kolor tła: transparent

Kolor obramowania: transparent

Kolor skosu: transparent

Tło paska bocznego:

Kolor tła: transparent

Obrazy:

Kolor tła: transparent

 Kolor obramowania: transparent

Pager: 

 Kolor tła: transparent

 Stopka:

 Kolor tła: transparent

ZACZNIEMY ZA CHWILE PISAĆ ŁĄTWY CSS

JEDNAK WCZEŚNIEJ POLECAM ZMIENIC W "SZABLONY: 

 Jeśli mamy już to ustawione przechodzimy do 

DODAJ ARKUSZ CSS

 Tu zaczynaja się schody, jednak nie tak wysokie. 

Zaczynamy od pisania selektora "body"

body STAWIAMY SPACJE I DAJEMY NAWIAS KLAMROWY, ZNACZY OTWIERAMY POLECENIE JAKIE CHCCEMY ZASTOSOWAĆ {

background-image: url(TUTAJ WSTAWIAMY LINK NASZEGO NAGŁÓWKA) I STAWIAMY ŚREDNIK (;)

background-position: WYBIERAMY POZYCJE GDZIE MA SIE ZNAJDOWAĆ NAGŁOWEK- PODSTAWOWE TO: "top" "center" "bottom" "left" "right" OCZYWIŚCIE WPISUJEMY BEZ CUDZYSŁOWIA; NA KOŃCU KAŻDEGO POLECENIA WSTAWIAMY ŚREDNIK (;);
background-size:TUTAJ WYBIERAMY ROZMIAR NAGŁÓWKA W PIKSELACH (px) I ZNWOU NA KOŃCU STAWIAMY ŚREDNIK (;)

NA KOŃCU MUSIMY ZAMKNĄĆ POLECENIE NAWIASEM KLAMROWYM }

MOJ SELEKTOR body WYGLADA TAK :

IDZIEMY DALEJ

header {
height: TUTAJ WPISUJEMY WYSOKOSĆ W PIKSELACH (px) I ZNWOU ZAMYKAMY ŚREDNIKIEM I NAWIASEM KLAMROWYM;
}

U MNIE WYGLADA TO TAK:

DALEJ ZAJMIEMY SIĘ RAMKĄ POSTA:

W TYM CELU WPISUJEMY SELEKTOR '#Blog1' ISTNIEJA INNE SELEKTORY NA TO ALE JA UŻYWAM TEGO

#Blog1 {
background-color: ; WPISUJEMY NUMER KOLORU, W TYM CELU JA KORZYSTAM Z PROGRAMU "JUST COLOR PICKER (LINK DO STRONY GDZIE MOŻNA POBRAĆ: TU)

 

border" którego zaraz użyjemy jest to ramka

top-góra

bottom- dół

left-lewo

right- prawo

radius- zaokrąglenia 

np. 

border-top: grubość w pikselach (px) rodzaj ramki (nizej dam wam obrazek z rodzajami) i kolor w ukłądzie szesnastkowym czyli np. #ffffff i zamykamy średnikiem;

RODZAJE RAMEK:

U MNIE WYGLĄDA TO TAK:

WIDZIMY ŻE NASZ WYGLĄD POSTA NADAL NIE JEST DOBRY.

TERAZ ZAJMIEMY SIĘ WYŚRODKOWANIEM TEKSTU, KOLOREM POD SAM TEKST I MARGINESAMI.

PISZEMY KOLEJNY SELEKTOR

.post {
background-color:KOLOR TŁA POD SAM TEKST (ZOBACZ);
padding: USTALAMY ODSTĘP WEWNĘTRZNY TEKSTU OD RAMKI W PIKSELACH (px);
margin-left: SZEROKOŚĆ MARGINESÓW W PIKSELACH(px);
margin-right: 1px;
border-radius: 38px;
text-align: RODZAJ WYRÓWNANIA TEKSTU(są: "justify" "left" "right" "center" TAK JAK W WORDZIE) NO I ZAMYKAMY POLECENIE ŚREDNIKIEM A POTEM KLAMERKĄ ;
}

NASZ SZABLON WYGLADA TERAZ TAK:

 ZMIENIAMY POŁOŻENIE DATY:

SELEKTOR: 'h2.date-header span'

h2.date-header span {
text-align: POŁOŻENIE DATY( MAMY DO WYBORU "center" "left" "right";
margin-bottom/top: ODLEGŁOŚĆ OD MARGINESU DOLNEGO/GÓRNEGO

;
}

 TERAZ TYTUŁ POSTA:

SELEKTOR: "h3.post-title"

h3.post-title {
text-align: center;
margin-bottom: -8px;
margin-top: -8px; ;
}

ZANIM ZROBIMY KOLEJNY KROK W CSS-IE I WPROWADZIMY KOLEJNY SELEKTOR MUSIMY PODJĄĆ DECYZJE O UKŁADZIE BLOGA. CZYLI ILE KOLUMN I JAK UŁOŻONYCH CHCEMY.  W TYM CELU PRZECHODZIMY DO "UKŁAD"

I WYBIERAMY:

WRACAMY DO CSS PO WYBRANIU UKŁADU

TWRAZ ZAJMIEMY SIĘ KOLUMNĄ LEWĄ/PRAWĄ (TĄ KTÓRĄ WYBRALIŚMY)

JA WYBRAŁAM OBIE WIĘC NAJPIERW ZAJMĘ SIĘ LEWĄ

PISZEMY SELEKTOR:

".column-left/right-inner"

.column-left-inner {
position: relative(PISZEMY TEN KOD ABY MÓC PÓŹNIEJ W PROSTSZY SPOSÓB OKREŚLIĆ DOKŁADNE POŁOŻENIE KOLUMNY);
top: -160px(WYSOKOŚĆ W PIKSELACH(px);
right: 90px(USTALAMY W KTÓRĄ STRONĘ CHCEMY PRZEMIEŚCIĆ KOLUMNĘ);
width: 250px(SZEROKOŚĆ RAMKI, JEŚLI WAM ODPOWIADA TA KTÓRA JUŻ JEST NIE MUSICIE TEGO PISAĆ);}

KOLEJNE KOLUMNY OKREŚLAMY W TAKI SAM SPOSÓB ZMIENIAJAC JEDYNIE NAZWĘ SELEKTORA.

TERAZ ZAJMĘ SIĘ KOLUMNĄ ŚRODKOWĄ.

.column-center-inner {
position: relative;
right: 30px;
top: 20px;
width: 640px;}

A TERAZ PRAWĄ:

.column-right-inner {
position: relative;
right: -30px;
top: -100px;
width: 200px;}

TERAZ ZAJMIEMY SIĘ WYGLĄDEM KOLUMN

SELEKTOR: ".column-right/left-inner .widget" 

WPISAŁAM .widget PONIEWAŻ WTEDY RAMKA NIE BEDZIE JEDNA ALE ICH BEDZIE WIELE.

CHODZI O TO:

.column-right-inner .widget {
background-color: RGBa(146, 156, 159, 0.2);
border-top: 6px solid #E9EAEE;
border-bottom: 6px solid #E9EAEE;
border-right: 2px solid #E9EAEE;
border-left: 2px solid #E9EAEE;
border-radius: 60px;
padding-bottom: 28px;
text-align: justify;
}

.column-left-inner .widget {
background-color: RGBa(146, 156, 159, 0.2);
border-top: 6px solid #E9EAEE;
border-bottom: 6px solid #E9EAEE;
border-right: 2px solid #E9EAEE;
border-left: 2px solid #E9EAEE;
border-radius: 60px;
padding-bottom: 28px;
text-align: justify;
}

ABY WYŚRODKOWAĆ TEKST W KOLUMNACH NALEŻY WPISAĆ:

h2 {
text-align: center;
}

JEŚLI SPOJRZYMY NA NASZ SZABLON JEST ON PRAKTYCZNEI GOTOWY JEDNAK COŚ NAM PRZESZKADZA. OH. TAK JEST TO NAPIS KTÓRY ZASŁANIA JAKĄS CZESĆ NASZEGO NAGŁOWKA. ABY GO USUNAĆ NALEZY WEJŚĆ W TYTUŁ BLOGA

I KOLOR TYTUŁU ZMIENIAMY NA PRZEZROCZYSTY.

JEŚLI NASZ BLOG POSIADA TAKŻE OPISA. WCHODZIMY W OPIS BLOGA I TAM ZMEINIAMY AN PRZEZROCZYSTE.

Mam nadzieję, że pomogłam. 

JEŚLI MACIE JAKIEŚ PYTANIA, PISZCIE W KOMENTARZACH. NA WSZYSTKIE ODPOWIEM.