Instrukcja na menu + ...no właśnie, czyli pierwsze koty za płoty!

           Hej! Mam na imię Lena i właśnie dołączyłam do załogi "Zatracone instrukcje". Jestem z tego mega dumna i mam nadzieję, że spełnię wasze oczekiwania. Jeśli czegoś byście nie zrozumieli pytajcie. Na pewno pomogę!

Grafiką interesują się od mniej więcej roku i postanowiłam spróbować na zatraconych..Może się uda! :D

           Dzisiaj przygotowałam dla was instrukcję na fajne menu, jak na zdjęciu poniżej.

Nie pamiętam już skąd ją "umiem". Po prostu nie wiem. Zacznijmy od początku! Wchodzimy w swój blog > układ > dodaj gadżet > HTML/JavaScript i wklejamy następujący kod. Będzie on odpowiadał za nasze strony.

<a class='kim' href=http://zatracone-instrukcje.blogspot.com/>Instrukcje</a> 

Czerwony- tutaj możemy wpisać co chcemy, tylko później musimy pamiętać, żeby w następnym kodzie wpisać to samo.

Żółty- link , do konkretnej strony.

Zielony-nazwa strony.

Teraz wchodzimy w szablon>dostosuj>zaawansowane>dodaj arkusz css i wklejamy następujący kod:

#HTML1 {width: 80px;margin: 20px 0px 0px -145px;position: absolute;}a.kim:link, a.kim:active, a.kim:visited {display: inline-block;width: 100px;margin: 0px 0px 2px 135px;text-align: left;font-family: times new roman;font-style: italic;color: #000;border-left: 15px solid #dce1e7;padding-left: 10px;}
a.kim:hover {border-left: 45px solid #741b47;text-decoration: none;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;}

Pomarańczowy- czyli, najprostszym językiem numer gadżetu, sprawdza się je wchodząc w układ.Jest opisane na zdjęciu.

 

Niebieski- czyli nasza szerokość kart.

Bordowy-położenie stron.

Turkusowy-czyli  jest tak jakby ruchomy. Oznacza to , że przewija się wraz z przewijaną stroną.Mam nadzieję, że rozumiecie.

Czerwony-to jest właśnie te słowo , które wklejaliśmy do Html'u.

Szary- po prostu to jest po to, "żeby się zmieniało".

Brązowy-położenie tekstu czy ma być na środku czy do lewej, prawej.

Różowy-czcionka.

Jasny fioletowy- styl czcionki, np. pochyła.

Żółty-to jest nasz kwadracik z lewej.Można zmieniać wartość w px i kolory.

Jasny pomarańcz- odstęp między kwadracikiem a nazwą strony.

Zielony- po najechaniu w linku nie ma podkreślenia.

Granatowy-efekty po najechaniu , aby się zmieniało i powracało do stanu pierwotnego.

EDIT.: Tej instrukcji można jedynie używać kiedy kwadraciki są po lewej stronie, po prawej nie działa.

I jeszcze jedna instrukcja też na karty podobna.

Jak za pierwszą instrukcją do HTML/JavaScript wklejamy ten sam kod a następnie wchodzimy w dodaj arkusz css.

Kod to: 

#HTML1 {width: 80px;margin: 6px 0px 0px -75px;}
a.kim:link, a.kim:active, a.kim:visited {display: inline-block;width: 100px;margin: 0px 0px 2px 135px;text-align: right;font-family: times new roman;font-style: italic;color: #000;border-right: 15px solid #dce1e7;padding-right:5px;}
a.kim:hover {border-right: 15px solid #b2d4a2;text-decoration: none;}

Tutaj już nie będę podkreślać, bo wszystko jest takie same jak w poprzedniej instrukcji.

Myślę, że instrukcja jest przydatna i kiedys ją wykorzystacie, a tymczasem do zobaczenia!

EDIT.: 14.11: Mam pytanie do administratorek. Czy mogę dodawać instrukcje, czy na razie  muszę ograniczyć się do tej na okres próbny?

Pozdrawiam xoxo.