Pomoc blogowa #1 - jak zrobić strony pod nagłówkiem?

Cześć Kochani :) Jak zapewne zauważyliście na moim blogu pojawiło się ostatnio sporo nowości. Przede wszystkim nowy wygląd. Może dla niektórych nie jest jakiś super ekstra, ale mi się podoba, bo zrobiłam go sama. :p Na razie jestem jeszcze amatorką w tym temacie, ale coś tam wiem. Dlatego pomyślałam, że mogę podzielić się z Wami moją dotychczasową wiedzą o html'u, css'ie itd. Na razie nie jest tego dużo, ale komuś może ułatwić życie. :)) Posty z serii "pomoc blogowa" będą pojawiały się wtedy, kiedy będę miała Wam coś do przekazania.

________________________________________________________________________________________________

Dzisiaj wyjaśnię jak zrobić własne strony pod nagłówkiem:

1. Wchodzimy w projekt bloga. Wybieramy opcję "strony", a następnie "nowa strona"

2. Wpisujemy tytuł strony i tekst, który chcemy na tej stronie zamieścić ;)

3. Wybieramy "układ" a następnie "dodaj gadżet" (we wskazanym miejscu)

4. Wybieramy gadżet "HTML/Java Script"

5. Nadajemy tytuł i wpisujemy kod (szablon kodu podaję poniżej)

szablon kodu:

<div class='menu'>
<ul>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>

<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>

<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>

<a href="wpisz link do strony">wpisz nazwę strony</a>

</ul>
<div class='ikonki'></div>

a) &nbsp; - to jest odstęp, a inaczej tzw "twarda spacja". Jeśli w kodzie wciśniemy spację, to nie zostanie ona zauważona. Aby zrobić odstęp pomiędzy poszczególnymi stronami to wpisujemy tą właśnie frazę. Ja zrobiłam trzy odstępy (i uważam, że to najlepiej wygląda) ale jeśli chcecie mieć większy odstęp to po &nbsp; wpisujecie kolejne &nbsp;

b) <div class='ikonki'></div> - tą linijkę wpisujemy, jeśli chcemy aby nasze strony były wyśrodkowane (tak jak pokazane na pierwszym zdjęciu w tym poście). Jeżeli jej nie wpiszemy to strony będą wyrównane do lewej strony:

Ale to nie wygląda ciekawie, prawda? ;)

6. Wybieramy "szablon" a następnie "dostosuj"

7. Wybieramy opcję "zaawansowane"

8. Wybieramy "dodaj arkusz CSS"

9. Teraz krok po kroku podyktuję Wam kod, który musicie wpisać ;)

.tabs-outer {

background-color: (w tym miejscu możecie wpisać kolor "ramki" - nie wiem jak to nazwać, spójrzcie na zdjęcie poniżej) ;

Jeżeli chcecie mieć przezroczyste tło (tak jak na pierwszym obrazku w tym poście) to po prostu nie wpisujcie tu żadnego koloru.

}

.menu {display:inline-block; max-width: 1240px; text-align:center; font-family: Times New Roman; 

font-size:13px; text-transform:none; letter-spacing:2px; padding:8px; margin-top:4px; margin-bottom: 4px;}

.ikonki {margin: -27px 190px -15px 770px; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px;}

.menu a:link {color:#9932CD;} 

#9932CD - to jest kolor fioletowy. Zamiast niego możecie wpisać dowolny kolor, w jakim ma być druga i piąta strona (przynajmniej tak jest u mnie)

.menu a:visited {color: #9932CD;} 

#9932CD - to jest kolor fioletowy. Zamiast niego możecie wpisać dowolny kolor, w jakim ma być pierwsza, trzecia i czwarta strona.

.menu a:hover {color: #9932CD;}

a:hover {text-decoration: none;}

Jeśli jesteście zadowoleni z efektów, klikacie "zastosuj do bloga" i gotowe! :))

Tak wygląda kod na moim blogu:

.tabs-outer {

background-color:;

}

.menu {display:inline-block; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px; margin-top:4px; margin-bottom: 4px;}

.ikonki {margin: -27px 190px -15px 770px; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px;}

.menu a:link {color:#9932CD;}

.menu a:visited {color: #9932CD;}

.menu a:hover {color: #9932CD;}

a:hover {text-decoration: none;}

**** Tu macie link to tabeli kolorów HTML. Wystarczy, że skopiujecie któryś kod i wpiszecie we wskazanym przeze mnie miejscu :) KLIK!

________________________________________________________________________________________________

Uff... Pracowałam nad tym postem kilka godzin, ale wreszcie jest! :) Dajcie znać, czy wpis okazał się dla Was przydatny i czy chcecie więcej postów tego typu. :) Jakbyście mieli jakieś pytania - piszcie w komentarzach, a jeśli będę umiała, z chęcią pomogę :)

Pozdrawiam ~ Dagmara ♥