Wstęp

Witam na blogu xnstrukcje. Blog stworzony został z zamiarem pomocy początkującym szabloniarzom. Instrukcje piszę sama, czasami podaje linki do innych potrzebnych stron. Główne posty dotyczą w szczególności CSSa i podstawowego HTMLu.
!!ważna ankieta!!

Popularne posty

Aktualności

Nowe instrukcje:
- Animacja, czyli @keyframes
- Level up #2
- Tworzenie szablonów - cz. 3

AKTUALIZACJA: 10.06.2019

15.09.2018

Modyfikacje #6 - Pager bloga


Witam was ponownie! Dziś przedstawiam wam instrukcję na pager bloga, który będzie znajdowała się z boku. Przykład macie w niektórych moich szablonach, ale żebyście nie musieli szukać dam was przykład z jednego z najnowszych szablonów → klik. Tak więc bez zbędnego gadania, zabierzmy się do pracy ;> Jeszcze zanim przejdziecie do notki, proszę zajrzyjcie do zakładki Propozycje i napiszcie jakie instrukcje chcielibyście zobaczyć ;)
Omówimy i przeanalizujemy poniższy przykład na żywo:
Więc jak widzicie pager bloga znajduje się w lewym dolnym rogu naszego "bloga". Instrukcja jest bardzo prosta. Są tu tylko dwa punkty, więc od razu do nich przejdźmy.

1. Najpierw ustalamy wygląd linków pagera bloga, żeby mieć to za sobą i się tym nie przejmować.
.blog-pager a {
  text-transform: uppercase;
  font-size: 6pt;
  letter-spacing: 1px;
  text-decoration: none !important;
  font-family: arial;
  color: #BF360C;
  padding: 2px;
  display: block;
  background: #F57C00;
  margin: 2px 0;
  width: 100px;
  text-align: center;
  transition: all .50s;
-o-transition: all .50s;
-webkit-transition: all .50s;
-moz-transition: all .50s;
}

.blog-pager a:hover {
  color: #F57C00;
  background: #BF360C;
  transition: all .50s;
-o-transition: all .50s;
-webkit-transition: all .50s;
-moz-transition: all .50s;
}

Tak więc wygląda kod, który napisałam dla linków przed i po najechaniu na nie kursorem. Nie ma tu co dużo omawiać, ponieważ jest to podobny kod, który napiszecie np. do menu, listy linków itp.

2. To tutaj mamy to co nas interesuje i jest bardzo proste.
#blog-pager {
  position: fixed; /*pozycja nieruchoma*/
  bottom: 5px;
  left: 5px;
  background: #FFB74D; /*tło stopki*/
  padding: 4px;
}
To jest cała magia! Ten króciutki kod, sprawia, że nasz pager bloga pojawia się w dolnym lewym rogu. Jeśli chcecie, aby pager znajdował się w prawym dolnym rogu to left zmieniacie na right, aby pager był u góry bloga bottom zmieniacie na top. Tyle magii co do nieruchomego pagera bloga.

Jeśli macie jakieś pytania piszcie w komentarzach lub w zakładce "Pytania"! ;>

1 komentarz:

  1. Nie moge sie doczekac wiecej intrukcji ♥
    Pamietam jak sama kiedyś bawiłam się w takie coś, miło powspominać i nauczyć się czegoś na nowo :D

    OdpowiedzUsuń

scroll to top