Jak zrobić pager bloga z ikonkami Font Awesome - Blogger

13.02.2017


Chodzi mi tutaj o taki efekt:


Nie jest to trudne do zrobienia, nie trzeba się bawić w HTMLu - wystarczy nam do tego CSS, a jeśli ominął Cię pierwszy wpis o Font Awesome, to zapraszam Cię do na niego właśnie teraz. Tam pokrótce opowiadam o zasadzie działania, gdzie znajdziesz ikonki i jak zrobić za pomocą nich gadżet z ikonkami społecznościowymi.

Pierwszy wpis o Font Awesome

1. Przechodzimy do szablon - edytuj kod HTML
2. Nad <head> wklejamy:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Zapisujemy szablon
4. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
5. Wklejamy kod:

#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Analiza kodu:


#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Część odpowiadająca za font - rodzaj, wielkość, grubość 
Kolor linków w pagerze
Kolor linków po najechaniu 
Ikonki z Font Awesome 

Jak wyszukać numerków ikonek Font Awesome?


Przechodzimy na tę stronę - KLIK
Wyszukujemy ikonkę, jaką chcemy użyć


Po wyszukaniu, klikamy na daną ikonkę - przeniesie nas na podstronę. Na dole pod ikonką będziemy mieli numerek.


10 komentarzy:

  1. Nie przepadam za gotowymi kodami css chociaż z pewnością jest to szybszy i łatwiejszy sposób... Jak zawsze masz mnóstwo pomysłów na lepszy wygląd bloga :) Co zaglądam do Ciebie to ciągle coś nowego przykuwa moją uwagę - Oby tak dalej!

    OdpowiedzUsuń
  2. Można samemu rozpisać to fakt, ale podaję tu instrukcje, które tylko opierają się na gotowcach - jakbym tylko tłumaczyła krok po kroku co każdy ma robić bez podawania konkretów, to nikomu by się nie chciało tego robić ;) Większość kodów jakie używamy (nie ważne czy rozbudowane czy nie) to właśnie gotowce, nawet te na wyśrodkowanie danego elementu ;)

    OdpowiedzUsuń
  3. natalia20041989 .13 lutego 2017 21:40

    Zawsze masz mnóstwo pomysłów jak powiększyć lub ułatwić obsługę bloga, podziwiam ☺

    OdpowiedzUsuń
  4. natalia20041989 .13 lutego 2017 21:40

    Mialo byc upiększyć😁

    OdpowiedzUsuń
  5. Jak zwykle wydaje się dość skomplikowane :P Ale dla efektu czasem warto się pomęczyć ;)

    OdpowiedzUsuń
  6. Kochana, a jak to "podnieść" jeśli chciałabym to umieścić zaraz pod postem a nie na samym dole bloga?

    OdpowiedzUsuń
  7. W tej części kodu #blog-pager {
    background: transparent;
    margin:60px 0 0 0;
    text-align:center;
    }

    można się pobawić marginesami lub wykorzystać margin-top. Jednak nie wiem jak ta manipulacja wyjdzie, bo nigdy jej nie robiłam ;)

    OdpowiedzUsuń
  8. jak ukryć te nazwy "Strona główna" etc. bo u Ciebie tego nie ma..

    OdpowiedzUsuń
  9. Bo to jest już całkiem inna zasada działania. Mój pager nie powstał na podstawie instrukcji powyżej. W przypadku pozbycia się strona główna etc. z pagera bloga i zostawienie samych ikonkę już trzeba zmodyfikować kod HTML. Za jakiś czas pojawi się instrukcja i na ten temat.

    OdpowiedzUsuń
  10. zdaje sobie z tego doskonale sprawę ale był to najbliższy możliwy post jaki można było się o to podpytać.. próbowałem po grzebać trochę w tym hml'u, a raczej w xml'u ale to strasznie topornie idzie mi.. :/ :(

    no nic w takim razie czekam na twój wpis na ten temat :)

    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