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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQAllruGjeS-1Qi6HCks-KeSQ6pu9RboYzsKuxT9Rz36UJpv9FpYow520lBGV57XRKlsFMFkXrPOVsQY3dfV1TbAjiMA84XBox63-APz4Vkg6kVg9i8RLGQmnA3Pc3awon9Sy2UITzuS2/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 -