Jak zrobić wielokolorowe menu

15.07.2015


Trwa akcja blogowe lato, przez ten czas dostałam kilka maili. Niektóre problemy były do rozwiązania w minute, inne (co nie jest zamysłem akcji) dotyczyły zrobienia szablonu od początku do końca przez maila. Dwa maila jakie otrzymałam były interesujące, ponieważ dotyczyły zrobienia menu takiego jak u My Pink Plum. Poniżej wstawiam zdjęcie, które prezentuje o co chodzi:



Postanowiłam, że rozwiąże ten problem. Udało się, dziewczynom pomogłam, sama zaspokoiłam swoją ciekawość, więc teraz podzielę się z Wami tą instrukcją - może akurat komuś się przyda.

1. Na początek, musimy usunąć strony, które widnieją na naszym blogu. Przechodzimy do układ - strony - edytuj - usuń. 




2. Teraz w tym samym miejscu klikamy "dodaj gadżet" i szukamy gadżetu HTML/JavaScript, a następnie wklejamy kod.




<div class='menu'>
<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='st'>NAZWA STRONY</a>
<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='str'>NAZWA STRONY</a>
<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='strr'>NAZWA STRONY</a>
<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='sttr'>NAZWA STRONY</a>
<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='ssttr'>NAZWA STRONY</a>
</div>

Marginesy - można je dostosować według własnych potrzeb
Linki i nazwa strony - tutaj nie muszę nic tłumaczyć.

Aby dodać kolejną stronę po ostatnim </a> przed </div> wklejamy

<span style='margin-left:10px;margin-right:15px;'></span>
<a href='LINK DO STRONY' class='TUTAJ WPISZ SWÓJ SELEKTOR'>NAZWA STRONY</a>

Pojawił nam się nowy kolor. To co zaznaczone na zielono to nasz selektor, czyli jak w poprzednich linijkach było st, str, strr, sttr, ssttr to tu może być np. kot, pies czy co tam jeszcze chcecie.

Zapisujemy nasz gadżet.

3. Dodanie kodu CSS. Jak widzimy na poniższym zdjęciu nasze strony nie wyglądają zbyt dobrze, więc musimy dodać kod CSS.



Dostosuj - zaawansowane - dodaj arkusz CSS 




W arkuszu wklejamy kod:

.menu{
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
height: 30px;
width: 840px;
font-family: Verdana;
font-size:14px;
text-align:center;
background-color: transparent;
margin:0 auto;
}
a.st {
clear: both;
display: inline;
text-decoration:none;
color: #f63373;
background: transparent;
padding:10px;
}
a.st:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f63373;
padding: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.str {
clear: both;
display: inline;
text-decoration:none;
color: #526fe5;
background: transparent;
padding:10px;}
a.str:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#526fe5;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.strr{
clear: both;
display: inline;
text-decoration:none;
color:#8a2eaa;
background: transparent;
padding:10px;}
a.strr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8a2eaa;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.sttr {
clear: both;
display: inline;
text-decoration:none;
color: #8abb33;
background: transparent;
padding:10px;
}
a.sttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8abb33;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.ssttr {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.ssttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Wszystkie pogrubione wartości są zmienne.

Szerokość 
Rodzaj czcionki
Wielkość czcionki
Położenie menu 
Kolor tekstu danej strony 
Kolor tekstu strony po najechaniu na nią myszą 
Kolor tła po najechaniu myszą 
Zaokrąglenie narożników 

Wspomniałam o tym, że można dopisać swoją własną stronę, ale musimy pamiętać, że dla niej też musimy stworzyć kod CSS.

a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Oczywiście wszystko musimy pozmieniać, a konkretnie to kolor tekstu i tła. Jeśli zmieniliśmy zaokrąglenia narożników, to również i tu musimy dokonać zmian.

Efekt końcowy:



Przyda Wam się taka instrukcja?

32 komentarze:

  1. Super pomysł i instrukcja, może następnym razem wykorzystam, bo właśnie dziś wstawiłam nowy szablon,haha! :) Pozdrawiam, www.polinska.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. To zawsze można wypróbować przy następnym szablonie ;)

      Usuń
  2. super! Jeszcze dzisiaj wieczorem spróbuję! ;)

    OdpowiedzUsuń
  3. Bardzo fajnie to wygląda, dzięki za tutorial! :D

    OdpowiedzUsuń
  4. Bardzo fajna instrukcja, fajnie się prezentuje :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że spodobała Ci się instrukcja :)

      Usuń
  5. Świetny poradnik, mówiąc szczerze nie wiedziałam jak to zrobić, dzięki
    Pozdrawiam,madda
    blog ->klik

    OdpowiedzUsuń
    Odpowiedzi
    1. No to teraz już wiesz :) Nie ma za co :)

      Usuń
  6. Być może kiedyś skorzystam. Przydatne :-).

    OdpowiedzUsuń
    Odpowiedzi
    1. Warto, szczególnie jak chce się wyróżnić poszczególne strony/kategorie :)

      Usuń
  7. Super pomysł i instrukcja. :)
    http://pasje-marzenia-plany-zycie.blogspot.com/

    OdpowiedzUsuń
  8. Będę pamiętać na przyszłość :)

    OdpowiedzUsuń
  9. świetnie to wytłumaczyłaś jednak dla mnie zabawa z kodami to czarna magia i wole tam nic nie ruszać :) Mam jednak pytanie: jak dodać taką informacje pod komentarzami odnośnie pisania komentarzy itp? :)

    http://mywayooflife.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Akurat w tej instrukcji nie da się nic popsuć :)
      Trzeba pogrzebać w kodzie HTML i dodać styl CSS. W sobotę będzie na ten temat instrukcja :)

      Usuń
  10. Świetnie wytłumaczone i bardzo pomocne :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że wszystko jest zrozumiałe :)

      Usuń
  11. O! I to może nam się przydać przy rekonstrukcji bloga! Dzięki! :)

    OdpowiedzUsuń
  12. Można do tych stron dodać posty, czy tylko jeden wpis? Jeśli można, to napiszesz jak to zrobić? Z góry dziękuję, bardzo przydatne są twoje posty. ♥

    OdpowiedzUsuń
  13. Do tego typu stron raczej nie dodaje się jednego wpisu, a kategorię i pisałam o tym jak to zrobić tutaj:
    http://blonparia.blogspot.com/2014/03/kategorie-wygladajace-jak-strony.html
    W tym wypadku, link z etykiet wklejamy w miejsce "link do strony" ;)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia