13 października 2012

Przepis na menu/szeroką listę

Ci, którzy zabawili na onetowych blogach nieco dłużej, nie będą mieli problemu z rozszyfrowaniem nazwy "szeroka lista". Wytłumaczę więc to dla innych :)
Szeroka lista, znana także jako menu, to tabelka ze strzałeczką po boku. Jeśli klikniemy strzałeczkę, pokażą nam się tytuły naszych postów, a jeżeli naciśniemy ów tytuł, przeniesie nas on do odpowiedniego postu. Przypomina to w pewnym stopniu Archiwum, ale różnica polega na tym, że wyświetlają się tytuły wszystkich postów i nie ma napisu np. "wrz (5)" (co oznacza, że we wrześniu opublikowano pięć notek - zatem, jeżeli klikniemy w to, będziemy mieć pięć postów wyświetlonych na jednej stronie, a przewijanie bloga może zająć trochę czasu). Szeroka lista umożliwi nam szybkie znalezienie interesującego nas posta, nie będziemy błądzić w nieskończoność.
Taka lista jest tutaj na blogu, pod postem. Po kliknięciu strzałki, wyświetlą nam się wszystkie posty.
UWAGA: minus listy jest taki, iż linki do postów dodajemy "ręcznie". Na szczęście, nie zajmuje to zbyt wiele czasu.
Co trzeba zrobić?
1. Panel nawigacyjny -> Układ.
2. Decydujemy, w której kolumnie będzie nasza lista. W tej kolumnie dodajemy gadżet HTML/JavaScript.
3. Wklejamy tam kod:

<form><select style="width: 400px" onchange="window.open(this.options[this.selectedIndex].value,'_self')"
size=1 name=menu>

<option />NAZWA
<!-- change the links with your own -->
<option value="http://#####" />TYTUŁ NOTKI
<option value="http://#####2" />TYTUŁ NOTKI2
</select></form>


4. Tutaj objaśnię troszkę jak to działa. Widzicie w tym kodzie fragmencik "width: 400px" ?
Width odpowiada za szerokość całego paseczka. Ja wpisałam 400 px, jeśli Wam psuje to wygląd bloga (np. ustawiacie menu w bocznej kolumnie i 400 px to o wiele za dużo), pokombinujcie z innymi wartościami (tylko nie wpisujcie minusowych xD).
Następnie wytłuściłam słowo "NAZWA". Tutaj wpiszcie sobie, co chcecie, aby się wyświetliło. U mnie wyświetla się - Spis treści -, możecie sobie wpisać np. Archiwum, Menu, Spis postów, Spis notek, Historia itp. Jedynym ograniczeniem jest Wasza wyobraźnia x)
Później zaznaczyłam http://##### oraz Tytuł notki. Tutaj troszkę poklikamy. Wchodzimy na naszego bloga (w widok "gotowy" czy jak to określić... W taki widok, jaki widzą Wasi czytelnicy), a najlepiej to w post, którego chcecie zalinkować w menu. Prawym przyciskiem myszy klikamy na tytuł tego postu i wybieramy "Kopiuj adres odnośnika". Następnie zaznaczamy napis http://#####, klikamy prawym przyciskiem myszy i dajemy "Wklej" (lub zaznaczamy napis http://##### i wciskamy kombinację klawiszy Ctrl i V).
Pojawia nam się link. w kodzie. Zamieniamy napis TYTUŁ NOTKI na tytuł posta, którego link skopiowaliśmy.
U mnie wygląda to tak:

<option value="http://zaczarowane-instrukcje.blogspot.com/2012/09/marginesy-i-widgetid-czyli.html" />01. Marginesy i widgetId, czyli pozycjonowanie pojedynczego gadżetu

Akurat dałam Wam kod, gdzie jest pokazane jak wkleić linki do drugiej notki. Oczywiście, jeśli macie taki kaprys, możecie pozmieniać kolejność postów. Np. najpierw będą się wyświetlać nowe, a później stare posty. Po prostu zróbcie tak, żeby było wam wygodnie.

UWAGA: przy wklejaniu linków uważajcie, aby nie skasować cudzysłowu z kodu :) Inaczej nic nie będzie działać.

Jeśli chcecie dodać link do kolejnego postu, doklejacie fragment
<option value="http://#####3" />TYTUŁ NOTKI3

nad kod </select></form>
czyli będzie to wyglądało tak:

<!-- change the links with your own -->
<option value="http://#####" />TYTUŁ NOTKI
<option value="http://#####2" />TYTUŁ NOTKI2
<option value="http://#####3" />TYTUŁ NOTKI3
 </select></form>

5. Dajemy "Zapisz".
6. Jeśli położenie listy w wybranej kolumnie się nam nie podoba, postępujemy wg instrukcji "Marginesy i widgetID, czyli pozycjonowanie pojedynczego gadżetu".

Problem? Pytanie? Post a comment ;d

15 komentarzy:

  1. Mocno przydatny ten blog, obiecuję o nim pamiętać. :)

    (Zlodziej-Mysli - nowy post)

    OdpowiedzUsuń
  2. jesteś boska. dzięki za radę :D

    OdpowiedzUsuń
  3. Dzięki, bardzo przydatne :))

    OdpowiedzUsuń
  4. Lepiej zamiast "400px" wpisać "100%", wtedy automatycznie szerokość listy dostosuje się do układu szerokości bloga.

    OdpowiedzUsuń
  5. chyba jestem najbardziej niekumatą czytelniczką bo coś mi nie wychodzi

    OdpowiedzUsuń
    Odpowiedzi
    1. Daj mi tutaj swój kod, który wpisujesz i nie działa, to spróbuję go poprawić ^^
      A jeśli masz problem z ogólnym tworzeniem tego, to daj linki do notek, powstawiam je w odpowiednie miejsce i wklepię nazwę.

      Usuń
  6. Bardzo pomocne i proste ^ ^ Zajęło mi to może 10 minut, czekam na więcej ciekawych instrukcji :D

    OdpowiedzUsuń
  7. Nawet ja to zrozumiałam, jesteś wielka! <3
    Dziękuję bardzo za pomoc. ;)

    OdpowiedzUsuń
  8. Wspaniałe, dziękuję Ci za tą notkę!

    OdpowiedzUsuń
  9. Boże dziewczyno, kocham Cię !
    Dzięki twoim przydatnym instrukcjom, powoli pojmuję świat HTML , CSS.
    K - O - C - H - A - M . <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Alee... Szeroka lista nie działa mi z blokadą kopiowania. :< No trudno. :)

      Usuń
  10. Jupiii. ^-^ Udało się. :) Jesteś świetna! :* Dzięki!

    OdpowiedzUsuń
  11. Hej, super instrukcja, a wiecie, jak zmienić kolor szerokiej listy?

    OdpowiedzUsuń

szukaj