Numeracja stron ( paginacja ) w blogger / blogspot

numeracja stron, paginacja, blogger
Nawigacja strony każdemu bloggerowi przyda się prędzej czy później. Wiadomo, że użytkownikowi Waszego bloga dużo łatwiej będzie się poruszać się po stronie. W tym artykule pokażę jak w prosty sposób dokonać modyfikacji na blogu. Pamiętaj, aby przed modyfikacjami zapisać kopię zapasową bloga.

Jak dodać numerację stron w Blogger ?

1. Zaloguj się na konto Blogger
2. Wejdź w Szablon > Edytuj HTML > Kontynuuj
3. Znajdź poniżej przedstawioną linię kodu w swoim szablonie
    (np. przy użyciu CTRL + F )


]]</b:skin>

Powyżej tego kodu wklejamy styl CSS obsługujący naszą numerację strony. Jeżeli nie odpowiada Ci kolor lub wielkość numerów stron to właśnie tutaj możesz to zmieniać modyfikując odpowiednie linie kodu.


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Następnym krokiem będzie wklejenie skryptu java odpowiedzialnego za wyświetlanie numeracji. Znajdź w kodzie bloga znacznik </body> i nad nim wklej podany poniżej kod.

<!-- Page Navigation start --> 
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #676767;background:#fff;border: 1px solid #b6b5b5;font-size: 15px;padding:4px 8px;margin:0 4px;" class="showpageOf"> Strony '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #999;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>
<!-- PAGE NAVIGATION STOP-->

Jak na pewno zauważyłeś - ten kod można dostosować pod własne potrzeby.
var pageCount=10;
Ten kod odpowiada za liczbę postów jakie mają być wyświetlone na stronie. W tym przypadku będziemy mieli 10 artykułów.
var displayPageNum=3;
Ten kod odpowiada, za wyświetlanie liczb do nawigacji na stronie.

Kody na początku tego skryptu  i  odpowiadają odpowiednie liczbie artykułów, które mają się wyświetlać na stronie i liczbę
Jeżeli nie możesz odnaleźć umieszczonej powyżej linii kodu to szukaj

5. Zachowaj szablon.
Po wykonaniu tych kilku kroków powinna się ukazać paginacja na Twoim blogu.

>

35 komentarzy:

  1. Jasno i zrozumiale :)
    Wielkie dzięki już sobie wstawiłam - super :D
    Dzięki

    OdpowiedzUsuń
  2. Dzięki ;) Użyłam u siebie na blogu :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Super, bardzo dziękuję! Czy można jakoś usunąć napis strony i zostawić samą numerację?

      Usuń
    2. Tak, usuń całą klasę span o nazwie class="showpageOf" i będzie efekt, którego pożądasz.

      Usuń
  3. dzięki!
    strasznie się namęczyłam żeby wstawić numerację stron na swojego bloga, a tutaj było wszystko na tyle jasno wyjaśnione że nawet tępak informatyczny jak ja sobie poradził :)

    OdpowiedzUsuń
  4. hej...a co jesli ktos ma wiecej stron niz 50 ?? czy ten skrypt ma jakies ograniczenie ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Hej, w takim przypadku powinno wyświetlić strony w podobny sposób 53 ... 54 55 56. Skrypt nie ma ograniczeń.

      Usuń
  5. a ja mam takie pytanie, ten skrypt jest bardzo fajny, ale to zliczanie jest tylko do wszystkich postów na blogu, a czy jest skrypt żeby po wejściu na etykietę zamiast na dole mieć linki do "starsze posty" i "nowe posty" mieć właśnie taką numerację ???
    Pozdrawiam

    OdpowiedzUsuń
  6. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  7. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  8. mi też się udało dziękuję, niestety paginacja nie działa w archiwum :( jak to naprawić?

    OdpowiedzUsuń
  9. A można to zrobić na jakiś inny sposób? U mnie nie ma linii kodu ']]'
    Nie mam pojęcia jak mam to zrobić ;<

    OdpowiedzUsuń
    Odpowiedzi
    1. http://www.bloggerbuster.com/2008/08/numbered-page-navigation-for-blogger.html

      Usuń
  10. Chcę mieć numerację stron na blogu.Korzystałam z twojej rady ale nie udaje mi się.Czy jest na to jakiś inny sposób?

    OdpowiedzUsuń
    Odpowiedzi
    1. http://www.bloggerbuster.com/2008/08/numbered-page-navigation-for-blogger.html

      Usuń
  11. Wielkie dzięki za ten sposób. Używałem porad z wielu innych stron i nie działało.
    To działa :-)

    OdpowiedzUsuń
  12. Czy w kodzie istnieje jakieś ograniczenie? Aktualnie wyświetla mi niezmienną (od ilości dodanych już postów) liczbę stron 167, przy założeniu, że wyświetlają mi się 3 notki na stronę, a notek mam około 900. Wygląda na to, że kod ma ograniczenie do 500 postów, zgadza się?

    OdpowiedzUsuń
  13. Hej, świetna sprawa ta numeracja! :) Męczyłam się z "pagerami" a to rozwiązanie jest idealne i działa! Do pełni szczęścia brakuje mi jeszcze drobnej poprawki.

    Czy dałoby się odwrócić numerację? Zamiast od 1 do x potrzebowałabym od x do 1 postu.
    Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ojć i jeszcze coś... wszystko ładnie pięknie działa ale omija mi jeden post... brakuje pomiędzy wyświetlanym [1] a [2] ^^" http://coraz-dziwniej-komiks.blogspot.com

      Usuń
  14. mam nadzieję, że jeszcze działasz :)
    prowadzę bloga od kilku już lat, od samego początku ustawiłam paginację i wszystko było dobrze aż do dziś. Mianowicie wyświetla mi tylko 31 stron z 96, które były jeszcze wczoraj. Te wsześniejsze posty są, można do nich dotrzeć przez archiwum lub tagi, ale przeglądając strona po stronie dochodzi się do pewnego momentu i dalej pusto. Nic nie zmieniałam w kodzie ani w niczym (za mało techniczna na to jestem). Nie wiem, z której strony to ruszyć szczerze mówiąc i co się mogło stać.

    OdpowiedzUsuń
  15. U nas podziałało, dzięki za radę.

    OdpowiedzUsuń
  16. Częstym sposobem pozyskiwania dużej ilości klientów bywa organizowanie odpowiedniej kampanii. W tej kwestii pomoc zapewniają usługi takie, jak reklama Lublin. Jest to mądry wybór.
    reklama lublin

    OdpowiedzUsuń
  17. Fajnie opisany temat, ciekawe treści można znaleźć na Twoim blogu.

    OdpowiedzUsuń
  18. Ja niestety nie znam się na tych kwestiach ale jako, że posiadam własną stronę internetową to chciałem aby wyglądała ona doskonale. Fajnie, że firma https://haiku.com.pl/ zajęła się jej realizacją więc całość wygląda naprawdę świetnie.

    OdpowiedzUsuń
  19. Bardzo przydatny wpis. Miałam z tym problem a teraz już wiem jak to zrobić.

    OdpowiedzUsuń
  20. Wpis zawiera bardzo ciekawe informacje

    OdpowiedzUsuń