5# Spis treści w poście [instrukcja]

Cześć wszystkim!

Wiecie, że 17 lutego mamy Dzień Kota? Wszystkim kociakom z okazji tego święta życzę wszystkiego dobrego!
Dzisiaj pokażę Wam sposób na uporządkowanie treści w Waszym poście. Czytelnik będzie mógł dzięki jednemu kliknięciu przenieść się do interesującej go części posta. To coś bez wątpienia użytecznego dla osób, które lubią się rozpisać, a przy tym zachować estetykę na blogu. ;)
Działanie wspomnianego przeze mnie sposobu znajdziecie w przygotowanej specjalnie na tą okazję podstronie. Swoją drogą - zachęcam do jej lektury. Pogrzebałam trochę w sieci i przygotowałam dla Was ciekawostki na temat kotów!

DEMO

W poście, w którym chcemy osiągnąć powyższy efekt obok przycisku Nowy post znajduje się taki z napisem HTML - to w nim będziemy działać.
Zaczniemy od stworzenia spisu treści.

<ul>
<li><a href="#jeden">Pierwsza część posta</a></li>
<li><a href="#dwa">Druga część posta</a></li>
<li><a href="#trzy">Trzecia część posta</a></li>
<li><a href="#cztery">Czwarta część posta</a></li>
</ul>

Kolejny krokiem jest stworzenie divów o id, które na liście znajdują się w sekcji oznaczonej oznaczona pogrubieniem. ;) Tekst podkreślony zmieniamy stosownie do tytułu danej części posta do której będą nas odsyłać powyższe odnośniki.

<div id="jeden">
Przykładowy tekst pierwszej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae.
</div>
<div id="dwa">
Przykładowy tekst drugiej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae.
</div>
<div id="trzy">
Przykładowy tekst trzeciej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae. In maximus efficitur convallis.
</div>
<div id="cztery">
Przykładowy tekst czwartej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae. In maximus efficitur convallis. Etiam accumsan facilisis tortor sit amet posuere. Praesent aliquam libero nec erat cursus congue.
</div>

Teraz po kliknięciu w liście na odnośnik "Pierwsza część posta" zostaniemy przekierowani do części posta o id "jeden". Analogicznie dzieje się z kolejnymi pozycjami.

Trick dość prosty, ale równocześnie ciekawy i pożyteczny. Mam nadzieję, że Wam się przyda! ^^