Pubblicato il 18/02/13e aggiornato il

Come inserire lo scorrimento infinito delle pagine su Blogger.

Come inserire lo scroll continuo delle pagine tipico dei modelli a Visualizzazione Dinamica anche nei altri blog di Blogger.
I siti che vanno per la maggiore quali Facebook, Twitter e Google Plus usano una tecnica di scorrimento infinito che permette ai navigatori di caricare in modo continuo tutte le pagine visualizzabili senza dover cliccare sui pulsanti di navigazione successivo o precedente. Durante lo scorrimento della pagina verso il basso si apre automaticamente un nuovo contenuto. Questo non compromette la pesantezza della pagina perché i nuovi contenuti vengono caricati solo nel momento in cui si scorre la pagina.

Tale funzionalità di scorrimento infinito è stata applicata anche ai modelli a Visualizzazione Dinamica di Blogger permettendo così agli utenti una maggiore velocità e semplicità di utilizzo. Questo sistema di caricamento continuo delle pagine può però essere adottato anche nei normali template di Blogger utilizzando la libreria JQuery.



Se scorrete la pagina del blog di demo non vedrete solo i post presenti nella homepage ma li potrete scorrere tutti dal primo all'ultimo. Quando arriverete alla fine di una pagina vedrete per un attimo una immagine di loading per poi proseguire con la prossima schermata. Se date una occhiata all'URL del browser vedrete che accanto all'indirizzo della home si aggiungerà il suffisso #/page/X dove X sarà il numero della pagina. Questo effetto non sarà limitato alla Homepage ma riguarderà anche le pagine di archivio e quelle delle etichette. L'installazione è semplicissima ma è compatibile solo per i template che supportano JQuery che eventualmente dovrà essere aggiornata. Si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il seguente codice

<!-- Scroll continuo delle pagine - Inizio -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
    <script src='https://sites.google.com/site/scriptperilblog/javascript-2/jquery.ias.min.js' type='text/javascript'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
//<![CDATA[
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://lh4.googleusercontent.com/-jAwg58_1TQ8/USI3F_SqbCI/AAAAAAAAgdU/PdkoAphwrsI/s508/loading.gif'
});
//]]>   
</script>
</b:if>
<!-- Scroll continuo delle pagine - Fine -->

Si salva il modello. Se si possiede un blog con dominio personalizzato bisogna scaricare il javascript colorato di rosso incollandone l'URL nel browser e caricarlo su DropBox o su Google Drive. Al posto della immagine di loading il cui URL è colorato di viola se ne può sostituire un'altra di dimensioni simili vale a dire di circa 500x400 pixel. Da notare che nel codice  ci sono due tag condizionali che fanno girare il javascript in tutte le pagine esclusi gli articoli.
Fonte | Jeroen Fiege -




16 commenti :

  1. Sarebbe utilissimo se fosse possibile affiancare un bel banner AdSense su uno dei lati... :)

    RispondiElimina
  2. Ciao Ernesto, questa volta sono in crisi...non funziona, vediamo se ho fatto bene.
    Ho scaricato JQuery, quindi caricato su DropBox, quindi preso indirizzo pubblico e sostituito la parte rossa del codice con quella di DropBox...salvato.
    Dove sbaglio? Grazie anticipate e per tutti gli altri consigli.

    RispondiElimina
    Risposte
    1. @# Sembra tutto OK. Se non funziona può essere un problema intrinseco del modello. Se hai un blog di prova identico a quello con dominio personalizzato che stati usando puoi provare a incollarci il codice così com'è per vedere se funziona. In quel caso si tratterebbe di un tuo errore.

      Elimina
  3. ciao Caro Ernesto,io ho un problema col mio template di Blogger.in pratica i post si vedono di default come fossero anteprima e non tutto il testo ...alla fine del post appare il CONTINUA LA LETTURA,a me invece servirebbe che si vedessero i post per interi.Non so se mi sono spiegato bene....potresti aiutarmi? Grazie

    RispondiElimina
    Risposte
    1. @# Con i template scaricati da internet possono accadere queste situazioni che non sono facilmente risolvibili. Puoi provare a rivolgerti all'autore del modello postando il tuo problema in un commento sul sito in cui lo hai scaricato ma secondo me è che si tratta di un modello pensato proprio per far vedere le anteprime in automatico.

      Elimina
  4. Anche io ho un template preconfezionato e scaricato da internet, allora mi sa che sia questo il problema. Ciao

    RispondiElimina
  5. come si fa a metterlo anche nella versione mobile?

    RispondiElimina
    Risposte
    1. @# Non credo almeno per il momento

      Elimina
    2. e allora la domanda è un'altra... però ti spiego
      se io metto lo scrolling infinito, nella versione desktop funziona e va bene, ma nella versione mobile, mi scompaiono i pulsanti per navigare tra le pagine e non fa neanche lo slide. In sintesi non posso cambiare pagina.
      Come posso fare a far riapparire i pulsanti?

      Elimina
    3. @# Non lo so. Probabilmente questa personalizzazione crea problemi alla visualizzazione mobile

      Elimina
  6. Funziona, si.
    L'unica cosa è che i post caricati in automatico non mantengono la cornice "una per uno" ma ne hanno una per tutti, come quando si pubblicano più di un post nell'arco della stessa giornata.

    Si può far qualcosa? (grazie)

    RispondiElimina
    Risposte
    1. @# Probabilmente è una cosa tipica del tuo modello e onestamente non saprei cosa fare per ovviare

      Elimina
  7. Ciao,

    ho seguito la procedura come da te indicato, ho un dominio personale, ma poi non funziona;
    una volta scaricato il link in rosso, caricato su dropbox e lanciato il file che si generaa il codice, poi dove devo incollarlo? perchè non mi torna, e ho anche aggiornato il jquery che pensavo fosse quello il motivo, ma nulla,

    grazie!

    RispondiElimina
    Risposte
    1. @# Devi caricare il javascript sulla cartella Public di Dropbox. Se nel tuo account non ci fosse questa cartella, la devi creare da solo. Dopo aver caricato il file vai su Copy Public Link per avere il link diretto. Questo URL che sarà di questo tipo
      http://dl.dropbox.com/u/2574553/dock-menu/js/UvumiDock-compressed.js
      Se lo incolli nel browser vedrai la pagina con il javascript. Tale URL lo sostituisci nel codice a quello in rosso che hai scaricato.

      Elimina
    2. funziona perfettamente!! grazie mille per la dritta :)
      ottimo blog!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.