Pubblicato il 21/02/10 - aggiornato il  | 51 commenti :

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


numeri pagina navigazione



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.


51 commenti :

  1. Ciao ,volevo dirti che ho provato ad inserire il codice per i numeri di pagina,ma purtroppo nel mio blog non esce nulla...uffa...

    RispondiElimina
  2. @Anna
    Tutte le personalizzazioni di Blogger sono sempre condizionate dalla compatibilità dei vari modelli e da modifiche che il team di Blogger apporta di continuo alla piattaforma :(

    RispondiElimina
  3. Ciao volevo un aiuto per quel che riguarda il mio blog su blogger.E' un pò di giorni che non mi fa fare i collegamenti con altri link interni al mio blog.Quando verifico la pagina,mi dice sempre che il sito è inesistente.Questa cosa mi fa impazzire,anche perchè avendo un blog di cucina,per me è utile fare collegamenti con altre ricette.Volevo sapere se sono stati fatti dei cambiamenti in blogger che io non so.Anzi,mi fa collegare solo i link con gli ultimo post.Grazie ancora per l'aiuto.

    RispondiElimina
  4. @Anna
    Prova a cambiare browser. Anche a me con Chrome mi ha dato dei problemi per qualche giorno. Se la cosa non si risolve rivolgiti al Centro di Assistenza per Blogger
    http://www.google.com/support/forum/p/blogger?hl=it
    Ciao

    RispondiElimina
  5. Grazie parsifal,ho già provveduto ad informarli...ti farò sapere...P.S. i tuoi consigli su blogger sono eccezionali,sono riuscita ad inserire il codice per non far copiARE I POST col destro.Mi dispiace che non sono riuscita a inserire la numerazione di pagina e il leggi tutto....

    RispondiElimina
  6. @Anna
    Il "leggi tutto" adesso è automatico in Blogger. Leggi questo post
    http://www.ideepercomputeredinternet.com/2009/09/blogger-introduce-il-read-more-per-la.html
    e quest'altro
    http://www.ideepercomputeredinternet.com/2010/03/read-more-articoli-sintetici-blogger.html
    Ciao

    RispondiElimina
  7. messo e personalizzato... grazie mille :)

    RispondiElimina
  8. Ciao parsifal,volevo chiederti dove posso trovare i loghi da mettere nel mio blog,tipo donna che cucina,in versione cartone animato..Ho visto che in giro ci sono molti blog che hanno cambiato il loro template aggiungendolo;ti dirò che è molto carino,però non sò dove cercarlo,oppure come crearlo,mi puoi aiutare? Grazie mille Anna

    RispondiElimina
  9. @Anna
    Se cerchi delle icone prova qui
    http://www.ideepercomputeredinternet.com/2010/02/iconspedia-per-cercare-e-scaricare.html
    o qui
    http://www.ideepercomputeredinternet.com/2009/07/una-raccolta-di-40-set-di-icone-da.html
    Per le immagini vai su Google Immagini e inserisci le parole chiave (anche in inglese)
    http://www.google.it/imghp?hl=it&tab=wi

    RispondiElimina
  10. Grazie parsifal,non c'è quello che cercavo...ti allego il link di un blog di ricette dove c'è il logo che cercavo. http://www.ricettedellanonna.net/

    Ciao e grazie intanto

    RispondiElimina
  11. @AnnaNon ti posso aiutare perché non è che c'è un sito specifico per questo tipo di immagini e se c'è non lo conosco

    RispondiElimina
  12. Grazie per questo tutorial molto utile....
    Vorrei sapere come posso cambiare il testo delle pagine totali, es.Pagine (14), si vede poco sul mio sfondo.
    Ciao e grazie ancora.

    RispondiElimina
  13. @tipinofino Il numero delle pagine dipende dai colori del blog. Credo sia lo stesso colore del testo. Puoi variarlo dalla tua Bacheca > Design > Designer Modelli > Avanzato

    RispondiElimina
  14. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  15. @Ernesto T.
    Oltre ad avere qualche anomalia con il risultato finale, ma non è un grosso problema, c'è una cosa importantissima che non viene: il contatore sotto le pagine con le varie etichette. infatti mi viene fuori il numeratore di pagine soltanto nella home! è normale?

    RispondiElimina
  16. @Ernesto T.
    P.S. Guarda nel mio quarto blog "Film italiani.." così capisci cosa intendo!

    RispondiElimina
  17. @Corvo Michele La numerazione con questo script avviene solo nella homepage

    RispondiElimina
  18. @Ernesto T.
    esiste uno anche per le etichette? dimmi se lo metterai! io aspetto! intanto auguri! :)

    RispondiElimina
  19. In questo momento non me ne viene in mente nessuno.

    RispondiElimina
  20. ciao, sempre utili i tuoi post cercavo oggi proprio per la numerazione pagine e questo post capita giusto giusto,pero' devo chiederti: visiono 100 pagine ed ho impostato 5 post per pagina....quindi in teoria farebbe visionare 100x5 =500 post.
    pero' come puoi anche tu vedere dai post per anno io ne ho ben molti di più... come mai?

    RispondiElimina
  21. @Fioredicollina
    Non saprei dirti. Accedendo al tuo profilo poi ho visto che hai quattro blog quindi non so neppure a quale ti riferisci.

    RispondiElimina
  22. oh fatto tutto come cie nel tutorial ma non funziona .
    aiuto dimmi cosa devo fare

    RispondiElimina
  23. ciao Ernesto, hai ragione, ma la mia pagina web personale è casalinga per caso: è sempre quello il blog cui mi riferisco . se hai un minuto per guardarci ....grazie come sempre...

    RispondiElimina
  24. @Navdeep
    @Fioredicollina
    Questo tutorial l'ho ripreso dall'inglese anche se il blogger che lo ha ideato è indonesiano ma scrive in questa lingua. Onestamente non sono in grado di dare indicazioni supplementari a quelle già presente nel post. Bisognerebbe consultare il suo ideatore Abu Farhan ma insegna informatica all'Università di Giacarta, ultimamente sul suo blog pubblicano solo i suoi studenti e credo non abbia molto tempo da dedicarci ^_^

    RispondiElimina
  25. grazie cmq per le tue risposte sei sempre gentile e disposto ad aiutarci.
    :-)

    RispondiElimina
  26. ciao...allora antefatto: vedi commento 21
    in qst gg. volendo andare al mio post l inizio blog ovvero 17.08.2006 che succede? che avendo messo l numerazione pagine e come succitato vedevo solo 100 pag. il mio blog visionava fino a metà d 2007 e quindi tutte le pagine precedenti NO !!!! sgomento!!!!:-( allora ho tolto il codice e sono tornata al vecchio sistema cioè 'post + vecchio' .
    ci tenevo a dirtelo in modo d aggiornare qst post ovvero chi ha un blog con molti post di stare attenti perchè ad un certo punto non va + indietro....ok? ciao.

    RispondiElimina
  27. ciao, il tutorial funziona benissimo, ma ho un piccolo problema... il colore di "Precedente" e "Successivo" è bianco e nel mio blog non vede. Esiste un modo per rendere le scritte nere?

    RispondiElimina
    Risposte
    1. @SemmuSassaresi
      Ci sono sei stili, scegline un altro oppure modifica i codici esadecimali dei colori.

      Elimina
  28. ciao!intanto grazie mille per i consigli!ne ho già provati alcuni e funzionano ma questo purtroppo non e non ne capisco il motivo visto che segue alla lettera tutte le tappe!!!:((puoi aiutarmi?grazie!!!

    RispondiElimina
    Risposte
    1. @sweetsugar
      Non ti so dire perché non funziona, forse non è compatibile con il tuo modello. Succede

      Elimina
    2. Hai qualche altra pagina su cui indirizzarmi per provarne altri...sperando che funzionino!?grazie mille!

      Elimina
    3. @sweetsugar
      C'è quest'altro però è più vecchio e si basa sullo stesso concetto
      http://www.ideepercomputeredinternet.com/2009/10/come-inserire-i-numeri-di-pagina-per.html
      Prova solo se hai un template vecchio oppure scaricato da internet e non ufficiale di Blogger

      Elimina
  29. Ciao, volevo sapere se e' possibioe inserirlo all'interno di una pagina. Ad es ho una Pagina piena di titoli di film nel blog e questo metodo sarebbe utile. E possibile?

    RispondiElimina
    Risposte
    1. No, serve solo per Homepage e Etichette (in qualche template) @

      Elimina
    2. Non appare nulla dopo aver inserito i codici, ho un dominio personalizzato, ho provato a caricare il CSS1 su dropbox ma dopo averlo sostituito col tuo non funziona ugualmente...

      Elimina
    3. @AndreaSapuppo
      Hai caricato anche i due JS?
      http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine1.js
      http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine2.js
      Se sì e non ti funziona allora potrebbe essere un problema di modello.

      Elimina
    4. Ok adesso funziona, me ne ero dimenticato.

      Elimina
  30. Ciao a tutti, scusate ma sapete se é possibile numerare ogni singolo post su blogger?
    Cioé fare in modo che il post venga numerato automaticamente ogni volta che ne pubblico uno nuovo

    RispondiElimina
    Risposte
    1. @# Non ho mai trovato una personalizzazione di questo tipo. Si possono numerare le pagine come avrai letto in questo post

      Elimina
  31. Ciao Ernesto, i link del blog di Abu che hai messo hanno dei malware, una situazione simile penalizzerebbe anche il tuo blog o solo il suo?

    RispondiElimina
    Risposte
    1. Abu Farhan credo che abbia risolto . Non è che distribuisse span. Si vede che aveva un link sospetto agli occhi di Google. Se la cosa dura pochi giorni non penso abbia conseguenze, ci sono anche i falsi positivi. Abu Farhan è professore di informatica all'Università di Giacarta e ha sempre meno tempo per il blog. È per questo che se ne accorto solo dopo diversi giorni
      @#

      Elimina
  32. Vorrei sapere come posso inserirlo nel mio sito che ho creato con altervista,non ci riesco,mi potreste aiutare,grazie.

    RispondiElimina
    Risposte
    1. Con Altervista questo sistema non c'entra nulla. Non conosco Altervista a sufficienza ma si tratta per lo più di pagine statiche e non di post dinamici come accade su Blogger
      @#

      Elimina
  33. Ernesto buonasera

    avevo la numerazione funzionante di Abu- in ogni pagina, anche successiva alla prima pagina, su due blog.
    ha funzionato per molti mesi, improvvisamente è scomparsa prima da un blog e poi anche sull'altro.

    sai per caso che è successo?
    ovviamente non ho effettuato alcuna modifica nell'html.

    e l'altra domanda è: come risolvere?
    Grazie,


    RispondiElimina
    Risposte
    1. Credo che Abu Fahran abbia tralasciato i suoi widget e anche i domini su cui erano ospitati. Prova con questo post. Se hai un dominio personalizzato scarica i file .css e .js e caricali su Google Drive
      http://www.ideepercomputeredinternet.com/2014/01/google-drive-hosting-hotlink.html
      @

      Elimina
  34. Ciao, il post è un pochino vecchio, probabile che sia per quello che sul mio blog non funziona? Lo sto testando qua: http://wa-test.blogspot.it/

    RispondiElimina
    Risposte
    1. Non ho intenzione di riprendere questo widget, mi spiace ma è per i modelli di 5 anni fa e adesso sarebbe troppo complicato adattarli a quelli nuovi :(
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy