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 ♥

Aniołek

Hej hej :)) Co tam u Was? Ja ledwo się z wszystkim wyrabiam (mam rzecz jasna na myśli szkołę, testy, sprawdziany, kartkówki i inne pierdoły). No i mam złą wiadomość: nie wiem kiedy pojawi się następny post. W każdym razie następny post z moimi wyrobami, bo być może pojawi się coś typu "rozkminy nad laptopem", albo coś takiego :P Po pierwsze - nie mam już kompletnie nic, co mogłabym pokazać, a nie mam ani weny, ani czasu, żeby coś ulepić/zrobić. Po drugie nie mam na telefonie miejsca i nie mogę robić zdjęć, muszę dokupić kartę SD. Naprawdę nie ogarniam systemu Nokii Lumii. Ponad 1 GB zabierają "pliki tymczasowe", których za nic nie potrafię usunąć. Jak przeglądam internet, albo robię cokolwiek innego na telefonie, to traci mi się pamięć i przechodzi w te właśnie pliki tymczasowe. Dobra nie potrafię tłumaczyć. xdd Jest tu ktoś, kto ma i ogarnia telefon Nokia Lumia 520? 

A na dzisiaj aniołek (był wzorowany na aniołku Tessy z serii książek Cassandry Clare). Robiony na zamówienie koleżanki. Zrobienie go zajęło mi jakieś trzy godziny, ale myślę, że warto. To chyba najtrudniejsza rzecz z modeliny jaką kiedykolwiek zrobiłam. Jak Wam się podoba? Nie jest idealny, bo pierwszy raz robiłam coś takiego, ale w końcu trening czyni mistrza! Nawet nie wiecie (a może i wiecie) jaki to jest stres robić pracę na zamówienie. "O nie nie wyszło mi! To muszę poprawić! Ten element jest większy od tamtego, muszę zrobić jeszcze raz!". Normalnie taka presja, że coś nie wyjdzie, masakra :P

Prawie 200 osób lubi moją stronę na fb - chcesz do nich dołączyć? Naciśnij ikonkę facebooka po lewej stronie bloga i kliknij lubię to! :))

Miłej niedzieli! ~ Daga ♥