Pubblicato il 18/06/12 - aggiornato il  | 24 commenti :

Numerazione delle pagine di Blogger con bottoni di navigazione.

By con etichette , , , ,
Numerazione delle pagine di Blogger in cinque stili diversi per la navigazione a partire dalla homepage.
Ho già pubblicato un post su come inserire il numero delle pagine del blog a fondo pagina per favorire la navigazione degli utenti a partire dalla homepage. In quell'articolo erano anche stati creati sei diversi stili di bottoni per andare incontro alle varie esigenze di layout.

Sempre lo stesso autore il cui link è inserito alla fine di questo post ha realizzato un altro script sempre sullo stesso tema. A differenza dal precedente che non aveva limitazioni di riutilizzo questo ha la restrizione che può essere modificato solo con il consenso dell'autore.

Non si possono quindi inserire espressioni italiane e sarà visualizzato insieme ai bottoni un link di attribuzione. In compenso l'istallazione è veramente semplice visto che non occorre neppure modificare il template ma è sufficiente aggiungere un gadget HTML/Javascript in una sidebar. Sono disponibili cinque stili diversi realizzati da un altro blogger citato anch'esso alla fine. E' comunque possibile modificare i colori dei bottoni semplicemente sostituendo i codici esadecimali dei colori. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript e si incolla uno dei codici seguenti in Sezioni del sito 


BOTTONI DI NAVIGAZIONE BLOGGER - PRIMO STILE

bottoni-navigazione-blogger

<style type="text/css">
#blog-pager{padding:10px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=5;
var upPageWord ='Precedente';
var downPageWord ='Successiva';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

BOTTONI DI NAVIGAZIONE BLOGGER - SECONDO STILE

bottoni-blogger-stile-2

<style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=5;
var upPageWord ='Precedente';
var downPageWord ='Successiva';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

BOTTONI DI NAVIGAZIONE BLOGGER - TERZO STILE

bottoni-navigazione-terzo-stile

<style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=5;
var upPageWord ='Precedente';
var downPageWord ='Successiva';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

BOTTONI DI NAVIGAZIONE - QUARTO STILE

bottoni-blogger-stile-4

<style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=5;
var upPageWord ='Precedente';
var downPageWord ='Successiva';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

BOTTONI DI NAVIGAZIONE BLOGGER - QUINTO STILE

quinto-stile-bottoni-navigazione-blogger

<style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=5;
var upPageWord ='Precedente';
var downPageWord ='Succesiva';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Dopo aver cliccato su Salva senza inserire il titolo non occorre posizionare l'elemento pagina. Oltre ai colori dei bottoni che riguardano il background, il colore del testo e il colore del pulsante quando viene puntato dal mouse (hover) si possono personalizzare anche gli arrotondamenti (3 pixel) che peraltro non sono visibili con IE, e il gradiente che serve per avere dei bottoni con colori non uniformi.

I parametri in rosso servono per selezionare le espressioni da visualizzare a lato dei numeri delle pagine (Precedente e Successiva), il numero degli articoli da mostrare per ciascuna pagina e il numero di pagine da visualizzare.

Fonti | Abu Farhan e Way To Blogging -


24 commenti :

  1. Giorgio G18 giugno 2012 alle ore 11:26

    Grazie per l'ennesimo articolo interessante.
    Ho un sito per il quale qualsiasi paginazione non funziona, nemmeno questo codice.
    Devo aver cancellato a suo tempo qualche funzione tipo next/prev perché non mi serviva, e ora non so più come fare.
    Hai qualche idea? Ti ringrazio comunque

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi18 giugno 2012 alle ore 11:32

      @Giorgiogal
      Credo che gli unici sistema di paginazione delle pagine in Blogger li abbia creati Abu Farhan e sono quelli di questo post e l'altro che ho linkato all'inizio dell'articolo

      Elimina
    2. Giorgio G18 giugno 2012 alle ore 11:39

      Ti ringrazio. ma chiedevo un'altra cosa. non mi funzionano perché a suo tempo devo avere cancellato volutamente dei codici del tempate che servono poi a mostrare queste paginazioni (tipo navigation o next/prev)
      hai idee sul come procedere per reinserirli? hai mai avuto lo stesso problema o sentito di qualcuno che l'ha avuto?
      grazie ancora

      Elimina
    3. Ernesto Tirinnanzi18 giugno 2012 alle ore 11:44

      @Giorgiogal
      E' la prima volta. Però il codice del Next Prev lo puoi ricavare creando un altro blog di prova e copiando quella sezione di codice. Dovrebbe essere simile a questo
      http://www.ideepercomputeredinternet.com/2011/01/come-sostituire-in-blogger-piu-recente.html
      che serve per inserire delle icone

      Elimina
  2. Ivano Bellini18 giugno 2012 alle ore 15:06

    grazie mille, l ho messo ora ;)

    RispondiElimina
  3. Giuseppe18 giugno 2012 alle ore 15:40

    Ernesto ti ho mandato un pm per il mio problema...sul codice HTML di errore cosa mi consigli di fare arrivati a questo punto ???ho provato ad aprire il tutto con un altro browser ...ma niente....

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi18 giugno 2012 alle ore 15:55

      @Giuseppe
      Il tuo caso potrebbe essere un malfunzionamento del tuo account. In questo caso ti devi rivolgere al forum di Blogger
      http://productforums.google.com/forum/#!forum/blogger-it
      sperando che il tuo caso venga letto da un dipendente di Google perché i ragazzi che rispondono nel forum difficilmente ti potranno essere di aiuto e ti diranno cose diverse da quelle che ti ho detto io.

      Elimina
  4. MissMeryLu2000m18 giugno 2012 alle ore 15:52

    grazie ,molto utile:)

    RispondiElimina
  5. Giuseppe18 giugno 2012 alle ore 16:04

    grazie lo stesso ernesto ma gia ho provato ad inviare un messagio a blogger ma ancora nessuna ris ...in caso non dovessero ris mi consigli di fare un backup di tutto???e importare il mio blog in un nuovo account ????grazie

    RispondiElimina
  6. Giuseppe18 giugno 2012 alle ore 16:22

    allora ernesto devo fare backup/ripristina salvare il mio blog su hdd esterno ,dopodicche creare un nuovo account google con una nuova gmail entrare nel blogger e fare importa blog???a quel punto andrò ad inserire il mio blog salvato precedentemente giusto?

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi18 giugno 2012 alle ore 16:25

      @Giuseppe
      Sì ma prima di consiglio di creare un altro blog con lo stesso account per vedere se i problemi permangono.Prova anche a eliminare tutta la cache e i cookie dal browser. Potresti avere un virus nel PC e allora sarebbe tutto inutile. Controlla tutto prima di passare a un nuovo account.

      Elimina
  7. Giuseppe18 giugno 2012 alle ore 16:35

    ernesto gia fatta l eliminazione cache ti volevo dire un ultima cosa non so puo essere utile,quando vado su modifica HTML e pigio su anteprima mi esce il seguente errore È stato trovato più di un widget con ID: Navbar1. Gli ID dei widget devono essere esclusivi. forse questo è il problema ma non so a cosa si possa riferire...

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi18 giugno 2012 alle ore 16:48

      @Giuseppe
      Vai su Layout. In alto a destra dovrebbe esserci una sola Navbar, se ce ne sono due una la elimini. Altrimenti vai su Modello, clicchi su F3 e incolli navbar per trovare il codice e eventualmente cancellare il secondo widget

      Elimina
  8. Giuseppe18 giugno 2012 alle ore 17:04

    allora ho fatto modifica HTML ho levato la stringa del navbar perche ne ho 2!!!! uno in altro e l'altro nei widget sulla destra ...,senza fare espandi modelli widget ho fatto anteprima e mi esce il mio sito ora non mi da errore ma poi quando cerco di salvare la pagina mi da lo stesso errore ....mah....

    RispondiElimina
  9. Pennywise18 giugno 2012 alle ore 18:45

    grazie Ernesto,
    funziona bene... solo una domanda è normale che si veda solo in home page?

    RispondiElimina
  10. Unknown18 giugno 2012 alle ore 21:11

    Eureka! Appena ho capito di che si tratta...l'ho preso in men che non si dica e funziona a meraviglia!
    Una domanda nel mio blog c'è la solita freccia per inizio pagina che l'ho trovato banale. Se vai al link http://kantomagapi.blogspot.it/ vedi in basso a destra una bellissima "rosa -inizio pagina" . Non potresti creare html per avere quella rosa magari blu?
    grazie e complimenti!
    kamasa

    RispondiElimina
  11. Ernesto Tirinnanzi18 giugno 2012 alle ore 23:56

    @Kamasa54
    La rosa che dici ha questo URL
    http://www.tonygifsjavas.com.br/efeitos_para_blogs/efeito_topo_pagina/img_flores_02.png
    La puoi scaricare e caricare sul tuo Picasa oppure direttamente incollare questo URL al posto della icona di questo post
    http://www.ideepercomputeredinternet.com/2012/04/come-inserire-un-pulsante-per-tornare.html
    Se invece lo vuoi senza effetti puoi seguire quest'altro post
    http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-bottone-statico-fondo.html

    RispondiElimina
  12. Unknown19 giugno 2012 alle ore 04:58

    @Ernesto Tirinnanzi

    ho seguito subito le tue indicazioni e voilà ecco fatto ! ho inserito la rosa come segno inizio pagina!
    Sei Mandrake il mago del computer!
    grazie infinite!
    kamasa

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi19 giugno 2012 alle ore 09:17

      @kamasa54
      Diciamo che con JQuery è anche più carino perché si vede lo scroll e non c'è uno spostamento immediato come nel blog che mi hai indicato

      Elimina
  13. Unknown20 giugno 2012 alle ore 11:27

    @Ernesto Tirinnanzi

    Scusami se ritorno nello stesso tasto per icona inizio pagina. Una mia amica ne è felice di copiarla e vorrebbe sapere compresa me se è possibile creare la stessa rosa ma di fine pagina?
    Buona giornata
    Kamasa

    RispondiElimina
  14. sweetsugar12 settembre 2012 alle ore 17:35

    ciao!ho provato anche questa modalità senza toccare l'HTML ma niente...non capisco proprio perchè non funzioni!!:(

    RispondiElimina

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

Iscriviti a: Commenti sul post ( Atom )