Jak zrobić spis wpisów/listę wpisów

środa, 11 marca 2015

Środa, a to oznacza kolejny tutorial. Dzisiejszy wpis będzie poświęcony spisie wpisów lub inaczej lista wpisów, spis treści. Można to uznać za archiwum, jednak nie pojawia nam się data i miesiąc, a tytuły wpisów. Po kliknięciu w ten wpis przenosi nas od razu do niego. Taka opcja bardzo dobrze się sprawdza na blogach poświęconym gotowaniu, recenzjom oraz na blogach rękodzielniczych i urodowych. Mimo wszystko ten post jest kierowany do wszystkich i jeśli ktoś uważa, że u niego się taki spis treści sprawdzi to zapraszam do korzystania z tutorialu.
1. Pierwsze co musimy zrobić to przejść do układ - dodaj gadżet. Szukamy gadżetu HTML/JavaScript. Mój spis wpisów będzie w stopce bloga.

2. Wklejamy kod do naszego gadżetu.

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

<option />nazwa spisu
<!-- change the links with your own -->
<option value="http://#" />Tytuł wpisu
<option value="http://#" />Tytuł wpisu
<option value="http://#" />Tytuł wpisu
</select></form>

Analiza kodu:

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

<option />nazwa spisu
<!-- change the links with your own -->
<option value="http://#" />Tytuł wpisu
<option value="http://#" />Tytuł wpisu
<option value="http://#" />Tytuł wpisu
</select></form>

Szerokość spisu - wartość zmienna. Ja zastosowałam 990px ponieważ chciałam aby spis dopasował się do stopki bloga. Tą wartość możecie zmieniać według własnego uznania. Wiadomo, że jeśli wsadzicie spis treści w kolumnę boczną to nie będzie szerokość 990px ale np. 240px. Musicie sprawdzić jaka wielkość wam odpowiada.
Nazwa spisu - tutaj dodajecie swoją własną nazwę np. spis treści, lista przepisów, cokolwiek.
# - zamiast niego wklejamy link do naszego wpisu
Tytuł wpisu - tutaj wpisujemy tytuł naszego wpisu, który ma się wyświetlać w naszym spisie.

UWAGA! Kolejną sekcje dla wpisu musisz dodać ręcznie, po dodanym ostatnim wpisie, dopisz pod spodem <option value="http://#" />Tytuł wpisu, kiedy skończysz kliknij zapisz.

U mnie to wygląda tak:

Jeśli spodobał Ci się wpis, przekaż go dalej :)