facebooktwitteryoutube
in Design - 10 Lut, 2013
by admin - no comments
Jak zrobić zakładki w pasku bocznym bloga i dlaczego warto

Czy masz czasem wrazenie, że twój pasek boczny ciągnie się w nieskończoność? Mnie to dopadło! Najnowsze wpisy, ostatnie artykułu, kategorie wpisów i odnośniki do zalogowania umieszczone w panelu bocznym nabrały wyraźnych cech złośliwego tasiemca.

Mogłem odrobaczyć pasek boczny (wyrzucić niepotrzebne elementy), rozbić panel na dwie kolumny albo umieścić treść boczną w zakładkach. Zdecydowałem się na zakładki. Niestety pierwsza próba przy użyciu DOMTab według opisu Pro Blog Design poszła całkowicie nie tak. Ale, jak to mówią “Do dwóch razy sztuka”.

Dlaczego zakładki

 

Powodów dla których spośród trzech mozliwości wybrałem zakładki jest kilka:

  1. Przy podziale na dwie kolumny musiałbym przerobić szatę bloga (Po raz kolejny? – Nie, dziękuję!).
  2. Byłem zdania, że nie mam co wyrzucić z paska bocznego (No dobrze, coś zawsze można wyrzucić, ale bez przesadyzmu.)
  3. Potrzebowałem nieco miejsca na ewentualne reklamy w panelu bocznym. (Tym razem na pewno się uda)
  4. Umieściłem ankietę trochę wyżej w pasku bocznym nie przesuwając ją przed inne elementy. (PS. Zagłosuj w nowej ankiecie.)

Instalacja

Przejdźmy do sedna sprawy…

Przygotowanie

  1. Pobierz plik tabber.zip ze strony tabber. Rozpakuj go w dowolnym katalogu na dysku. Pojawia się kilka plików HTML, CSS i JS.
  2. Umieść plik tabber-minimized.js w katalogu szaty graficznej na serwerze. (lub w wybranym innym miejscu)
  3. Skopiuj zawartość example.css do pliku CSS używanej szaty graficznej. (plik jest bardzo dobrze opisany, więc przyjrzyj się fragmentom zaczynającym się od znaków /* )
  4. W nagłówku strony bloga, czyli gdzieś między znacznikami <head> i</head> umieść następujący kod:

<script type=”text/javascript” src=”[ścieżkaDoKataloguZplikiemJs]/tabber-minimized.js”></script>

(do tego zazwyczaj trzeba edytować plik HTML lub PHP który zawiera fragment kodu odpowiadający za nagłówek, w WordPress jest to header.php)

A teraz same zakładki

  1. W miejscu gdzie chcesz by pojawiły się zakładki do pliku HTML lub PHP wpisz:

    <div class=”tabber”>
    </div>

  2. Aby dodać pierwszą zakładkę wpisz:

    <div class=”tabber”><div class=”tabbertab” title=”Pierwsza zakładka”>
    Treść pierwszej zakładki.
    </div>

    </div>

  3. Aby dodać kolejną zakładkę wpisz:

    <div class=”tabber”><div class=”tabbertab” title=”Pierwsza zakładka”>
    Treść pierwszej zakładki.
    </div>

    <div class=”tabbertab” title=”Kolejna zakładka”>
    Treść kolejnej zakładki zakładki.
    </div>

    </div>

Dodatkowe informacje

  1. Fragment title=”[…]“ odpowiada za wyświetlaną nazwę zakładki, więc jeśli jedna z nich ma mieć tytuł Kocham poniedziałki 😉 fragment kodu bęzie wyglądał tak:

    <div class=”tabbertab” title=”Kocham poniedziałki ;)”>

  2. Wszystkie zakładki tabbertab muszą znajdować się wewnątrz pojemnika na zakładki tabber (widać na przykładach wyżej).

Gotowe!

Chyba nie było aż takie trudne? Pierwsza wersja zakładek gotowa. Modyfikacji i zmian wyglądu dokonujemy we fragmencie pliku CSS który przenieśliśmy z plikuexample.css.

Houston, mamy problem

 

Powinienieś dość łatwo móc dostosować wpis do potrzeb swojej platformy blogowej lub strony internetowej, ale zawsze może się zdarzyć, że coś pójdzie nie tak. Niżej znajdziesz odpowiedzi na najczęściej spotykane pytania (jeśli nie znajdziesz odpowiedzi niżej wystarczy zadać pytanie w komentarzu do tego wpisu).

  1. U siebie na blogu nie mam możliwości umieszczania plików, co teraz?
    Plik tabber-minimized.js można wgrać na dowolny serwer (darmowy hosting itp.), pamiętaj tylko by zgadzała się ścieżka dostępu (czytaj: adres pliku w pkt.4 akapitu “Przygotowanie”).
  2. Kod wycięty z przykładów nie działa, co teraz?
    Jak już zauważył Eon, w podanych przykładach naleźy zamienić “okrągłe” cudzysłowy na cudzysłowy zwykłe. Problem wynikł z tego, że WordPress standardowo wszystkie znaki przerabia na nieszkodliwe, a cudzysłów zwykły jest jednym z tych znaków.

Spodobały Ci się zakładki? A może jednak wolisz pasek boczny w dwóch kolumnach?