Il mio Blog:
appunti di vita quotidiana!



E miracolosamente non ho smesso di sognare e miracolosamente non riesco a non sperare
e se c'è un segreto è fare tutto come se vedessi solo il sole
(Elisa - "Qualcosa Che Non C'è")



28 gennaio 2009

Inserire numero di pagine in Blogger

Visto che i blog raccolgono spesso molti post penso che sia utile e carino poter aggiungere a fine pagine la possibilità di sfogliare le pagine del nostro blog come fosse un libro. Girando per la rete ho trovato il blog di una simpatica e gentile fanciulla che insegnava come mettere il NUMERO DI PAGINE nel blog. Lei è Iole - Come inserire il numero di pagine in Blogger

Se guardate in fondo al mio blog invece che le scritte Post più vecchi/Post più recenti/Home ora c'è l'elenchino delle pagine da leggere. Tra le opzioni poi potrete scegliere anche quanti post volete siano visibili per pagina e quante pagine elencare.

Vediamo come fare!

Andate in Pannello di Controllo -> Layout -> Modifica HTML.

Spuntate la casellina "Espandi i modelli widget" e poi cliccate "Scarica modello completo" e salvate il file sul vostro pc, in questo modo abbiamo fatto un backup del Modello Html e non corriamo rischi di non poter tornare più indietro.

Premete Ctrl+F e inserite nella ricerca la stringa ]]></b:skin>, ora subito PRIMA aggiungete questo codice


.showpageArea {
margin-top: 12px;
margin-bottom: 10px;}
.showpageArea a {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px #9B0021 solid;
color: #9B0021;
padding: 3px;
margin-left: 5px;
background: #F9D6DD;
}
.showpageArea a:hover {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px #F9D6DD solid;
color: #F9D6DD;
padding: 3px;
margin-left: 5px;
background: #9B0021;
}
.showpageNum a {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px #9B0021 solid;
color: #9B0021;
padding: 3px;
margin-left: 5px;
background: #F9D6DD;
}
.showpageNum a:hover {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px #F9D6DD solid;
color: #F9D6DD;
padding: 3px;
margin-left: 5px;
background: #9B0021;
}
.showpagePoint {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px #F9D6DD solid;
color: #F9D6DD;
padding: 3px;
margin-left: 5px;
background: #9B0021;
}
.showpageTot {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: white;
}


Questo codice serve a dare la formattazione (colore, font, grandezza, bordi etc) al nostro elenco di pagine.

.showpageArea indica lo spazio libero in alto (top) e in basso (bottom)
.showpageArea a indica la casella con le freccette a destra e sinistra
.showpageArea a:hover indica la casella con le freccette a destra e sinistra che cambia al passaggio del mouse
.showpageNum a indica la casella con i numeri delle pagine
.showpageNum a:hover indica la casella con i numeri delle patine che cambia al passaggio del mouse
.showpagePoint indica la casella della pagina in cui siete

Salvate Modello e andiamo a inserire il nostro codice Java tra gli elementi del blog.


Andate in Pannello di Controllo -> Layout -> Elementi Pagina.

Aggiungete un elemento HTML/Java e copiate all'interno il codice

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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>


Posizionare l'elemento creato sotto il riquadro dei post.

All'inizio di questo ultimo codice potete modificare due opzioni:
var pageCount = 5; che è il numero di post da pubblicare in ogni pagina. Ricordatevi di andare a impostare la stessa opzione nel pannello di controllo del blog nella sezione Impostazioni -> Formattazione.
var displayPageNum = 3; che è il numero di pagine da elencare prima e dopo quella corrente.

I passaggi sono abbastanza semplici e intuitivi, a me l'idea è piaciuta subito, a volte è comodo poter sfogliare le pagine e comunque sapere quante ce ne sono da leggere.

Se avete bisogno di aiuto sono a disposizione. ^_-

3 commenti:

Bie ha detto...

Grazie mille per la segnalazione! Mi interessa parecchio, vorrei inserire il numero di pagine anche io :D Smack :*

Vampiretta ha detto...

E0 sempplice, l'unica cosa laboriosa è smanettare per il cambio dei colori. Ma basta un po' di pazienza. ^_-

maria cappello ha detto...

ciao vampiretta, ho provato ad inserire i numeri di pagine seguendo tutti i passaggi nel mio template di blogger ma non compare nulla.
Cosa devo fare? Grazie

Posta un commento

Puoi commentare il mio blog anche se non sei iscritto ma non lasciarmi il commento anonimo. Clicca su Nome/Url e scrivi il tuo nome o il tuo nick! ^_^