4 października 2012

Chowający się pasek nawigacyjny.

Pasek nawigacyjny, jak zapewne wiadomo, widnieje na górze bloga. Można mu w łatwy sposób zmienić kolor, a całkowite usunięcie też nie sprawia problemów. Jednak paleta barw, jaką dysponujemy, jest bardzo ograniczona: niebieski, brąz, czerń, srebro - a także warianty półprzezroczyste: ciemny i jasny. Tylko co zrobić, jeśli nasz blog jest pomarańczowy albo żółty? Jakie kolory wybrać? Możemy też zacząć narzekać, kiedy ważna część naszego szablonu jest pod nim schowana.
Jednocześnie krążą pogłoski, że usunięcie paska nawigacyjnego gryzie się z terms of use Bloggera, chociaż nie bardzo w to wierzę. Gdyby tak było, na Blogspocie funkcja ukrycia tego gadżetu byłaby niedostępna.
Jednak niektórzy woleliby zostawić ten widżet, gdyż z niego szybciutko mogą się zalogować, napisać nowy post lub wejść w panel nawigacyjny. Jest dostępne jedno rozwiązanie - wpisanie kodu na chowający się pasek nawigacyjny.
Jego "działanie" (a może raczej egzystowanie?) jest proste: trzymając kursor myszy w miejscu, gdzie powinien być pasek, ten pasek się pojawi. Gdy przesuniemy strzałeczkę w inne miejsce - pasek zniknie. Można zobaczyć to na tym blogu.
Trik działa w przeglądarkach Firefox, Opera, IE, Safari.
Szkoda, że Chrome jest trochę pokrzywdzony...*
*Któraś z nowszych wersji Chrome blokuje cały pasek nawigacyjny. Całkowicie. To nieważne czy jest on "wyskakujący", czy stały. Nie ma go, koniec, kropka. Dziwne, bo Blogger jest od Google, Chrome jest od Google... Niestety, ale przestawiłam się na Mozillę Firefox.

Co musimy zrobić?
1. Wchodzimy w panel nawigacyjny -> Szablon.
Jeśli boimy się, że możemy coś zepsuć i jesteśmy pewni, iż tego nie naprawimy, polecam kliknąć Utwórz/przywróć kopię zapasową -> Pobierz pełny szablon.
2. Dajemy Edytuj kod HTML -> Kontynuuj.
3. Wyszukujemy fragment kodu, który wygląda tak:

body
{

(Można tez kliknąć Ctrl + F i wpisać w pole frazę    /* Content    - body, o które nam chodzi powinno znajdować się tuż pod nią. U mnie ten fragment kodu wygląda tak: <klik>)

4. Tuż nad zaznaczonym fragmentem wklejamy następujący kod:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}
(Powinno to wyglądać w ten sposób: <klik>)

5. Dajemy Zapisz szablon i mamy wszystko zrobione.


18 komentarzy:

  1. W Chromie też działa :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Którą wersję Chroma posiadasz? :)
      Jill niestety nie działało (ma GC), kilku innym osobom też niespecjalnie :)

      Usuń
    2. 22.0.1229.94 m

      Hm, może jestem jakaś wyjątkowa? ;)

      Pozdrawiam, Ola

      Usuń
    3. U mnie też działa bez zarzutu =) (Google Chrome 23.0.1271.97 m)

      Usuń
  2. Jeśli to jest to o czym myślę, to ja tak miałam od samego początku ;)
    Poza tym Twoje instrukcje są świetne :)
    Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Może miałaś jakiś inny szablon na start? :) Albo coś się pokićkało w kodzie? (u mnie wszystko było OK i nagle zniknęła opcja "odpowiedz" w komentarzach, a przywrócenie innego szablonu nic nie daje XD)
      Dzięki, miło, że się komuś przydają.
      Z okazji pół-rocznicy Zaczarowanych Szablonów szykuję instrukcję na rozwijane menu (takie, jakie teraz jest na ZS). Może Ci się przyda :D

      Usuń
  3. Przydatne instrukcje. Dziękuje i pozdrawiam :)

    OdpowiedzUsuń
  4. Przydatne i zrozumiałe. Dobra robota :)

    OdpowiedzUsuń
  5. ja mam problem, ponieważ widzę, że blogger zmienił html bloga (albo ja mam coś nie tak ze swoim) i niestety nie bardzo działa mi opcja chowającego się paska nawigacyjnego, która bardzo by mi się przydała. Czy istnieje jakiś 'nowy kod', który działałby na obecnym html blogspota? Próbowałam szukać w google poradnika na ten temat jednak wszystkie dotyczą "starych" blogspotów.

    Gdyby jednak okazało się, że ja coś pomieszałam zamieszczam screena tego html.
    http://zapodaj.net/e6178a29f732d.png.html

    OdpowiedzUsuń
    Odpowiedzi
    1. To jest nowy "super" layout HTMLowy bloggera. Nic, tylko się pociąć.
      U mnie kod jest zachowany i działa. Jeśli nie chcesz babrać się w tym "świetnym" layoucie, to spróbuj wrzucić ten kod "#navbar" w Szablon > dostosuj > zaawansowane > dodaj arkusz CSS.

      Usuń
    2. A mi nadal nie działa :( Czy moglibyście zrobić jakąś instrukcję na ten nowy HTML?
      Byłabym bardzo wdzięczna :)

      Usuń
  6. Świetna instrukcja, już skorzystałam i dziękuję :3

    OdpowiedzUsuń
  7. nie działało na html, ale w css'ie tak, dziekuje! ♥

    OdpowiedzUsuń

szukaj