Jak utworzyć spis treści posta w bloggerze?

Jak w bloggerze zrobić spis treści posta, który po kliknięciu będzie odsyłał do konkretnych sekcji danego posta? Takie pytanie pojawiło się niedawno na grupie Ładny blog jest w zasięgu ręki, a dziś pokażę Ci jak to zrobić. To wcale nie jest trudne!

Sama z takiego spisu treści czasem korzystam. Użyłam go m.in. w poście o kosmetykach Lily Lolo. Na potrzeby tego wpisu zrobiłam przykładowy spis treści na demo motywu Georgina → zobacz przykładowy spis treści na bloggerze.

Spis treści to nic innego jak lista linków, z jedną tylko różnicą. Nie będą nas odsyłać do stron zewnętrznych, a konkretnego fragmentu naszego posta. Pokażę Wam jak to zrobić w starej i nowej wersji bloggera. Pamiętajcie, że z końcem lipca starsza wersja bloggera nie będzie już dostępna!

Radzę, by spisem treści zająć się na samym końcu, gdy cały post jest już gotowy do publikacji (możesz też oczywiście dodać taki spis do już istniejącego posta).

Wyodrębniamy sekcje

Najważniejsza rzecz to wyodrębnienie sekcji, do których nasz spis treści ma odsyłać. Każdej z tych sekcji musimy nadać nazwę - ID.  W moim przykładzie nadałam sekcjom takie same nazwy jak tytuły w spisie treści, czyli "wypunktowania", "naglowki", "cytaty". Nic jednak nie stoi na przeszkodzie by ID było inne niż tytuł w spisie. Ba, jeśli tytuł jest długi to nawet wskazane jest, by ID było jakimś krótkim wyrazem.

Zrobienie takiego spisu w starszej wersji bloggera wymaga niestety edycji posta w widoku html, ale wierzę, że każdy i tak da sobie z tym radę. Nowa wersja daje nam możliwość nazwania sekcji bez ingerencji w kod (ale dany element będzie automatycznie wyświetlany jako link).

→ Starsza i nowsza wersja bloggera (instrukcja nr 1)

Jeśli jesteś gotowa, przełącz post na widok HTML - (w starszej wersji wybierz button z napisem "HTML", w nowsze wybierz ikonkę < >).

Jeśli masz jakiekolwiek obawy przy wprowadzaniu zmian w widoku HTML skopiuj wszystko co w nim widzisz i zapisz sobie to w notatniku - gdy wprowadzone przez Ciebie zmiany "popsują" wygląd posta, po prostu podmień wszystko na zapisany przez siebie wcześniej kod.

Odszukaj teraz w widoku html fragment, który będzie oddzielną sekcją i tuż przed nim wklej:

<div id="wypunktowania"></div>

Zamiast "wypunktowania" wpisz własną nazwę sekcji.
Dokładnie tak samo postępuj z każdą kolejną sekcją, czyli tuż przed nią dodaj kolejny div, z nowym, unikalnym ID.

→ Nowa wersja bloggera (instrukcja nr 2)

Nowa wersja bloggera daje możliwość ustawienia "kotwicy" (elementu, który będzie wskazywał nam sekcję) bez wchodzenia w kod HTML. Różnica jest taka. że kotwica będzie automatycznie linkiem. Oczywiście jeśli masz ochotę, to możesz skorzystać z instrukcji podanej wyżej, gdzie spis treści będzie odsyłam do divów.

U W A G A

Niestety w najnowszej wersji bloggera funkcja ta została usunięta, co mnie bardzo smuci.
Jeśli też liczycie na powrót możliwości dodawania kotwic możecie zgłaszać uwagi do bloggera.
Im więcej zgłoszeń, tym większa szansa, że ta opcja wróci.
Jak zgłaszać uwagi odnośnie bloggera?
Po zalogowaniu się na blogger.com kliknij ikonkę znaku zapytania w prawym, górnym rogu (obok avatara), a następnie wybierz "Prześlij opinię".

Co zrobić, by dodać kotwicę? Wystarczy zaznaczyć wybrany element będący początkiem naszej sekcji i z paska narzędziowego wybrać ikonkę linku. Teraz wybieramy "utwórz lub edytuj kotwicę" - w miejscu "nazwa" wpisujemy nazwę naszej sekcji.  Automatycznie do naszego linku zostanie dodane ID, a my nie musimy wprowadzać samodzielnie żadnych zmian w kodzie.

Żeby zobaczyć różnicę między tymi dwiema metodami zajrzyj na demo. W umieszczonym tam spisie treści punkt 1 i 3 odsyłają do divów (instrukcja nr 1), a punkt 2 do kotwicy (instrukcja nr 2).
Ja korzystam z pierwszej metody - także dlatego, że nowa wersja edycji posta na razie mi nie leży, a przesuwanie w niej zdjęć jest strasznie męczące. Przypominam jednak, że z końcem lipca starsza wersja bloggera nie będzie już dostępna!

Linkujemy spis treści

Czas na drugą część tutorialu. Mamy już wyodrębnione sekcje, możemy więc przejść do uruchomienia spisu treści. Poszczególne podpunkty musimy teraz odesłać do wcześniej utworzonych sekcji.

→ Starsza wersja bloggera

W starszej wersji bloggera z paska narzędziowego wybieramy "dodaj link" i dodajemy odesłanie do naszej sekcji. Konstrukcja odnośnika jest bardzo prosta - wystarczy do linku naszego posta dodać nazwę konkretnej sekcji (ID) poprzedzoną # (hashem). Każdy podpunkt linkujesz do konkretnej sekcji. Trzeba tylko pamiętać o jednym - nazwa w linku musi być identyczna z ID sekcji.

Przykładowo mój link wyglądał tak:

https://karografia-georgina.blogspot.com/2019/05/adny-blog-na-bloggerze-to-mozliwe.html#wypunktowania

→ Nowsza wersja bloggera

Nowsza wersja bloggera pozwala na dodanie odesłania do naszej kotwicy pomijając link do samego posta. Przyznaję, to jest o wiele wygodniejsze. Wystarczy z paska narzędziowego wybrać ikonkę linkowania i "Utwórz lub edytuj URL", a następnie w miejscu linka dodać nazwę naszej sekcji poprzedzoną # (haszem) - w moim przypadku to #naglowki.

Spis treści prawie gotowy!

Na tym etapie można zakończyć tworzenie naszego spisu treści, ale jeśli w Twoim motywie menu blokuje się przy przewijaniu strony prawdopodobnie się pojawił mały problem - spis treści będzie odsyłał do sekcji, ale nie do jej początku, bo część będzie zasłonięta przez menu. 

Jest na to rozwiązanie, które dodatkowo sprawi, że strona będzie się płynnie przesuwać do wybranego fragmentu.

Wystarczy, że wejdziesz w kod HTML motywu (w starszej wersji Motyw - Edytuj kod HTML, w nowszej Motyw - trzy kropeczki - Edytuj kod HTML) i przed /body wkleisz ten skrypt:

<script>
jQuery($ =&gt; {
const speed = 1000;
$(&#39;a[href*=&quot;#&quot;]&#39;)
.filter((i, a) =&gt; a.getAttribute(&#39;href&#39;).startsWith(&#39;#&#39;) || a.href.startsWith(`${location.href}#`))
.unbind(&#39;click.smoothScroll&#39;)
.bind(&#39;click.smoothScroll&#39;, event =&gt; {
const targetId = event.currentTarget.getAttribute(&#39;href&#39;).split(&#39;#&#39;)[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
event.preventDefault();
$(&#39;html, body&#39;).animate({ scrollTop: $(targetElement).offset().top - 100}, speed);
}
});
});
</script>

top - 100  - możesz zmieniać tą wartość, ustawiając w ten sposób sekcję w odpowiednim miejscu po przesunięciu strony (jeśli nie masz blokującego się menu wpisz tam 0)

Jak szybko wyszukać /body w kodzie? 

Kliknij myszką gdzieś na kodzie i wciśnij skrót klawiszowy ctrl+f. Pojawi się okienko wyszukiwania. Wpisz tam /body i kliknij enter. Znalezione miejsca podświetlą się na żółto.

GOTOWE!

Proste? Mam nadzieję, że tak. A jeśli jednak masz jakiś problem to śmiało pisz.
I pamiętaj - nie ma głupich pytań!

Mam nadzieję, że ten wpis okazał się pomocny.
Jeśli znasz kogoś komu ten wpis może się przydać, podeślij mu link do Karografii!