wtorek, maja 26, 2015

Jak zrobić nieruchome menu z ikonkami?

     Kojarzycie menu z ikonkami i/lub wyszukiwarką, które jest u góry strony i śledzi każdy nasz ruch? Bardzo spodobał mi się ten efekt już jakiś czas temu. Szukałam instrukcji, ale odpowiedniej nie znalazłam, dlatego uznałam to za wyzwanie - stwierdziłam, że nie może to być tak trudne i znajdę najprostsze rozwiązanie. Ostatnio pomyślałam, że to może być przydatna instrukcja, bo już parę osób się pytało. Jeśli jesteście wśród tych zainteresowanych to zostańcie na dłużej - zaraz wszystko Wam wyjaśnię i pokażę.

instrukcja, blogger, blogspot, nieruchome menu, ikonki społecznościowe, CSS


1. Dodaj gadżet strony i ten, który ma znajdować się na menu

   Zaczynamy od dodania gadżetu Strony na naszego bloga. By to zrobić wchodzimy w Układ, a następnie dodajemy gadżet tuż pod nagłówkiem (1). Z listy wybieramy Strony, zapisujemy wszystko. W kolumnie bocznej dodajemy gadżet (2), który znaleźć ma się na menu. Najczęściej spotykam się z wyszukiwarką i/lub ikonkami społecznościowymi. Jeśli dodajecie te drugie ważne by nie miały jakiegokolwiek tła. Gdy to mamy gotowe wyłączamy Pasek nawigacyjny (3), zapisujemy (4) i przechodzimy do projektanta szablonów.
jak zrobić nieruchome menu, ikonki społecznościowe, gadżet strony, blogger, instrukcja,

Przydatny link przy tym kroku:


2. Ustal wygląd menu

   Pierwsze co robimy w projektancie to ustalamy, jak ma wyglądać nasze menu. By to zrobić odszukujemy w zaawansowanych zakładki Tekst kart oraz Tło kart (5). Ustawiamy by wszystko pasowało i przechodzimy do arkusza CSS, gdzie wklejać będziemy nasze kody.
instrukcja, blogger, blogspot, nieruchome menu, ikonki społecznościowe, CSS

Przydatny link przy tym kroku:


3. Ustaw menu nad nagłówkiem

   By przenieść gadżet Strony nad nagłówek, a przy okazji ustawić, by był przyklejony do górnej krawędzi wystarczy wkleić poniższy kod i odpowiednio dostosować.

.tabs-outer {position: fixed; z-index: 10; top: 0px;  width: 100%; }

Jeżeli:
- zniknęło tło: dodaj po ostatnim średniku  background: #COLOR , gdzie zamiast color wkleisz kod do koloru (wystarczy skopiować ten, który jest podany w zakładce Tło kart),
- menu nie jest przyklejone do górnej krawędzi: zmień zero przy top na większą (jeśli menu za bardzo przesunęło się do góry) lub na ujemną liczbę (jeśli jest przerwa).
- pojawił się inny problem: daj znać pod spodem, a postaram się szybko pomóc.

   Kod ten gwarantuje nam, że menu będzie podążało razem z ruchem strony, nie będzie przez nic zasłaniane oraz będzie na całą szerokość okna.


4. Przenieś ikonki na menu

   Kolejny kod jaki wkleimy spowoduje umieszczenie ikonek na menu. To nic innego jak określenie, gdzie ma być nasz gadżet. Robimy to samo co w poprzednim punkcie. Przy tym kroku ważne jest by poprawnie określić ID gadżetu.

#IDgadżetu {position: fixed; z-index: 10; top: 0px;}

Jeżeli dodany gadżet:
- jest za wysoko: zwiększamy liczbę przy top,
- jest za nisko: zmniejszamy liczbę przy top,
- ma być bardziej przesunięty w lewo/prawo: po ostatnim średniku dopisujemy left: 0px lub right: 0px i ustawiamy zmieniając zera.
   Najprościej pisząc ID gadżetu to taka nazwa określająca każdy z gadżetów na naszym blogu, która powtarzać się nie może. By poznać jakie ID ma wybrany gadżet wystarczy wejść w Układ, najechać myszką na napis Edytuj i otworzyć gadżet w nowej karcie. W adresie do niego (na przykładzie gadżetu Strony) wyszukujemy zaznaczony poniżej fragment:
https://www.blogger.com/rearrange?blogID=1194133230056554550 &widgetType=PageList& widgetId=PageList1 &action=editWidget&sectionId=crosscol
   To co jest po znaku równości to właśnie nasze ID gadżetu. Największą uwagę należy zwrócić na liczbę przy samym końcu, bo inaczej kod może nie zadziałać tak jak chcemy (albo w ogóle).


Postępując zgodnie z każdym punktem powinno wszystko wyjść dobrze. Jeśli jednak będziecie mieli jakieś problemy to piszcie śmiało. Wreszcie udało mi się dokończyć tą instrukcję. Z takimi rzeczami zawsze schodzi mi najdłużej, bo setki razy sprawdzam czy wszystko jest dobrze napisane i wygląda przyzwoicie. Mam nadzieję, że tak właśnie jest, a instrukcja przyda się chociaż jednej osobie.

Lubicie takie wpisy? 
Może chcecie przeczytać jakąś konkretną instrukcję?
Koniecznie dajcie znać!




27 komentarzy:

  1. Swietny post . :))

    Nowy post, moze skomentujesz? Pozdrawiam cieplutko ♥
    ♡ Melody's blogg ♡

    OdpowiedzUsuń
  2. Świetna instrukcja!
    Ja chciałabym zobaczyć, jak zrobić takie rozwijany gadżet, jak kiedyś Ty miałaś ;) Tam były zgromadzone instrukcje...

    Pozdrawiam cieplutko ;*
    ✿by Sylwia - klik✿

    OdpowiedzUsuń
  3. Naprawdę bardzo przydatny post! Ja chętnie poznałabym jak zrobić ikonki społecznościowe po lewej stronie bloga, tak jak Ty masz ;)

    Pozdrawiam ♥
    http://www.mypastel-garden.pl

    OdpowiedzUsuń
    Odpowiedzi
    1. Wystarczy, że użyjesz jedynie kodu z 4 punktu, a zamiast top: 0 wkleisz top: 50% oraz dopiszesz right/left: 0 :)

      Usuń
  4. o muszę spróbować coś takiego u mnie bo te ikony społecznościowe które mam w tym miejscu mi nie pasują

    OdpowiedzUsuń
  5. oo właśnie tych informacji mi brakowało a dokąłdniej nawet ich szukałam
    Świetny wpis, na pewno z nigo skorzystam
    Pozdrawiam,Madda
    Blog Maddy -> klik

    OdpowiedzUsuń
  6. Jak zwykle pomocna! <3<3<3

    OdpowiedzUsuń
  7. Super post! Jak zawsze bardzo przydatne i świetnie wytłumaczone <3

    OdpowiedzUsuń
  8. Długo się zastanawiałam, o co Ci chodzi. Pojęłam dopiero, gdy szybko zjechałam niżej. O te żółte ikonki po lewej! Ja to niezbyt lubię, bo gdy są za duże, przeszkadzają mi w czytaniu. ;-)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie, nie. W poście wytłumaczone jest jak zrobić menu, które jest na samej górze, a na nim poza stronami są jeszcze ikonki albo wyszukiwarka. Coraz częściej spotykam się z czymś takim na blogach. Może kojarzysz o co chodzi :)

      Usuń
    2. Chyba wiem, ale nie jestem pewna. Ale jestem niekumata, haha. ;)

      Usuń
  9. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  10. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  11. Bardzo przydatny post ! :)

    natalyy-blog.blogspot.com

    OdpowiedzUsuń
  12. Hej mam pytanko :D
    Jak zrobić, żeby tło gadżetu "strony" było przeciągnięte na całą długość bloga?

    OdpowiedzUsuń
    Odpowiedzi
    1. Spróbuj tym:
      .tabs-outer {background: #Color; width: 100%;}

      Usuń
  13. jak zrobić, żeby te ikonki miały kolor tła paska bocznego? Bo jak je dodaje to mam je na takim bialym polu?

    OdpowiedzUsuń
    Odpowiedzi
    1. Może to obrazki ikonek mają białe tło? A jak nie to możesz spróbować usunąć tło tym kodem:
      #IDgadżetu .widget-content {background: none;}
      Tylko uzupełnij sobie ID gadżetu.

      Usuń
  14. Chciałam się zapytać jak dodać kilka postów do strony? Nie wiem czy dodaje je się do strony czy gdzie indziej. Chodzi o to, że jak kliknę na np strone "Uroda" to zobaczę w niej parę postów dotyczące tego. Pomożesz? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wybrane posty oznacz konkretną etykietą, potem wejdź w tą etykietę, skopiuj link i dodaj jako stronę :)

      Usuń
  15. mam pytanie, czy wiesz jak zrobic nieruchome menu z ikonkami i do tego ruchome menu pod banerem ?? bo jak robie tak jak w instrukcji to drugie menu tez chodzi

    OdpowiedzUsuń
  16. Heyka! Próbowałam przykleić wyszukiwarkę na to nowe menu nad nagłówkiem, ale ona jest jakoś pod spodem i nie wiem jak mam ją umiejscowić na pasku menu. Poza tym mogłabyś podpowiedzieć jak zrobić nagłówek na całą stronę tak jak to jest u Ciebie?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nagłówek to jedynie obrazek (napis bez tła) i dodane jest białe tło tym kodem: .header-outer {background: #fff;}
      W kodzie, którym przenosiłaś wyszukiwarkę jest fragment: z-index:? Jeśli nie to dodaj go, a po dwukropku wstaw jakąś liczbę.

      Usuń
  17. hej :) możesz wytłumaczyć niekumatemu humaniście jak zrobić, by ikony społecznościowe w kolumnie bocznej ustawiły się poziomo a nie pionowo? nie wiem czy rozumiesz o co mi chodzi...

    OdpowiedzUsuń
  18. Postępowałam zgodnie z instrukcjami i niestety nic nie wyszło :(

    OdpowiedzUsuń
  19. Wiem już jaki mam błąd. Zrobiłam tak że wyszukiwarka jest tylko że odstaje białe tło i jest za długa co zrobić żeby ją skrócić i żeby tło nie odstawało?

    OdpowiedzUsuń
  20. Hej ;) Korzystałam już z kilku twoich porad z powodzeniem, ale menu bloga nie chce mi wskoczyć na samą górę, ani nie moge go rozszerzyć na całą długość bloga. Pomożesz? :P
    http://uciekamwmarzenia9399.blogspot.com/

    OdpowiedzUsuń

Komentować może każdy. | Brak weryfikacji obrazkowej.
Komentarze, gdzie będzie przeważał spam będą usuwane.