Zakładki blogowe czyli inaczej Blogroll na boksie noszą co najmniej trzy nazwy. Ja najczęściej używam określenia zakładki mimo iż może być nieco mylące (dopóki nie zaczęłam prowadzić bloga na blox.pl zakładkami były dla mnie tylko te które dodaje się w przeglądarce). Taką właśnie etykietę ma ten bloksowy element i z przyzwyczajenia najczęściej używam określenia zakładki. Od strony edycji bloga natomiast element ten określany jest słowem linki (choć ta część ma w head strony tytuł Zakładki) i dla mnie jako laika takie określenie chyba najbardziej wydawało się oczywiste. To są po prostu linki w bocznej szpalcie. Trzecie słowo to ulubione. Prowadząc bloga na blox.pl możesz innego bloga tej platformy łatwo dodać do zakładek korzystając z linku dodaj do ulubionych umieszczonego na dole bocznej szpalty.
zakładki = blogroll = linki = ulubione
Gdzie dodaje się zakładki
Po zalogowaniu się na konto bloksowe należy wybrać bloga, który chce się edytować, czyli tym razem dodać zakładki. O ile klikniesz słowo edytuj to edycja bloga otworzy Ci się na stronie z wszystkimi wpisami. Należy wtedy przejść do części zatytułowanej LINKI
edycja blogu -> WPISY -> LINKI
Otworzy się wtedy strona, na której można zrobić wszystko co dotyczy dodawania linków do blogowych zakładek. Zacznijmy od oczywistości dla zupełnie zielonych.
Nasze wybrane odnośniki możemy posegregować w dowolną liczbę folderów. Dysponując sporym zasobem linków warto to zrobić, kryterium może być temat, poziom lubienia czy cokolwiek innego co wam przyjdzie na myśl. Najważniejsze aby to zrobić gdyż dzięki temu czytelnikom będzie łatwiej znaleźć wybrany link (bądź zwrócić na niego uwagę).
Nie ma natomiast możliwości ominięcia dodania choćby jednego folderu. Po przejściu do edycji zakładek, jeżeli nic jeszcze nie dodawano konieczne jest dodanie pierwszego polderu aby móc dodawać linki.
W polu Nowy folder: wpisz więc nazwę folderu, przykładowo na początek Ulubione blogi, kliknij dodaj i gotowe. Pierwszy folder zakładek właśnie został dodany na blogu.
Pod wierszem dodawania folderu pojawiło się nowe pole zawierające nazwę właśnie dodanego folderu. Moim zdaniem dla kogoś zupełnie nie zaznajomionego z internetem i komputerami ten fragment jest mniej intuicyjny. No bo co teraz zrobić aby dodać w folderze zakładki? Jak kliknie się edytuj to wracamy do samej nazwy etykiety a nie do dodawania nowych linków.
Nazwa naszego nowego folderu jest jasnoniebieska i wygląda jak linki na stronie edycji bloga, klikamy więc w nią a rozwinie nam się nowe menu.
W polu Nazwa: wpisujemy to co pojawi się następnie na blogu: nazwę naszego linku czyli słowo linkujące. Wpisać możemy dowolny tekst, zaczynając od dużej albo małej litery, liczby czy znaku specjalnego. Byłabym ostrożna z ostrymi nawiasami ale poza tym nie widzę problemów.
W folderze na blogu linki będą układać się alfabetycznie właśnie wg tego co teraz tu wpiszesz. O ile w szablonie nie zostanie to opisane inaczej (a może) to nazwy linków zostaną wyświetlone z dużej litery.
W drugim polu, zatytułowanym Adres: wpisujemy docelowy adres linku. Jeżeli jest to link do strony internetowej to zaczynał się będzie od protokołu http:// - ten fragment jest niezbędny, wpisując adres należy o nim pamiętać. Przeglądarki coraz więcej rzeczy robią za nas więc możliwe, że protokół http będzie niewidoczny na pasku adresu ale póki co tu jest niezbędny.
HTTP nie należy mylić z www (a www z Internetem). W dużym uproszczeniu W3 to sieć powiązanych ze sobą informacji, jedna z usług dostępnych w Internecie. HTTP to protokół komunikacyjny służący do wywoływania stron. Dlatego nie wystarczy wpisać www.blox.pl takie coś nie zadziała.
Na koniec klikamy dodaj link i gotowe. Pierwszy link pojawił się w folderze. Następne możemy dodawać tak samo. Jeżeli potrzeba dodać kolejny folder to też robi się to tak samo jak dodając pierwszy folder.
Jeżeli coś chce się zmienić w już istniejącym zapisie to klikamy po prostu edytuj i istniejący folder czy link zamienia się ponownie w okno edycji.
Układanie zakładek w kolejności
Zakładki w wąskiej szpalcie ułożone są automatycznie w kolejności alfabetycznej. Kolejność alfabetyczna jest jedną z najbardziej absurdalnych form uporządkowywania listy. Musisz bardzo precyzyjnie wiedzieć czego szukasz aby to znaleźć. Dlatego może warto poukładać własne zakładki.
Najprostszym sposobem jest oczywiście ponumerowanie ich. Zarówno foldery jak i pojedyncze linki w zakładkach ponumerowane będą wyświetlały się w pożądanej kolejności. Należy tylko pamiętać, że elementy układane są według alfabetycznej kolejności znaków czyli 17 będzie wcześniej niż 8. Dlatego też przy liczbach pojedynczych lepiej dodać zero na początku, bo 08 na pewno będzie wcześniej niż 17.
Nie każdemu odpowiada numerowanie własnych linków. Oczywiście bardziej estetyczną metodą będzie takie nazywanie linków i folderów aby kolejność alfabetyczna była zgodna z kolejnością którą życzymy sobie mieć na blogu. Nazwijmy to układanie kolejnością w stylu Aaaaby kupić.
Im więcej spacji umieścisz przed nazwą linku lub foldera zakładek tym wyżej ona zostanie wyświetlona.
Alfabetyczną kolejność znaków możemy wykorzystać do własnych celów bez konieczności numerowania linków czy układania skomplikowanych etykiet. Wystarczy wykorzystać spację. Może to być w zasadzie dowolny znak ale także znaki specjalne mają przypisaną kolejność dodatkowo jeżeli nie chcemy aby jakikolwiek inny znak poza nazwą się pojawił w etykiecie to najlepszym rozwiązaniem będzie właśnie spacja.
Na ilustracji przedstawiłam kolejność w jakiej ułożyły się zakładki gdy dodałam przed nazwą różne znaki. Najistotniejsze z tego wszystkiego jest jedno: zkładka która poprzedziłam spacją jest wyświetlona jako pierwsza. Spacji nie widać ale kolejność widocznie została zmieniona.
Na końcu ilustracji są dwie zakładki, które wyglądają tak jak ta ze spacją ale są jej pozbawione. Wyświetlają się wiec w kolejności alfabetycznej przy czym ta napisana z dużej litery jest wcześniej.
Lewy Alt + 255 - biały znak
Eskey (sgk) na blogu experymenty informatyczne radzi aby zamiast spacji wstawiać kod lewy Alt + 255 wprowadzany z klawiatury numerycznej. Nawet jeżeli blox zacznie ignorować spacje twoje zakładki pozostaną w idealnym porządku (w podobny sposób możesz uszeregować także kategorie).
Te dwa znaki na pewno umieszczą link na szczycie listy. Im więcej spacji tym wyżej element się pojawi.
Zastosowanie spacji ma dodatkową konsekwencję. Zakładki, które dodajemy w edycji bloga są automatycznie nie tylko szeregowane w listę alfabetyczną ale także automatycznie pierwsza litera etykiety zostaje wyświetlana jako duża (chyba, że szablon będzie zwierał polecenia to zmieniające ale i tak w HTML będzie z dużej litery). Nie jest to wielka uciążliwość ale czasami przyzwyczajeni jesteśmy, że pewne sformułowania widzimy zawsze pisane tylko małymi literami; przykładowo szablonykatemac.blox.pl a nie Szablonykatemac.blox.pl albo dowolny adres mailowy... Wstawiając przed etykietę spację albo biały znak nie tylko zmieniamy ustawienie danego elementu w hierarchii ale także zapobiegamy automatycznej zmianie pierwszej litery w dużą (co wcale nie oznacza, że samemu nie możemy użyć dużej litery na początku - to rozwiązanie zapewnia nam wybór).
Obrazki w zakładkach
Na pierwszy rzut oka edycja bloksa pozwala jedynie na dodawanie w zakładkach linków tekstowych. Nic bardziej mylnego choć linki w postaci obrazków wymagają więcej zachodu i ostrożności. Zacznijmy od ostrożności. Dodanie linku to jedna rzecz jego edycja to inna sprawa. Należy pamiętać, że przy próbie edycji uprzednio dodanego kodu grafiki zapewne stracimy go (zostaną jakieś resztki, które mogą co nieco utrudniać) dlatego zawsze lepiej skopiować go sobie zanim zaczniemy próbować go zmieniać. Taka natura tego myku na bloksowe ograniczenia i trzeba o tym pamiętać aby nie było potem zdziwienia. Ostrzeżeni możemy przystąpić do pracy.
Aby dodać w zakładkach link w postaci obrazu należy w miejscu na nazwę wkleić kod HTML ilustracji podczas gdy pole na adres wypełniamy już w tradycyjny sposób wpisując adres odwołania.
Kod HTML, czyli w tym przypadku znacznik ilustracji zawsze umieszczamy w ostrych nawiasach. Większość znaczników w XHTML (w jakim napisany jest blox) koniecznie wymaga znacznika zamykającego do pary. Jednym z wyjątków od tej reguły są znaczniki ilustracji, które występują pojedynczo a swoistym rodzajem zamknięcia jest ukośnik tuż przed ostrym nawiasem zamykającym.
Znacznik ilustracji to img, atrybut jej adresu podajemy za src (jak source) w znakach cudzysłowu (może być pojedynczy, istotne jest aby taki sam był na początku jak na końcu). Poza adresem podajemy także tekst alternatywny w razie gdyby ilustracja z jakiś powodów nie mogła być wyświetlona.
<img src="/resource/znaczniki_adresu_ilustracji.png" alt="kod znacznika ilustracji" />
img - znacznik ilustracji (image)
src - atrybut źródła (source) czyli adres obrazka;
- zakładam, że ewentualne grafiki w zakładkach będą pochodzić zasobów bloga dlatego wpisałam skróconą wersję adresu
- jeżeli jest inaczej należy podać pełny adres począwszy od
http://
- adres ilustracji zawsze będzie kończył się na jedno z rozszerzeń przypisanych grafikom; przykładowo będą to:
gif, jpeg, jpg, jpe, png
jeżeli adres kończy się na html to nie jest to adres ilustracji
alt - czyli alternatywa dla obrazu; zdarza się, że przeglądarka nie może wyświetlić grafiki (z różnych powodów czy to przypadkowych czy celowych) w takim przypadku wyświetli tekst alternatywny będący opisem obrazu dlatego ten element jest konieczny- oczywiście można oddać jeszcze inne elementy opisujące znacznik
img ale te dwa powyższe będą tej sytuacji wystarczające
title - czyli tytuł ilustracji, najczęściej wyświetla się jako dymek po najechaniu kursorem na ilustracjęstyle - czyli kod css określający wygląd ilustracji; wpisujemy tu kod css (są to style lokalne) jeżeli chcemy zmienić coś w wyświetlaniu tej ilustracji: wymiary ilustracji, odstępy, kolor tła, ramkę...
Po wstawieniu kodu w pole nazwy resztę wypełniamy tak jak poprzednio. Wpisujemy adres linku i klikamy Dodaj link. Ilustracja od razu pojawi się na liście w formie graficznej. Jeżeli jednak zaistnieje potrzeba edycji to radzę stary link usunąć i dodać go zupełnie na nowo. Po kliknięciu edytuj obrazek zniknie a z kodu zostają resztki, które utrudnią edycję.
Można oczywiście dodać zarówno ilustrację jak i tekst. Wystarczy, że tekst zostanie wpisany w polu nazwy poza ostrymi nawiasami. Przypilnuj tylko aby żaden z elementów kodu ilustracji nie zniknął, wszystkie nawiasy ostre, cudzysłowy, znaki równości, spacje... wszystko ma być na swoim miejscu.
Link kontaktowy
Specjalnym rodzajem linku jest tzw. mailto. Oczywiście swój mailowy adres kontaktowy możesz wpisać po prostu jako nazwę folderu. Nie każdy folder musi posiadać zawartość. Wystarczy nazwę poprzedzić spacją aby nie wyświetlała się z dużej litery i po sprawie, adres mailowy jest widoczny na blogu.
Link do kontaktu można umieścić jednak nieco inaczej, tak aby działał jako odnośnik do programu pocztowego użytkownika. Po kliknięciu otwierać się będzie albo ustawiony program pocztowy albo okno wyboru programu pocztowego.
Aby dodać link mailto wybieramy folder w którym mam być on dostępny. W polu nazwa wpisujemy frazę która będzie linkowała, polecam najoczywistsze rozwiązania:
- napisz do mnie
- adres mailowy
- kontakt
- szablonykatemac@gmail.com (twój adres mailowy)
Następnie w polu na adres wpisujemy zamiast protokołu http polecenie mailto a po dwukropku adres pod który te maile mają zostać wysłane. Żadne spacji pomiędzy. Czyli w przypadku maila do mnie w polu adres wpisuję:
mailto:szablonykatemac@gmail.com
Zwijanie zakładek
O tym, że zakładki można zwinąć wspomniałam już wyżej. Jest to bardzo proste ale nie całkiem automatyczne. Zakładki możemy zwinąć dzięki czarom dwóch magików:
- eskey: Dynamicznie zwijane zakładki
- s.z.y.m.o.n: Zaczaruj swoje zakładki
O ile w przypadku archiwum polecam skrypt Szymona o tyle tym razem zdecydowałam się na wykorzystanie pomysłu eskey'a. Jest bardziej automatyczny bo nie wymaga zbudowania listy zakładek na nowo. Pomysł Szymona jest bardzo prosty i daje bardzo duże możliwości ale wymaga minimalnej choćby znajomości HTML. Skrypt eskey'a zwija istniejące na blogu zakładki, pozwala też zdecydować o kilku nie zwiniętych zakładkach na początku.
Czy można zwinąć zakładki bez skryptu? Podejrzewam, że tak. Biorąc pod uwagę jak skomplikowanymi selektorami można operować podejrzewam, że w określonych warunkach można i zakładki w szablonie na starym kodzie zwinąć tylko przy użyciu szablonu. Wydaje mi się, że wymagałoby to nieco bardziej skomplikowanych działań, niewartych zachodu w obliczu doskonale działającego skryptu eskey'a.
O tym jak u mnie działa skrypt Eskey'a pisałam w notce: Dynamicznie zwijane zakładki według Eskey’a
Zakładki na stronie z pojedynczą notką
Ponownie będą potrzebne pomysły panów Szymona i Eskey'a. W obu przypadkach ich rozwiązania nie tylko zwijają zakładki ale także dodają je na stronach z pojedynczymi notkami.
Rozwiązanie Szymona sugeruje przeniesienie linków z zakładek do pola a kod HTML. Oznacza to, że po napisaniu odpowiedniego kodu i wklejeniu go w polu na dodatki nasze zakładki od razu będą się wyświetlały na stronie z pojedyncza notką. To czy je potem zwiniemy szablonem czy nie to zupełnie inna sprawa.
Rozwiązanie Eskey'a zostawia zakładki na swoim miejscu w edycji bloga, jednak początkowo w żaden sposób nie wpływa na wyświetlanie się ich na stronie z pojedynczymi notkami. Dopiero wykonanie drugiego kroku: załadowanie do zasobów bloga pliku spowoduje wyświetlanie się zakładek także na stronach z pojedynczymi notkami.
UWAGA dwie rzeczy, bo trochę czasu już upłynęło
- korzystając z drugiej wersji skryptu eskey'a nie trzeba definiować dodatkowego divu przed skryptem
- linku do generowania odpowiedniego kodu nie ma już przy dodawaniu zakładek ale nadal działa; wspomniana na forum zmienna część adresu to numer blogu widoczny na pasku adresu zawsze gdy piszesz notkę, to te pierwsze cyfry
O tym skąd u mnie zakładki na stronie z pojedynczą notką pisałam we wpisie: Twoje zakładki na stronie z komentarzami
Czy jest coś jeszcze co chciałbyś zrobić z zakładkami? Nie wiesz jak coś w nich dodać? O ich wyglądzie napiszę innym razem ale może masz jakieś pytania albo życzenia?
Wpisy na podobne tematy
