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

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

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

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

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.

Questo post è una sintesi di informazioni che ho preso dai seguenti siti: Abu Farhan, TechieBlogger e AllBlogTools.