Inserire numero pagine in blogspot al posto di post più vecchi, più recenti.

Fra le risorse più richieste in blogger c' è quella di poter inserire un sistema numerico di navigazione per il nostro blog dato che di default nei templati blogspot possiamo trovare solo i link Post più vecchio e Post più recente. Per poter navigare nel blog è, in alcuni casi, più semplice inserire i numeri delle pagine per una navigazione tra i post più veloce e facile per gli utenti.

Navigando nel web l' unica soluzione a disposizione per i blogger è la seguente:
1) Per prima cosa dovremo inserire questo codice javascript o, semplicemente andando in Layout, aggiungendo il gadget "Html/javascript" e poi spostandolo sotto al gadget "Post sul blog" inserendo il codice al suo interno, oppure in Modello/Modifica HTML cerchiamo <b:section class=’main’ id=’main’ showaddelement=’no’> , il (’no’) può anche essere (’yes’) a secondo del template e, dopo, il seguente </b:section> inserite il codice:

    <script type='text/javascript'>
    var home_page_url = location.href;
    var pageCount=3;
      var displayPageNum=5;
      var upPageWord ='Precedente';
      var downPageWord ='Successivo';
    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"><a href="/">'+ upPageWord +'</a></span>';
      }else{
      upPageHtml = '<span class="showpage"><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"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
      eFlag++;
      } } }
      if(thisNum>1){
      html = ''+upPageHtml+' '+html +' ';
      }
      html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pagine ('+(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"><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"> <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: #000;" 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;
      } }
    </script>
    <script type='text/javascript'>
    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 && thisUrl.indexOf(".html")==-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>

Ora non ci resta di modificarlo secondo le nostre esigenze, in rosso sono le modiche più comuni che possiamo fare.
- var pageCount=3; è il numero di post che appariranno per pagina
- var displayPageNum=5; è il numero di pagine da mostrare nel layout
- var upPageWord ='Precedente'; var downPageWord ='Successivo'; ovviamente potete cambiare la scritta in rosso come volete
- html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pagine ('+(postNum-1)+')</span>'+html; questo pezzo di codice invece fa apparire Pages (42) se prendiamo come esempio l' immagine iniziale del post o in questo caso apparirà Pagine (42) , Pagine si può modificare in Post, Link o come vogliamo oppure se non vogliamo che appaia eliminarlo completamente.

2) Adesso vedremo il tutto secondo lo stile predefinito del nostro blog e se vogliamo ulteriormente cabiarlo dovremo effettuare delle modifiche css, questo ne è un esempio, in Modifica HTML trova "]]></b:skin>" e subito prima inserire:

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px;}

.showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; }

.showpageNum a {
padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x; }

.showpageNum a:hover {
border:1px solid #888; background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x; }

.showpageOf { margin:0 8px 0 0; }

.showpagePoint {
color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

e il risultato dovrebbe essere all' incirca questo sotto, ma si può modificare il css a nostro piacere per ottenere il risultato più idoneo al layout del nostro template.

3) Purtroppo sarà possibile visualizzare il tutto solo in home page e non Etichetta (categorie) ma è una cosa che è possibile risolvere:
- sempre in Modello / Modifica HTML cercate expr:href='data:label.url' , dovrebbero essere più di uno e sostituitelo con

expr:href='data:label.url + "?&max-results=12"'

sostituite il numero 12 con il numero di post per pagina, lo stesso limite che avete inserito per la home page e vedrete conparire il sistema numerico anche in categoria.

Una parte delle informazioni per relizzare questo post sono state lette su AllBlogTool

1 commento:

Pino Daniele15 gennaio, 2015
grazie dell' aiuto, mi sei stato propio utile essendo un principiante
RispondiElimina
Risposte

Aggiungi commento

Posta un commento

Inserite il vostro nick name se volete una risposta altrimenti non si saprà a chi rispondere. Se inserite link verrà considerato spam e il commento non pubblicato.

Che Vuoi Sapere ?

Inserire numero pagine in blogspot al posto di post più vecchi, più recenti.

1 commento:

Cerca nel blog

Translate

Categorie

Siti Amici

Post più popolari

Lettori fissi