INSERIRE PAGINA AVANTI CON NUMERO CON BLOGGER

Questa è una di quelle modifiche relativamente semplici da fare ma che permetteranno di dare un look & feel più gradevole e professionale al blog su Blogger: sostituire i link “Post più vecchi”, “Post più recenti” e “Home” con il numero delle pagine:

Decisamente d’impatto, permetterà una navigazione più intuitiva e rapida nel blog.

Questa modifica non appesentirà significativamente il caricamento del blog, ed è mia intenzione farla al più presto su questo blog. Come sempre farò riferimento al template Minima, ma non ci dovrebbero essere particolari problemi su qualsiasi altro template.

Passo 1 – Codice per la personalizzazione dei colori

Andate in Layout->Modifica HTML, e cercate queste righe di codice (verso l’inizio):

/* Variable definitions
   ====================

Subito sotto, incollate questo:

<Variable name="pagebgcolor" description="Pagine - colore di sfondo"     
          type="color" default="#ccc" value="#ffdfbf">     
<Variable name="pagefwcolor" description="Pagine - colore testo e bordi"     
          type="color" default="#000" value="#cc0000"> 

E salvate il template. In Layout->Caratteri e colori, apparirà già la possibilità di personalizzare i colori dei link alle pagine che inseriremo:

Passo 2 – Codice CSS per definire l’aspetto dei link alle pagine

Tornate in Layout->Modifica HTML, e cercate questa riga di codice (CTRL+F col browser):

]]></b:skin>

Subito sopra, incollate questo:

.showpageArea {    
margin-top: 12px;    
margin-bottom: 10px;    
}

.showpageArea a {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
border: 1px $pagefwcolor solid;    
color: $pagefwcolor;   
padding: 3px;    
margin-left: 5px;    
background: $pagebgcolor;    
}

    
.showpageArea a:hover {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
border: 1px $pagebgcolor solid;    
color: $pagebgcolor;    
padding: 3px;    
margin-left: 5px;    
background: $pagefwcolor;    
}
   
.showpageNum a {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
border: 1px $pagefwcolor solid;    
color: $pagefwcolor;    
padding: 3px;    
margin-left: 5px;    
background: $pagebgcolor;    
}
   
.showpageNum a:hover {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
border: 1px $pagebgcolor solid;    
color: $pagebgcolor;    
padding: 3px;    
margin-left: 5px;    
background: $pagefwcolor;    
}

.showpagePoint {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
border: 1px $pagebgcolor solid;    
color: $pagebgcolor;    
padding: 3px;    
margin-left: 5px;    
background: $pagefwcolor;    
}

.showpageTot {    
font-size: 12px;    
font-weight: normal;    
text-align: center;    
text-decoration: none;    
color: white;    
}

E salvate le modifiche fatte.

Passo 3 – Inserimento del codice Javascript

Andate in Layout->Elementi pagina, e aggiungete un elemento di tipo HTML/Javascript (nell’esempio l’elemento è inserito sotto la sezione dei post, ma potete aggiungerlo dovunque).



All’interno dell’elemento (lasciatelo senza titolo) incollate questo codice Javascript:

<script type="text/javascript">  
function showpageCount(json) {  
var thisUrl = location.href;  
var htmlMap = new Array();  
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length) == ".com/";  
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;  
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount = 5;  
var displayPageNum = 3;  var firstPageWord = '<<';  
var endPageWord = '>>';  
var upPageWord = '<';  
var downPageWord = '>';  
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';  
for(var i=0, post; post = json.feed.entry[i]; i++) {  
var timestamp = post.published.$t.substr(0,10);  
var title = post.title.$t;  
if(isLablePage) {  
if(title!='') {  
if(post.category) {  
for(var c=0, post_category; post_category = post.category[c]; c++) {  
if(encodeURIComponent(post_category.term)==thisLable) {  
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {  
if(thisUrl.indexOf(timestamp)!=-1 ) {  
thisNum = postNum;  
} 
postNum++; 
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;  
}  
}  
}  
}  
itemCount++;  
}  
}  
else {  
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+'T00%3A00%3A00%2B08%3A00&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) {  
if(isLablePage) { 
upPageHtml = labelHtml + upPageWord +'</a></span>';  
}  
else {  
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) {  
if(isLablePage) {  
html = labelHtml+'1</a></span>';  
}  
else {  
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) {  
if(!isLablePage) {  
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';  
}  
else {  
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';  
}  
}  
html = '<div class="showpageArea"><span class="showpage">Pagina '+thisNum+' di '+(postNum-1)+': </span>'+html; 
if(thisNum<(postNum-1)){ 
html += downPageHtml;  
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';  
}  
if(postNum==1) postNum++;  
html += '</div>';  
if(isPage || isFirstPage || isLablePage) {  
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 src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>  
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div> 

Prima di salvare l’elemento, potete personalizzare il codice modificando le due righe che ho evidenziato:

var pageCount = 5;


var displayPageNum = 3;

La prima indica il numero di post che verranno visualizzati in ogni singola pagina: in questo caso vale 5. Per ottenere un effetto migliore, consiglio di mettere lo stesso numero di post che state già visualizzando, e che potete cambiare (ma non è necessario farlo) da Layout->Elementi pagina, cliccando su Modifica nella sezione dei post:







La seconda indica quanti link alle pagine appariranno. Lasciando 3, ecco il risultato:



 




Una volta incollato il codice, salvate l’elemento e spostatelo sotto l’area dei post:








A questo punto salvate e visualizzate il blog, per vedere l’effetto. Tutto fatto!

Attenzione!

• La modifica interroga il feed del blog, per cui può volerci qualche minuto prima che si “accorga” dei nuovi post
• Potete modificare il codice Javascript per cambiare dimensioni dei caratteri e in generale l’aspetto dei link alle pagine
• Personalizzate i colori andando in Layout->Caratteri e colori

Previa valutazione dei punti sopra, vi invito a segnalarmi qualsiasi problema che si presenti.