Wysuwane menu

Poradnik Sophie dla osób "niepełnosprytnych" graficznie. Nie martwcie się, to dotyczy właśnie Sophie. :D

Wymarzyłam sobie wysuwane(czy też rozwijane menu). Próbowałam robić zgodnie z poradami, ale oczywiście zawsze coś było nie tak. A to na środku strony, a to jakieś śmieszne literki i cyferki były zamiast menu i ostatecznie zniechęcona porzuciłam temat na długie miesiące, ale wzięłam się za siebie, spróbowałam drugi raz i się udało, co możecie podziwiać pod nagłówkiem. Ja tam podziwiam. ^^ Teraz wyjaśnię, co zrobiłam krok po kroku i mam nadzieję, że komuś tym pomogę!

Krok pierwszy: Robimy kopię szablonu, gdybyśmy przypadkiem wszystko zniszczyli, żeby sobie szybciutko przywrócić, to co było.

Wchodzimy w panel bloga i klikamy szablon. Mamy tutaj opcję Utwórz/przywróć kopię zapasową.

Pojawia się taka opcja:

Klikamy "Pobierz pełny szablon". Teraz jesteśmy zabezpieczeni i nie będzie wpadki.

Krok drugi: Większość osób, jak ja miała menu,(czyli Strony) tuż pod nagłówkiem. 
Na potrzebę tej chwili Strony przenosimy na blok, czy na dół, jak kto woli.
Dlaczego? Gdy miałam strony pod nagłówkiem, to wysuwane menu wyskakiwało mi zawsze poza nagłówek, a nie da się niestety sprawić, żeby było wyśrodkowane, jak się dowiedziałam. 

Krok trzeci: Wybieramy szablon!


Jak widzicie wybrałam menu numer 16. Wy wybieracie, co chcecie i ściągacie kod.

Krok czwarty: Wracamy do szablonu na blogu i klikamy "Edytuj kod HTML".
Krok piąty: Klikamy CTRL + F 
Pojawia się okienko wyszukiwania. Ważne, żeby kliknąć na tekst, bo nie będzie wyszukiwał. Do okienka wrzucamy < /header>

Krok szósty: PRZED < /header>
wrzucamy kod, który pobraliśmy i klikamy "Zapisz szablon". Wyświetlamy bloga, czy menu jest na środku, jak nie, to wybieramy następne, choć teoretycznie powinno być. Jak mówiłam, gdy i tak będzie przesunięte po przeniesieniu stron, to nie da się nic zrobić poza spróbowaniem z kolejnym.

Krok siódmy: Wybieramy, jakie strony chcemy mieć w tym menu. Podstawiamy własne nazwy. 
Zamiast "Home" dajemy "Strona Główna". W miejsce tego # wstawiamy link.
Jeżeli nie chcemy więcej podstron przy Stonie głównej usuwamy wszystkie linki kodu poza zamykającą częścią.
 Tak to wygląda.
Jeżeli chcemy więcej stron, jest trochę więcej zabawy, ale wszystko da się szybciutko ogarnąć!

Przejdźmy do kolejnej mojej zakładki, czyli "Kontakt". Mam tutaj aż 3 podstrony.
Jak widzicie, trzeba poleceniem div otworzyć i zakończyć kolumnę. Dodawanie kolejnych podstron to błahostka. W miejsce # link, pomiędzy "a" nazwa podstrony i tak w kółko. Zamykanie sekwencji. I potem od początku z kolejną. Mogę podesłać na E-maila gotowy wzór. :)

Krok ósmy: Wygląd! Na kształt nic nie poradę, musicie zwracać uwagę na to przy wybieraniu szablonu, ale można pobawić się z kolorem. Patrzymy, gdzie zaczyna się kod i zwracamy uwagę na wszystkie miejsca, gdzie pojawia się #NUMER. Zazwyczaj poprzedza go napis color lub background. Teraz metodą prób i błędów trzeba wrzucać w miejscu, gdzie są dokładnie takie same napisy #NUMER ten sam wybrany przez siebie kolor. Kolory oczywiście w tej samej formie #NUMER. Można sobie sprawdzić w szablonie przy DOSTOSUJ--->ZAAWANSOWANE--->BACKGROUND, jakie ma się kolory ustawione. Spróbować z jednym kolorem, sprawdzić, co się zmieniło, ewentualnie zmienić i tak aż dojdziemy do ostatniego elementu. :)
Mam nadzieję, że Wam się udało! 

Sophie di Angelo

26 komentarzy:

  1. No to będę miała co robić ^^ Dzięki, Kociak!

    OdpowiedzUsuń
  2. Wreszcie ktoś umie mi to wytłumaczyć, a nie, że błądzę po tym kodzie i nie umiem się odnaleźć... jak w labiryncie :)

    OdpowiedzUsuń
    Odpowiedzi
    1. nie, poddaję się, nie umiem tego zrobić :(

      Usuń
    2. Jeżeli mi wystarczająco ufasz, to ja mogę Ci zrobić. :D

      Usuń
    3. Ok wyśle ci na maila w ŚRODĘ co i jak. Dzięki za pomoc!

      Usuń
  3. Dla mnie takie rozbudowane html jak tu, to czarna magia. ;o
    Ale fajnie to wytłumaczyłaś, kiedyś jak będę miała potrzebę wysuwanego menu to powrócę do tej notki. :D

    OdpowiedzUsuń
  4. O! Za niedługo będę robiła remoncik, wiec zapiszę soebie link do twojego posta. :) Dzięki!

    OdpowiedzUsuń
  5. I takie posty to ja lubię - przynajmniej wszystko po ludzku wytłumaczone :)

    Dzięki!

    OdpowiedzUsuń
  6. Dla mnie te kody i to wszystko to jak chiński pomieszany z ruskim. Haha ;d
    Na razie odpuszczę, ale gdy będę chciała takie coś zrobić to z chęcią wrócę do tej notki ;)

    weronine-library.blogspot.com

    OdpowiedzUsuń
  7. Aaaaa wrzuciłam menu rozwijane i jest już na górze... a co dalej to nie wiem :/ Mogłabyś mi pomóc dałam by ci wejście do bloga :)

    OdpowiedzUsuń
    Odpowiedzi
    1. A jednak się udało metodą prób i błędów :D Dziękuję ślicznie za instrukcję:D

      Usuń
    2. Jej! Ślicznie wygląda. :D Cieszę się, że pomogłam. :)

      Usuń
  8. Dzięki za tę notkę :) Jak będę mieć więcej czasu to postaram się to ogarnąć :)

    OdpowiedzUsuń
  9. Dziękuję przyda się, właśnie jak tylko zmieniłaś miałam zapytać, ale potem jakoś tak wypadło... ;)

    Pozdrawiam.

    OdpowiedzUsuń
  10. nie radzę sobie niestety a jestem tu nowa ;/ nie masz ochoty pomóc? ;D http://cass-dark.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. dobra poradziłam sobie sama, po prostu szablon który wybrałam miał zamiast nazw "home" itp takie gwiazdki ** a z nazwami było łatwiej.

      Usuń
  11. Super notka, bardzo pomocna :)

    OdpowiedzUsuń
  12. Po zapisaniu tego menu po boku jako gadżet mam te stronki, które na początku przeniosłam z góry na bok, da się to jakoś ukryć?

    OdpowiedzUsuń
    Odpowiedzi
    1. Miałam dokładnie ten sam problem. Musisz wejść w szablon i znaleźć taki widget tam, najlepiej przez ctrl + f wpisując nazwę którejś ze stron i go usunąć :) Będą dwa. Jedno z nich to menu wysuwane, a drugie właśnie strony. Tylko na wszelki wypadek zapisz kopię szablonu przed tym, jakby coś poszło nie tak.

      Usuń
  13. Twoja strona okazała się niezwykle pomocna! Dziękuję pięknie! <3

    OdpowiedzUsuń
  14. Nie umiem tego zrobić napisałam meila :)

    OdpowiedzUsuń
  15. Dzięki Ci! :)
    Bardzo mi pomogłaś z tym postem :)

    OdpowiedzUsuń

Dziękuję za komentarz! Do zobaczenia przy kolejnym poście!
Xoxo