poniedziałek, 13 lutego 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.
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.
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ń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ńZawsze masz mnóstwo pomysłów jak powiększyć lub ułatwić obsługę bloga, podziwiam ☺
OdpowiedzUsuńMialo byc upiększyć😁
OdpowiedzUsuńJak zwykle wydaje się dość skomplikowane :P Ale dla efektu czasem warto się pomęczyć ;)
OdpowiedzUsuńKochana, a jak to "podnieść" jeśli chciałabym to umieścić zaraz pod postem a nie na samym dole bloga?
OdpowiedzUsuńW tej części kodu #blog-pager {
OdpowiedzUsuń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 ;)
jak ukryć te nazwy "Strona główna" etc. bo u Ciebie tego nie ma..
OdpowiedzUsuń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ń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.. :/ :(
OdpowiedzUsuńno nic w takim razie czekam na twój wpis na ten temat :)