Pubblicato il 15/10/09 - aggiornato il  | 19 commenti :

Come inserire i numeri di pagina per navigare tra i post di un blog su Blogger.

Di default alla fine della Homepage di un blog sulla piattaforma Blogger si possono vedere i  link Post più recenti, Home page e Post più vecchi, attraverso i quali si può navigare vedendo una schermata di un numero di post uguale a quello inserito in Impostazioni > Formattazione > Numero di post per pagina


image

Ovviamente in Homepage ci sarà solo il link Post più vecchi e non saranno visibili gli altri due. A me non dispiace questo metodo di navigazione ma c'è chi preferisce invece la numerazione delle pagine perché più facile da ricordare e più efficace esteticamente.
Per inserire un menù di navigazione con i numeri delle pagine si deve innanzitutto andare su Layout > Aggiungi un gadget e inserire il gadget Etichette nel caso in cui non lo avessimo già fatto. Questo perché potrebbe avere degli effetti antiestetici insieme a questa personalizzazione

etichette



E' la volta di andare su Layout > Modifica HTML e, dopo aver scaricato il modello completo, si deve cercare la riga di codice

]]></b:skin>
e, immediatamente sopra, aggiungere il seguente codice
showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #414141;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #191919;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #414141;
color: #191919;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #003366;
color: #003366;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
dove i colori in notazione esadecimale, alcuni dei quali indicati in rosso, possono ovviamente essere personalizzati a seconda dei colori del blog. Ecco lo screenshot di come inserire il codice
screenshot
Salvate il modello e, senza espandere i modelli widget, cercate una riga di codice simile a questa
<b:section class=’main’ id=’main’ showaddelement=’yes’>
potrebbe esserci il "no" al posto dello "yes". Andate a cercare, subito sotto, l'altra riga </b:section> che chiude la sezione. Immediatamente sotto a quella riga incollateci il seguente 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+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;

  }
  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

}else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  html = ''+upPageHtml+' '+html +' ';
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pagine ('+(postNum-1)+')&lt;/span&gt;'+html;
  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }

}
function showpageCount2(json) {
var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
  thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
  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+'&amp;max-results='+pageCount;

  }
  }
  itemCount++;
  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
  }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;
  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';

  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }

}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
  }

var home_page = &quot;/&quot;;
  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
  document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
  }
  </script>
 
Nelle prime righe di questo codice ci sono i due dati var pageCount=3; e var displayPageNum=5; che rappresentano rispettivamente il numero di post per pagina e il numero di pagine mostrate nel layout e che possono essere personalizzate. Ecco lo screenshot relativo all'inserimento
screenshot_2
Salvate nuovamente il modello.
Ho creato un blog appositamente per questo tipo di personalizzazione per vedere se il codice funzionava. Potete controllarne l'efficacia in Numeri di Pagina per Navigazione.
pagine_navigazione
Questo post è una sintesi di informazioni che ho preso dai seguenti siti: Abu Farhan, TechieBlogger e AllBlogTools.





19 commenti :

  1. Mi scusi, vorrei chiedergli perchè a me non escono i quadratini in cui ci sono i numeri...ma escono i numeri uno attaccato all'altro, perchè? Attendo risposte. Poi il sito di Abu Farhan esce tutto bianco all'improvviso...

    RispondiElimina
  2. @ISHOW
    Ho dato uno sguardo al tuo modello e può essere che questa personalizzazione non sia del tutto compatibile.
    Per quello che riguarda le fonti che ho citato puoi consultare direttamente questo articolo di Abu Farhan. Il codice è simile ma ci sono tre Demo relative a tre diversi modelli di Blogger. Per vedere al meglio il post ti consiglio di non usare Internet Explorer (altrimenti c'è un errore nello script) ma di utilizzare Firefox o Chrome.
    Ciao

    RispondiElimina
  3. Ciao, ieri ho installato questo wighet su 2 miei blog e funzionava, oggi non funziona più, quale potrebbe essere il problema?

    RispondiElimina
  4. Risolto, avevo disattivato i feed, cmq come posso modificare la srcitta "Pages" con Pagine?

    Grazie

    RispondiElimina
  5. @Mauro
    Mi ero dimenticato di tradurre quella parola quando ho tradotto l'hack.
    Adesso ho provveduto e puoi ricopiare il codice nuovamente oppure puoi semplicemente sostituire la parola "Pages" con "Pagine" nella riga
    class="showpageOf"> Pages ('+(postNum-1)+')

    RispondiElimina
  6. Non so perché (e fortunatamente me ne sono accorta) ma "older post" non mi funzionava più. Vai a capire. :S
    Ho sostituito con questo script, moolto meglio con i numeri.
    Grazie Ernesto. ;)

    RispondiElimina
  7. @Marguerite N.
    Se vuoi adattare lo stile a quello del tuo blog, ce ne sono ben sei già predisposti in cui scegliere
    http://www.ideepercomputeredinternet.com/2010/02/inserire-i-numeri-di-pagina-per-la.html

    RispondiElimina
  8. Salve, io ho seguito alla lettera tutti i passaggi e li ho ripetuti due volte per sicurezza, ma in entrambe i tentativi non visualizzo nulla, quale potrebbe essere il motivo? Il mio blog è completo al 100% questa è l'ultima modifica che devo fare, mi dia una mano per favore!

    GRazie mille

    RispondiElimina
  9. @Doshin
    Non c'è motivo, semplicemente lo script trova qualche incompatibilità.
    Prova quest'altro tutorial
    http://www.ideepercomputeredinternet.com/2010/02/inserire-i-numeri-di-pagina-per-la.html
    che è più recente e ha anche più personalizzazioni.

    RispondiElimina
  10. Salve ho effettuato anche le altre operazioni per la personalizzazione ma non vedo ancora nulla. Eventualmente il mio blog non fosse compatibile con questa funzione, succede qualcosa se lascio l html così come l ho modificato adesso o devo rimuovere tutte le stringhe che ho inserito? Grazie mille

    RispondiElimina
  11. @doshin
    E' meglio che togli il codice che hai inserito. Potrebbe rallentare il blog

    RispondiElimina
  12. Ciao! fantastico! ne ho lette tante di guide e non riuscivo.. con questa finalmente sono riuscito! Una cosa sola vorrei chiederti... Se volessi mettere i numeri di pagine anche sopra i post, oltre che sotto, come posso fare? Grazie mille e complimenti! ;-)

    RispondiElimina
    Risposte
    1. @iOSLife
      Questo tutorial è molto complesso e si deve ai tre blogger di cui ho messo i riferimenti a fondo pagina. Onestamente la cosa che mi proponi non è attualmente alla portata delle mie conoscenze.

      Elimina
    2. grazie Ernesto.. ma tutti e 3 i blog sono in inglese.. e io ho difficoltà a capirli... sai dove potrei chiedere info in merito a questo? vorrei poter inserire il conteggio delle pagine anche sopra e mettere anche il tasto "ultima"... Grazie

      Elimina
    3. @iOSLife
      In Italia non credo ci siano persone in grado di aiutarti e se ci sono non le conosco.

      Elimina
  13. Ho installato le pagine per la navigazione, ma non mostra tutti i post, cioè il mio blog è aperto dal gennaio 2011, ma se vado all'ultima pagina mi fa vedere post del 2012! Come mai? Grazie

    RispondiElimina
    Risposte
    1. @GiorgioC
      Non lo so, posso fare solo delle ipotesi e delle considerazioni. Questo tool è stato messo a punto quasi tre anni fa e da allora il codice di Blogger è molto cambiato. Non sono a conoscenza di metodi per creare un sistema di navigazione adatto ai modelli più recenti. Nel caso ci pubblicherei un post.

      Elimina
    2. Ok, grazie! Per caso mi puoi dire come inserire il bottone (come il tuo) "Rispondi" nei commenti, il semplice link non mi piace molto.

      Elimina
    3. @GiorgioC
      Per attivare le risposte ai commenti puoi seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html
      Per la personalizzazione del bottone Rispondi ci farò un post a breve

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy