Jak zrobić numerowany pager bloga

09.08.2016


Każdy zna tradycyjny pager Bloggera, ale czemu mamy się ograniczać tylko do tych napisów "strona główna/ starsze posty/ nowsze posty"? Przecież można go jakoś urozmaicić. O jednym takim urozmaiceniu pisałam we wpisie, jak zamienić pager bloga na grafikę, teraz przyszedł czas na numerowany pager bloga, a możemy to osiągnąć w dwóch krokach. Za pomocą HTML i CSS. 


Wersja pierwotna




HTML


Przechodzimy do szablon - edytuj kod HTML - klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl+f/cmd+f  i wyszukujemy </body>. NAD </body> wklejamy kod:


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Poprzednia&#39;;
var downPageWord =&#39;Następna&#39;;
</script>
<script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
Analiza kodu: 

Nazwa strony (poprzedni wpis) 
Nazwa strony (następny wpis) 

CSS


Teraz wyszukujemy ]]></b:skin> i NAD wklejamy kod: 

#blog-pager {background: transparent;}
.showpageOf {
display: none;
}
.showpageNum a {
background: #ea9999;
padding: 3px;
margin-right: 3px;
font-weight: bold;
}
.showpage a {
background: #e06666;
padding: 3px;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float:  center;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
background: #d5a6bd;
color: #fff;
font-weight: bold;
float: center;
font-size: 15px;
padding: 3px;
margin-right: 3px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Analiza kodu: 

#blog-pager {background: transparent;}
.showpageOf {
display: none;
}
.showpageNum a {
background: #ea9999;
padding: 3px;
margin-right: 3px;
font-weight: bold;
}
.showpage a {
background: #e06666;
padding: 3px;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: center;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
background: #d5a6bd;
color: #fff;
font-weight: bold;
float: center;
font-size: 15px;
padding: 3px;
margin-right: 3px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Tło nieaktywnych przycisków z numerami 
Wewnętrzne marginesy przycisków z numerami 
Prawy margines przycisków z numerami 
Pogrubienie cyfr
Tło przycisków następny/poprzedni
Wewnętrzne marginesy przycisków następny/poprzedni
Pogrubienie przycisków następny/poprzedni
Wielkość cyfr i przycisku następna/poprzednia strona
Kolor cyfr i przycisków 
Margines wewnętrzny lewy przycisków
Margines wewnętrzny prawy przycisków
Tło aktywnego przycisku (pierwszego) 
Kolor cyfry aktywnego przycisku
Pogrubienie cyfry aktywnego przycisku
Wielkość cyfry aktywnego przycisku
Wewnętrzne marginesy aktywnego przycisku 
Prawy margines aktywnego przycisku 
Wewnętrzny lewy margines aktywnego przycisku 
Wewnętrzny prawy margines aktywnego przycisku 

Wszystkie pogrubione i kolorowe wartości są zmienne.

Efekt: 


20 komentarzy:

  1. To działa tylko na głównej, czy też w etykietach?

    OdpowiedzUsuń
  2. Czytam większość wpisów i czasem udoskonalam coś u siebie. Raczej nie komentuję, ale chyba wreszcie pora się ujawnić i podziękować za tyle przydatnej wiedzy :)

    OdpowiedzUsuń
  3. Nie ma za co i cieszę się, że moje instrukcje Ci pomagają :)

    OdpowiedzUsuń
  4. Zrobiłam wszystko według instrukcji i na stronie głównej wcale mi się pager nie pojawia. Dlaczego?

    OdpowiedzUsuń
  5. Masz ustawiony blog jako publiczny? Jeśli nie, to gadżet nie będzie się pojawiał.

    OdpowiedzUsuń
  6. Po zmianach wygląda o niebo lepiej :)
    Pozdrawiam serdecznie!

    OdpowiedzUsuń
  7. Naprawdę potrafisz wyczarować cuda na tym blogspocie, ja nie mogłam tego ogarnąć :) Z resztą jak zobaczyłam, że na wordpressie wszystko rozwiązują wtyczki to mi się odechciało samodzielnie kombinować. Chociaż teraz trochę tęsknię za css, to była fajna zabawa :)

    OdpowiedzUsuń
  8. Dlatego tak bardzo go lubię - zawsze da się coś pokombinować, chociaż nie ukrywam, że wtyczki byłyby wielkim ułatwieniem :D

    OdpowiedzUsuń
  9. U mnie niestety także nie działa, a blog mam od zawsze jako publiczny. Szkoda, bo estetycznie te przyciski się prezentują.

    OdpowiedzUsuń
  10. Jest prawidłowo uzupełniony kod? Bo jeśli w pierwszej części nie ustawimy liczby takiej samej jak liczna wpisów wyświetlanych na stronie głównej to nie zadziała.

    OdpowiedzUsuń
  11. W tej sekcji?
    var pageCount=6;

    var displayPageNum=6;

    Jeśli w tej to ustawiłam i nic nie dało. :(

    OdpowiedzUsuń
  12. Tak w tej, a szablon jest Bloggerowy czy pobrany?

    OdpowiedzUsuń
  13. To wygląda tak, jakby coś blokowało nam ten gadżet, jakieś pozostałości po poprzednim szablonie etc.

    OdpowiedzUsuń
  14. Właśnie od początku mam jeden, ten prosty szablon bloggera. Gadżet z usunięciem strony głównej także nie działał. Reszta chodzi. :) Najwyraźniej bez tego musi się obejść.. Tak czy inaczej dziękuję za pomoc! :)

    OdpowiedzUsuń
  15. W takim razie musisz robić coś źle. Usunięcie strony głównej z bloga to nic innego jak usunięcie już istniejącego kodu, to nie jest kod zewnętrzny, więc prawdopodobnie usuwasz nie cały kod. Gdzieś ten fragment jeszcze jest. Bym musiała sama zobaczyć szablon, u mnie wszystko działa bez problemu :)

    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

Copyright © Szablon wykonany przez Blonparia