Pulsanti per spostarsi in alto e basso della pagina di Blogger.

Come mostrare sei bottoni in Blogger per spostarsi a inizio e a fondo pagina, di una schermata in basso e in alto e per attivare e sospendere lo scorrimento automatico a velocità personalizzata.

Riprendo il tema già affrontato qualche giorno fa del bottone per tornare a inizio pagina installabile nei blog di piattaforma Blogger. Tale bottone aveva il pregio di apparire solo dopo un certo scroll della pagina e di portare a uno spostamento con un tempo personalizzabile e quindi non repentino.

Aveva però il difetto di utilizzare il javascript jQuery che non è presente in tutti i modelli e che rallenta il download delle pagine del sito e quindi determina una minore velocità del sito. In questo articolo presenterò una personalizzazione che tiene sempre in vista bel sei bottoni trasparenti con ciascuno il proprio compito. Ci sono due pulsanti per andare in fondo alla pagina e per tornare all'inizio. Altri due pulsanti servono per scorrere la pagina in basso o in alto di una schermata. Infine gli ultimi due servono per uno scorrimento continuo e personalizzato della pagina in modo da facilitare la lettura senza spostare il cursore a destra della stessa e per mettere in pausa tale scorrimento.

L'installazione non desta particolari problemi e anche la personalizzazione dei colori e piuttosto semplice. La posizione scelta è fissa a distanza zero dalla parte bassa e dalla parte destra. Visto che viene utilizzato un meccanismo che è simile a quello dei CSS Sprite per modificare la posizione bisognerebbe intervenire su tutti i parametri.  Quando si passa su una icona con il cursore viene mostrato un tooltip della azione che verrà compiuta se ci si clicca sopra e inoltre cambierà anche di colore.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si incolla questo codice subito sopra al tag </body> che si trova solitamente nella penultima riga del template.

<style type="text/css">
#IpCeI-scroll{position:fixed;z-index:9999;bottom:0;right:0;}
#IpCeI-scroll a{display:block;float:left;background-color:#5be8d7;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkNHUTPIZu0YLLLCINy3-SgMKedULyX-MJupZO-3ypGYE_Y098Y28OI2eUAxhKFTtWBfLS7FKP4KKzauFO4SiMUOyeMoPMWEaIK2oWPBjHqtnoxcuGG91-IVjzzRyQVLGuJCR285eMoM/s216/scroll.png);width:36px;height:36px;text-indent:-999em;}
#IpCeI-scroll a.IpCeI-up{background-position:0 -36px;}
#IpCeI-scroll a.IpCeI-down{background-position:0 -72px;}
#IpCeI-scroll a.IpCeI-bottom{background-position:0 -108px;}
#IpCeI-scroll a.IpCeI-scroll{background-position:0 -144px;}
#IpCeI-scroll a.IpCeI-stop{background-position:0 -180px;}
#IpCeI-scroll a:hover{background-color:#159586;}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',80)}
function stopScroll(){clearTimeout(scrolldelay)}
</script> 
<div id='IpCeI-scroll'>
<a class='IpCeI-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='Inizio'>Inizio</a>
<a class='IpCeI-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Schermata Su'>Schermata Su</a>
<a class='IpCeI-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Schermata Giù'>Schermata Giù</a>
<a class='IpCeI-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='Fondo Pagina'>Fondo Pagina</a>
<a class='IpCeI-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='IpCeI-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Si salva il modello. Il codice del colore di sfondo dei bottoni è #5be8d7; che diventa #159586; quando ci si passa sopra con il mouse.  La velocità di scorrimento può essere settata modificando il valore 80. A numeri più grandi corrisponde una velocità di scorrimento più piccola. Le espressioni colorate di blu possono essere sostituite da altre di vostro gradimento. 

Demo
Clicca qui