Inserire i numeri di pagina per la navigazione in Blogger scegliendo tra sei stili diversi e personalizzando completamente i colori.

In un precedente articolo ho presentato la personalizzazione su come inserire i numeri di pagina in Blogger per migliorare la navigazione. Ho anche creato un blog apposito per mostrare questa funzionalità che ho chiamato Numeri Pagina Navigazione. Come vedete, nella parte bassa della pagina sono presenti dei numeri che facilitano lo spostarsi tra le varie pagine






Alcuni lettori mi hanno fatto presente che lo stile non si addiceva al loro blog e se ci fosse la possibilità di modificarlo. Abu Farhan ha creato sei stili diversi per la visualizzazione di questi numeri nella parte bassa delle pagine di Blogger e ha pubblicato nel web delle demo dei singoli stili

1. Demo Stile n° 1 -
2. Demo Stile n° 2 -
3. Demo Stile n° 3 -
4. Demo Stile n° 4 -
5. Demo Stile n° 5 -
6. Demo Stile n° 6 - 

Questo credo che coprirà le esigenze estetiche di quasi tutti i modelli in ogni caso possiamo ulteriormente personalizzare come vedremo in seguito. Andate su Layout > Modifica HTML e salvate il modello completo. Cercate la riga

</body>

e, immediatamente sopra, incollate il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord =&#39;Precedente&#39;;
var downPageWord =&#39;Successiva&#39;;
</script>
<script src='http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine1.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine2.js' type='text/javascript'/>
<!--PAGINE NAVIGAZIONE FINE-->

Le personalizzazioni riguardano i seguenti punti

1. var pageCount=10; è il numero di post da inserire in ciascuna pagina
2. var displayPageNum=3; è il numero di bottoni che devono essere mostrati a sinistra e a destra della pagina corrente. Guarda la prima immagine per renderti conto di cosa significhi
3. Precedente e Successiva sono le espressioni che vengono visualizzate insieme ai numeri di pagina con ovvio significato. Possono essere sostituite da espressioni più stringate come Pre e Seg, oppure da espressioni inglesi come Prev e Next.

Adesso cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<link href='http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #940F04;
}
// STILE PER PAGINE SELEZIONATE
.showpagePoint {
color: #FFFFFF;
background: #940F04;
border: 1px solid #940F04;
}
// STILE PER BOTTONI NUMERI
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #940F04;
border: 1px solid #940F04;
}
// STILE PER BOTTONI NUMERI PUNTATI DAL MOUSE
.showpageNum a:hover {
color: #FFFFFF !important;
background: #940F04 !important;
border: 1px solid #940F04;
}
// STILE PER BOTTONI PRECEDENTE E SUCCESSIVA
.showpageArea a {
border: 1px solid #940F04;
}
// STILE PER BOTTONI PRECEDENTE E SUCCESSIVA PUNTATI DAL MOUSE
.showpageArea a:hover {
border: 1px solid #940FO4;
color: #FFFFFF !important;
background: #940F04 !important;
}
</style>
<!--PAGINE NAVIGAZIONE FINE - http://parsifal32.blogspot.com-->

dove il colore #940F04; può essere sostituito con un qualsiasi altro a vostra scelta così come gli altri parametri indicati nel codice. Il colore utilizzato è quello dei link di questo blog.
Alternativamente, se invece volete utilizzare gli stili già predisposti da Abu Farhan, allora incollate, sempre sopra la riga </head>, il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<link href='http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile1.css'  rel='stylesheet' type='text/css'/>
<!--PAGINE NAVIGAZIONE FINE - http://parsifal32.blogspot.com-->

dove al posto del numero evidenziato (1) di rosso inserite quello preferito dei sei sei stili proposti. Per esempio diventerà …/navigazione/stile4.css' se vi piace lo stile numero quattro. Nel caso voleste utilizzare colori diversi da quelli proposti, mantenendo lo stesso stile, dovete procedere in questo modo

1. Scaricare il file dello stile che vi piace andando con il browser nell'URL relativo per esempio (http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile4.css)
2. Aprirlo con Notepad++ e modificare i colori seguendo lo schema illustrato nel codice precedente
3. Se non avete Notepad++, rinominate il file da CSS in TXT e apritelo con il Blocco Note, modificate i colori e rinominatelo con l'estensione CSS
4. Caricate questo foglio di stile su un hosting gratuito come Google Sites. Se utilizzate questa soluzione seguite le  indicazioni dell'articolo che spiega come creare una pagina schedario
5. Acquisitene l'URL puntando con il mouse il file e scegliendo Copia Indirizzo
6. Sostituite questo URL a quello dell'ultimo codice di questo post quindi incollatelo nel modello sopra </head>.

Credo che questo metodo potrà essere utilmente applicato a tutti i modelli di blog.