Jak zmienić pager bloga na ikonki font awesome

10.07.2017


Jakiś czas temu na blogu pojawił się wpis jak zrobić pager bloga z ikonkami font awesome. W tym wpisie pokaże Wam jak zamienić pager bloga na ikonki font awesome - bez strona główna, starsze i nowsze wpisy, dzięki czemu uzyskamy minimalistyczny wygląd naszego pagera. Instrukcja jest prosta, ale niestety nie polubią jej osoby, które od "grzebania" w kodzie HTML uciekają. Instrukcja opiera się właśnie na "grzebaniu" w kodzie HTML.

Jak zrobić pager bloga z ikonkami font awesome

UWAGA! PRZED ROZPOCZĘCIEM JAKICHKOLWIEK ZMIAN NALEŻY ZROBIĆ KOPIĘ ZAPASOWĄ SZABLONU!

Jeśli nie macie u siebie na stronie ikonek font awesom to nad <head> musicie wkleić:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Przechodzimy do motyw - edytuj kod HTML
2. Zacznijmy od przycisku strona główna. Klikamy kursorem w pole z kodem i wybieramy na klawiaturze ctrl+f. Pokażę nam się okno wyszukiwania, w które wpisujemy: <data:homeMsg/>
Klikamy enter dwa razy, ponieważ interesuje nas druga sekcja odpowiadająca za pager.
















3. Fragment kodu, który jest zaznaczony na poniższym zdjęciu na czerwono usuwamy, a w jego miejsce wklejamy: <i class="fa fa-home" aria-hidden="true"></i> jeśli chcemy dodać rozmiar naszej ikonki to wklejamy taki kod: <i aria-hidden='true' class='fa fa-home fa-2x'/> - 2 można zmienić na dowolną liczbę.
















4. Zmieniamy starsze posty. Powtarzamy krok 2, ale tym razem wyszukujemy: <data:olderPageTitle/>. Następnie powtarzamy krok 3. Usuwamy <data:olderPageTitle/> a w jego miejsce wklejamy <i class="fa fa-chevron-right" aria-hidden="true"></i> lub <i aria-hidden='true' class='fa fa-chevron-right fa-2x'/>

5. Zmieniamy nowsze posty. Powtarzamy krok 2, wyszukując <data:newerPageTitle/>. Następnie powtarzamy krok 3 czyli w tym wypadku usuwamy <data:newerPageTitle/> a w jego miejsce wklejamy <i class="fa fa-chevron-left" aria-hidden='true'></i> lub <i aria-hidden='true' class='fa fa-chevron-left fa-2x'>


Efekt: 



20 komentarzy:

  1. Ale mi spadłaś z nieba tego szukałam już od jakiegoś czasu. Dzięki Tobie będę miała pięknego bloga.

    OdpowiedzUsuń
  2. Jak zmienić kolor fontu? Można do tego dołożyć pager z numeracją stron taką jak pokazywałaś kiedyś na blogu?

    OdpowiedzUsuń
  3. Kolor to kolor linków jakie ustawiamy na blogu. Nie da się wrzucić dwóch pagerów, bo też nie ma takiej potrzeby, a zarówno ten oraz pager numeracyjny działają na bazie jednego i tego samego ;)

    OdpowiedzUsuń
  4. A tak odchodząc od tematu czy jest jakiś kod, na linki (odnośniki) żeby linki były tylko wytłuszczone w tekście. A nie na zasadzie zmiany koloru. Tak mnie to drażni na moim blogu.

    OdpowiedzUsuń
  5. Chyba sama sobie odpowiem na pytanie, przy tworzeniu posta można je wytłuszczać. :)

    OdpowiedzUsuń
  6. W zakładce z instrukcjami w kategorii posty jest instrukcja na to jak wyróżnić linki

    OdpowiedzUsuń
  7. Zainstalowałam fajnie ten pager wygląda. Wybrałam pierwszą wersję, bez powiększania ikonek. Dziękuję.

    OdpowiedzUsuń
  8. Warto zajrzeć na stronę w3schools, w3c lub na https://developer.mozilla.org/en-US/docs/Learn. Masz tam dużo informacji tego co ciebie interesuje, czyli css. Mam nadzieję, że też pomogłem 🙂

    OdpowiedzUsuń
  9. Na Bloggerze się to średnio sprawdza ;) Jest to dobre w momencie stawiania swojej strony

    OdpowiedzUsuń
  10. Czyli blogger nie jest w pełni zgodny ze standardem html? Niegrzeczny google 😉 średnio czyli czasami może coś ignorować?

    OdpowiedzUsuń
  11. Dokładnie tak, z tego co kiedyś czytałam Blogger stoi na starszej wersji HTMLa, ostatnio miał aktualizacje, więc możliwe, że już jest na nowszej (muszę sprawdzić) dlatego też instrukcje na Bloggera działają tylko na nim, po mimo tego, że Blogger i własna strona składają się z takie samego "szkieletu" czyli etc. Kiedyś Próbowałam u znajomego rozpisać CSS na sekcje sidebar (na jego własnej postawionej stronie) - część zadziałało, a część kompletnie nie. Inna sprawa ma się jeśli szablon na Bloggerze rozpiszemy od A do Z bez bazowania na szablonie Simple, wtedy wszelkiego rodzaje instrukcje na CSSa i HTMLa, które są kierowane do tworzenia własnej strony powinny bez problemu zadziałać ;)

    OdpowiedzUsuń
  12. Przyda się na pewno nie jednej osobie ;)

    OdpowiedzUsuń
  13. Trochę to dziwne. Youtube jest na html5 przestawiony w pełni od conajmniej roku a blogger może jeszcze nie ... Google się nie popisał, nie? 😉 Ok. Daj znać jak już sprawdzić 🙂 wolę mieć porządek, czyli wszystko w head i body (oprócz oczywiście css i niektórych js ;) ) i nic poza nimi.

    OdpowiedzUsuń
  14. Cześć 🙋 sprawdziłaś? Mi się wydaje, że korzysta z HTML5 i xml lub jest to xhtml.

    OdpowiedzUsuń
  15. Teoretycznie jest, że HTML5, ale i tak ogólne instrukcje nie wszystkie działają - sprawdziłam. Za to działają w momencie kiedy nie bazuje się na Bloggerowych szablonach, a rozpisuje się je od początku czyli rozpisujemy tylko etc. i dalej odpowiednio wszystko uzupełniamy.

    OdpowiedzUsuń
  16. Czyli bardziej ala html5 niż HTML5 😉 widocznie google nie może się zdecydować czy zachować xml czy się go pozbyć 😉 bo pewnie to powoduje takie problemy. Jak dla mnie to wygląda to jakby chciało iść za standardem, ale równocześnie iść swoją drogą.

    OdpowiedzUsuń
  17. Dlatego napisałam, że teoretycznie HTML5 :)
    Wiadomo, standardy muszą być zachowane - jakby nie były to by blogi Bloggera nie były widoczne, albo źle widoczne, ale mimo wszystko nadal zostają przy swoim :)

    OdpowiedzUsuń
  18. Wiem 😉 bardziej ironicznie napisałem. Youtube jest napisany zgodnie z zasadami html5, a blogger częściowo tylko.

    OdpowiedzUsuń
  19. A ja mam pytanie z innej beczki... Jak przenieść etykiety z dołu posta na górę? Tak, żeby były np. pod tytułem?

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona