Jak zrobić wielokolorowe menu

15.07.2015


Na blogu My Pink Plum możemy (mogliśmy) zaobserwować proste, ale przyciągające wzrok menu. Wielokolorowe - każda strona ma swój kolor, zarówno przed jak i po najechaniu kursorem na nią. Dostałam od Was dużo maili na temat tego jak zrobić takie menu, a ja z chęcią taką instrukcję dla Was przygotowałam :)



1. Na początek, (jeśli mamy) musimy usunąć standardowe strony bloggera, 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.







Marginesy - (margin-left) 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



Pojawił nam się nowy kolor. "TUTAJ WPISZ SWÓJ SELEKTOR" - tutaj musimy wpisać selektor dla kolejnej naszej strony, 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ą tak, jakbyś tego oczekiwali. Dlatego, musimy dodać kod CSS.



Motyw - 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Ń
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia