Jak zrobić graficzny pager bloga czyli zastępujemy strona główna/nowsze, starsze wpisy grafiką

poniedziałek, 8 lutego 2016

Wszyscy dobrze wiemy jak wygląda pager bloggera przed modyfikacją. Jest on bardzo tradycyjny i niczym nie zachwyca. Jednak można go zmienić i dodać mu tego czegoś na parę sposobów np. za pomocą font awesome lub możemy pobawić się trochę dłużej i zmienić w pager numeryczny (kiedyś o tym wspomnę). Dzisiaj chce Wam przedstawić jeden z tych sposobów, które pozwolą nam w prosty sposób odmienić nasz pager bloga. Będziemy zamieniać tradycyjny pager na graficzny.

1. Zrób kopię zapasową szablonu, ponieważ będziemy pracowali na kodzie HTML i istnieje ryzyko, że coś nam nie wyjdzie. Kopia pozwoli nam na wgranie ponownie nieuszkodzonego szablonu. Szablon - utwórz/przywróć kopię zapasową - pobierz pełny szablon.

2. Wybieramy szablon - edytuj kod HTML 
3. Klikamy kursorem obojętnie w jakie miejsce w kodzie i wybieramy ctrl + f lub cmd + f (Mac). Powinno pojawić nam się takie okienko:

4. Wyszukujemy <div class='blog-pager' id='blog-pager'> . W kodzie są dwa takie elementy, interesuje nas drugi, czyli musimy enter kliknąć dwa razy. Pod wyszukanym fragmentem pojawi nam się taka część kodu:

5. Teraz, musimy przygotować sobie grafiki, które będą widniały na naszym pagerze bloga i przesłać je na Tinypic lub Photobucket, aby uzyskać link do grafiki.
6. Teraz będziemy podmieniać kod, na link z ikonkami.

Przykład: 

<data:newerPageTitle/> - nowsze posty. Usuwamy tą część kodu, a zamiast niej wstawiamy: <img src="LINK OBRAZKA" />

Wszystko ma wyglądać tak:

Zapisujemy szablon. Efekt końcowy:

Na koniec mam dla Was 4 zestawy przycisków do pagera, które są do pobrania za darmo.

Pobierz zestaw 1 | Pobierz zestaw 2 | Pobierz zestaw 3 | Pobierz zestaw 4 

Grafiki są mojego autorstwa, więc proszę o pobieranie ich na użytek własny i o nieudostępnianie im osobom 3. Jeśli chcecie podać dalej dane grafiki, to proszę o odsyłanie osób 3 do tego wpisu.

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