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 definitionsSubito 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.
Post
