Jak zrobić prosty nagłówek ?

Niektórzy pewnie trudnią się nad wykonaniem nagłówka, ja wam dzisiaj pokaże jak wykonać banalny przykład nagłówka. To jest bardzo proste !

1. Wchodzimy na we♥it , wybieramy 4 podobające się nam obrazki i zapisujemy je na pulpicie.

 2. Następnie wchodzimy na pixrl express i klikamy ostatnie kółeczko Collage.

 3. Klikamy na "Layout" i wybieramy kolaż z 4 obrazków.

 4. Dodajemy zdjęcia z we heart it, możemy ustawiać ich wysokość, okrągłość itp.

 5.Wchodzimy w paint'a i wklejamy nasz nagłówek (tylko nie otwieraj nagłówka za pomocą   painta!) i zmieniamy jego położenie, w ten sposób będziemy mieli miejsce na tekst.  Zapisujemy to.

6. I znowu wchodzimy na pixrl'a i otwieramy to co zapisaliśmy w paincie. Dodajemy tekst.

Jeżeli chcemy przyozdobić nasz nagłówek, możemy dodać jakieś kropki czy serduszka.

I oto cały nagłówek. Proste ? proste :)

 

Ok, mamy już nagłówek. Ale teraz co z nim zrobić ? Gdzie go umieścić ? Wiele osób nie wie jak umieścić go "nad postami", to ja wam pokażę.

1. Wchodzimy w układ.

2. Do gadżetów dodajemy obraz, czyli nasz nagłówek. W tytuł wpisujemy to --> <!> (nagłówek musi być w formacie .png, inaczej białe tło zmieni się na szare).

3. Gdy już mamy dodany obraz w gadżetach, przenosimy go teraz nad "posty w blogu".

4. Jeżeli nagłówek będzie za duży lub za mały, zmniejszamy go aby dopasować, lub odwrotnie.

Ok, wszystko pięknie, ładnie, myślę że mi się udało, a tu ba dum TSSS ! 

Pojawia się nam przerwa, i nie wiadomo co z nią zrobić. W takim razie:

1. Przechodzimy do "szablon" i klikamy w edytuj kod HTML. 

2. Za pomocą klawiszy ctrl i F pojawi się nam małe okienko, i wpisujemy w nie: .main-inner, enterem szukamy takiego czegoś:

 .main-inner .widget {

  padding: 0 $(widget.padding.side) 15px;

 background-color: $(widget.background.color);

border: 1px solid $(widget.border.color);

  margin: 20px -16px; 

Wy liczby "margin: 20px 16px;" możecie mieć inne, np. o dwa mniejsze.

3. I te liczby zmieniamy na 0, lub na 3, czyli:

.main-inner .widget {

  padding: 0 $(widget.padding.side) 15px;

background-color: $(widget.background.color);

border: 1px solid $(widget.border.color);

  margin: 3px -3px;

Tylko nie wpisujcie w okienko całego kodu bo wam nie wyszuka !