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
Zdjęcie: Stephanie Booth
Powodów dla których spośród trzech mozliwości wybrałem zakładki jest kilka:
- Przy podziale na dwie kolumny musiałbym przerobić szatę bloga (Po raz kolejny? – Nie, dziękuję!).
- Byłem zdania, że nie mam co wyrzucić z paska bocznego (No dobrze, coś zawsze można wyrzucić, ale bez przesadyzmu.)
- Potrzebowałem nieco miejsca na ewentualne reklamy w panelu bocznym. (Tym razem na pewno się uda)
- 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
- Pobierz plik tabber.zip ze strony tabber. Rozpakuj go w dowolnym katalogu na dysku. Pojawia się kilka plików HTML, CSS i JS.
- Umieść plik tabber-minimized.js w katalogu szaty graficznej na serwerze. (lub w wybranym innym miejscu)
- 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 /* )
- 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
- W miejscu gdzie chcesz by pojawiły się zakładki do pliku HTML lub PHP wpisz:
<div class=”tabber”>
</div> - Aby dodać pierwszą zakładkę wpisz:
<div class=”tabber”>
<div class=”tabbertab” title=”Pierwsza zakładka”>
Treść pierwszej zakładki.
</div>
</div> - 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
- 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 ;)”>
- 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 pliku example.css.
Houston, mamy problem
Zdjęcie: sidehike
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).
- 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”). - 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?
- Dodaj
kanał rss
do swojego czytnika - Skorzystaj z
adresu trackback - Prenumeruj
kanał komentarzy
Kommentarze: 46 »
Mnie się podobają, miałem Cię nawet podpytać, jak to zrobiłeś. :)
To nie byłbyś pierwszy, poza tym, teraz już wiesz :) Kurcze, musiałem Cię ze spamu wyciągać :(
Ciekawy wpis. Na kilku stronach też mam dość długie paski boczne i teraz widzę, że zakładki bardzo by się przydały. Chociaż można je wykorzystać nie tylko w pasku bocznym, ale także w treści np. na stronie głównej.
Dziękuję. U mnie zakładki się sprawdziły. Właśnie na stronie tabbera wzięli treść strony głównej w zakładki, moim zdanie troche dziwne, ale to chyba tylko dlatego, że rzadko spotykane. Możliwości ograniczone wyłącznie inwencją ;)
Niektóre tematy mają „swoje” wsparcie. Np. ten używamy na moim prywatnym blogu: http://gurthg.killer.mud.pl/
Dilecto (jak zresztą wszystkie tego samego twórcy) jest bardzo przyjemny i przede wszystki dopracowany, a te zakładki to dodatkowy smaczek do świetnego designu. A jak ktoś sam robił i aż tyle nie umie musi sobie dać radę jakoś inaczej ;)
U mnie niestety nie działa :( Postąpiłem wg instrukcji itd. ale treść zakładek jest widoczna od razu, i w dodatku w 3 kolumnie, nie 2. Za dużo css chyba już u mnie jest ;)
Treść zakładek będzie widoczna dopóki strona nie załaduje sie do końca. Można to wyłączyć, ale takie jest podstawowe zachowanie skryptu żeby obsłużyć czytających którzy mają wyłaczony JS. A odnośnie kolumn to prawdopodobnie umieściłeś kod w innym miejscu niż chciałeś. Jeśli używasz widgetów to kod do wstawiania paneli powinieneś wpisać w panelu widgetów. Jeśli nie używasz widgetów, to kod powinien znaleźć się w pliku l_sidebar.php wewnątrz {div id=”l_sidebar”} [...] {/div} ale poza obrębem {ul id=”l_sidebarwidgeted”} [...] {/ul}. (podmieniłem nawiasy w kodzie html)
Więcej takich wpisów poproszę :)
Przy wrzucaniu zakładek na stronę, która aktualnie tworzę miałem podobny chyba problem co Tomek. Zamiast zakładek pojawiły mi się tylko wszystkie teksty z każdej z zakładki, jeden pod drugim. Instalacja jest tak prosta i tak dokładnie napisana, że nie można było zrobić błędu. Zacząłem już się zastanawiać nad wielkimi problemami, które mogły u mnie wystąpić. Na szczęście w porę mnie olśniło. Skopiowałem divy ze strony – aby nie zrobić literówki i nie musieć później męczyć się i zastanawiać dlaczego nie działa. Cały problem w tym, że edytor, którego ożywam skopiowany znak ” uznał za inny niż znak cudzysłowia. Poprawiłem wklepując z klawiatury i działa.
Dziękuję za tą notkę z której może skorzystać nie tylko blogowiec.
Nie wiem czy więcej wpisów o zakładkach ma sens ;) Dziękuję. Dopiszę problem do listy rozwiązań, bo to rzeczywiście można przeoczyć.
ŁOŁ racja, zamiast ” miałem również coś innego :/ Ale niestety, również bardzo dokładnie wdrożyłem to u siebie. W dokładnych miejscach, odświeżony cache .css itd. itp. ale brak zakładek a widoczna treść :(
A może masz adblocka albo coś podobnego. Na blogu w każdym razie nie widzę.
Wyjątkowo u siebie na blogu niczego nie blokuję :) Nie widać bo jak tylko zauważyłem to del, krzaczyło układ.
Dobra, może tak, zrób pojemnik z jedną zakładką testową (treść jakaś błacha i krótka). Zobacz czy działa.
Jeśli nie to przejdź do: http://www.barelyfitz.com/projects/tabber/ > Advanced > Deactivate onLoad i zobacz czy to coś zmienia.
Dzisiaj powalcze :) Z jedna zakladka rowniez nie dziala, wiec zostaje metoda ze strony.
Mam pytanie, dlaczego u Ciebie w instrukcji dajesz tylko odwolanie do tabber-minimized.js a nie również i tabber.js?
Nie podałem info o tabber.js, bo według autora róznica żadna, a plik jest mniejszy o 10kB. Noże zmiana pliku coś pomoże, ja zwyczajnie zmieniłem nazwę tabber-minimized na tabber, bo nie chciałem tak długiej nazwy pliku. :)
Bardzo ciekawy wpis, przy zmianie szaty bloga (która już daaaawno powinna być)na pewno się zastosuje :)
Dziękuję, i powodzenia przy zmianie. Niech szata twoja lekka i szybka w zmianie będzie :)
Piękne to to, ale tam gdzie tego potrzebuję te skrypty nie działają. Bu!
Opisz problem, może da się go rozwiązać. :)
Dwie rzeczy mnie irytują z którymi nie mogę sobie poradzić.
Przy większej ilości zakładek, zakładki schodzą linijkę niżej tak, że widać jedne pod drugimi. Jednak dzieje się tak tylko w przypadku gdy w tytule zakładki jest spacja wtedy dzieli jeden z przycisków na pół na dwie linijki. Gdy tytuły są jednowyrazowe wszystkie zakładki pojawiają się w jednej linii rozszerzając stronę. Ustawiłem już te zakładki zamiast w rzędzie to w kolumnie, ale tego, aby przechodziła cala zakładka gdy skończy sie obszar jej wyznaczony nie udaje mi się zrobić.
No i jak już pojawiają się jedne pod drugimi to nakładają się częściowo jedne na drugie. Zrobiłem juz wszelkie kombinacje marginesowo – wielkościowe, ale zwiększyć odstepu miedzy nakładającymi się zakładkami nie udało mi się ustawić.
Pomożecie?
Po części rozwiązaniem problemu zbyt wielkiej ilości zakładek może być ich zagęszczenie. Zakładka, która zawiera w sobie kolejnych kilka zakładek.
Pomożemy, tylko zapodaj gdzie.
Na tej stronie próbuję wszczepić te zakładki.
http://wilki.org/wilki/historia_redoran.php
Padding nie będzie działał, ale jeśli ustawisz np. line-height: 150% dla pojemnika z zakładkami powinno ruszyć.
:) Pomogło. Dziękuję.
Rozszerzyło też tekst, ale to można naprawić stosując line-height do tekstu.
Pozostaje jeszcze bardzo nieestetyczne „cięcie” zakładki w pół.
Możesz potraktować linki za pomocą „display:block” albo nadać elementom li określoną szerokość np. „width:150px”, wtedy problem powinien zniknąć, ale bardziej przekonany jestem do „display:block” choć on pewnie bedzie wymagał ustawienia „float:left” żeby zakładki pojawiały się jedna obok drugiej zamiast jedna nad drugą. Piszę z głowy, ale jeden z tych dwóch sposobów powinien zadziałać.
Zadziałało. Dziękuję.
Cieszę się :) Mógłbyś jeszcze dodać opis, kim lub czym są wilki, bo ze strony to nie wynika (ale to raczej dla znawców, więc nie wiem czy jest sens).
Zasadniczo strona nie jest skierowana do ogółu internetu, ale do osób grających w grę cyrodiil.pl. MMORG oparty na realiach The Elder Scrolls. Wilki są jednym z grających tam klanów.
A ja przy okazii tworząc dla klanu siedzibę jednocześnie uczę się tworzyć strony :).
Powodzenia przy jednym i przy drugim (tzn. przy tworzeniu strony klanu i w samej grze :) i dziękuję za informacje, na szczęście nie musiałem korzystać ze słownika wyrazów nieczęsto spotykanych ;)
Wrócę do tematu zakładek. Konkretnie do pierwszej, którą masz u siebie na blogu – „popularne”. Zastanawiam się czy nie lepiej byłoby to zastąpić na przykład tematami z ostatnim komentarzem. Wydaje mi się, że teraz popularne wpisy są popularne dlatego, że są popularne. Czyli ktoś kto wchodzi na bloga klika w najczęściej odwiedzane wpisy, aby zobaczyć o czym jest blog i w ten sposób podbija się statystyka – takie samonakręcanie. W przypadku gdyby wyświetlane byłyby tam wpisy z ostatnim komentarzem to nawet w przypadku braku nowego wpisu coś by się na blogu mogło dziać, a to skłaniałoby odwiedzających do: 1. wejścia i zobaczenia nowego komentarza. 2. ewentualnej polemiki. Czyli interakcja użytkowników się zwiększa co powoduje częstsze wchodzenie, w końcu uzależnienie, a to przekłada się na wzrost popularności.
Kolejne spostrzeżenie. Mimo, że jest możliwość logowania, to nie wiem co to daje. Po za avatarkiem 40×35 pikseli. Myślę, że zakładka „logowanie” pomieściłaby 2-3 zdania na temat co zyska, a co straci gość w przypadku rejestracji.
Przemyślenia człowieka siedzącego o 1:35 w pracy. Proszę o niebicie.
Jesli o 1:35 masz takie pomysły to boje się spytać co powiesz o 13:00. Świetne uwagi, dziękuję!
o 13-ej odsypiam nockę w robocie :P
@Eon – posty bywają popularne również dlatego, że trafiają do nich ludzie z wyszukiwarek. :)
Zakladki tutaj mi sie podobaja, ale tez czasem ich brak pomaga. Jesli piszemy dlugie wpisy, tracimy szanse na klikniecie uzytkownika do dalszej czesci serwisu juz po pierwszym scrollowaniu strony. Wazne jest wg mnie, by uzytkownikowi podsunac jakis pomysl na dalsza nawigacje zaraz po przeczytaniu artykulu.
Do tego dochodzi mozliwosc, ze JS sie nie zaladuje / bedzie wylaczony…
Jeśli JS będzie wyłączony zakładki ułożone są jak zwykle, jedna pod drugą.
W zależności od długości wpisów kiedyś każdy pasek boczny się kończy, a u mnie ma być jeszcze więcej informacji, więc już na poczatku wolałem zwiekszyć miejsce na owe „dodatkowe informacje”.
Pomysł na dalszą nawigację po przeczytaniu wpisu każdy rozwiązuje we własnym zakresie, pasek boczny może buyć tu pomocny, ale imo istnieją lepsze sposoby.
Bardzo przyjemne i praktyczne rozwiązanie, sam chyba skorzystam z tego patentu :)
A które z opcje wrzucisz do zakładek? PS. Twój ostatni wpis z obudowami po prostu zmiata z nóg :).
Jeszcze dokładnie nie wiem jak to rozwiąże, jako że chce layout zrobić porządnie od nowa, bo to co jest teraz to tymczasówka :) kolumny zostaną w tym podziale co są teraz, co najwyżej sie ich szerokość zmieni (lewa węższa, prawa szersza), a potrzebuje nieco więcej miejsca jako ze chce kilka niestandardowych rzeczy zamieścić.
Tak, obudowy są ekstra, sam już kombinuje co ze swoją zrobić :)
Jak będzie gotowe to daj znać mailem albo komentarzem. Chętnie zobaczę :)
Nie omieszkam sie pochwalić :)
[...] Zaoszczędziłem dzięki nim sporo miejsca. O samych zakładkach dowiedziałem się z wpisu pt. Jak zrobić zakładki w pasku bocznym bloga i dlaczego warto. Dodam jeszcze, że to nie jest wtyczka dedykowana pod WordPress – zakładek można używać na [...]
Genialne rozwiązanie. Dodatkowo osoby, które mają wyłączoną obsługę JavaScirptu, nadal mają możliwość normalnego przeglądania menu – po prostu menu jest wyświetlane w div’ach. :)
Gratuluję pomysłu.
Pomysł nie mój ale dziękuję. Uzytkowników, którzy mają wyłaczony JS jest co prawda ok. 2% ogółu, ale zawsze lepiej 2% więcej niż mniej. Również dziękuję za przypomnienie, żeby popracować nad wyglądem div’ów w stanie surowym ;).
W sprawie zakładki do logowania na tej stronie. Sprawdziłem pod IE – działa, pod Operą – działa. Niestety już pod Firefoxem 2.0 zakładka „logowanie” jest pusta.
Dziekuję, że zwróciłeś na to uwagę. :) Zapisuję na liście do zrobienia.