Jak zrobić numerowany pager bloga

wtorek, 9 sierpnia 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: 

Jeśli spodobał Ci się wpis, przekaż go dalej :)