Modyfikacje #6 - Pager bloga

(c)graphicstrue

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"! ;>