poniedziałek, 10 lipca 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.
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:
Ale mi spadłaś z nieba tego szukałam już od jakiegoś czasu. Dzięki Tobie będę miała pięknego bloga.
OdpowiedzUsuńJak zmienić kolor fontu? Można do tego dołożyć pager z numeracją stron taką jak pokazywałaś kiedyś na blogu?
OdpowiedzUsuń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ń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ńChyba sama sobie odpowiem na pytanie, przy tworzeniu posta można je wytłuszczać. :)
OdpowiedzUsuńW zakładce z instrukcjami w kategorii posty jest instrukcja na to jak wyróżnić linki
OdpowiedzUsuńZainstalowałam fajnie ten pager wygląda. Wybrałam pierwszą wersję, bez powiększania ikonek. Dziękuję.
OdpowiedzUsuń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ńNa Bloggerze się to średnio sprawdza ;) Jest to dobre w momencie stawiania swojej strony
OdpowiedzUsuńCzyli blogger nie jest w pełni zgodny ze standardem html? Niegrzeczny google 😉 średnio czyli czasami może coś ignorować?
OdpowiedzUsuń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ńBardzo przydatne. :)
OdpowiedzUsuńPrzyda się na pewno nie jednej osobie ;)
OdpowiedzUsuń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ńCześć 🙋 sprawdziłaś? Mi się wydaje, że korzysta z HTML5 i xml lub jest to xhtml.
OdpowiedzUsuń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ń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ńDlatego napisałam, że teoretycznie HTML5 :)
OdpowiedzUsuń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 :)
Wiem 😉 bardziej ironicznie napisałem. Youtube jest napisany zgodnie z zasadami html5, a blogger częściowo tylko.
OdpowiedzUsuń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ńNie podaje indywidualnych instrukcji
OdpowiedzUsuń