Blogger: pulsanti per spostarsi in alto e in basso della pagina

Come installare su Blogger dei pulsanti top e down con effetto hover, per andare con un solo click in alto o in basso della pagina

Solitamente nei blog su Blogger abbiano una home page con almeno 6 articoli, rendendo la pagina piuttosto lunga. Inoltre, anche per rendere il sito più SEO friendly, pubblichiamo spesso dei post piuttosto lunghi. Infine non è raro, specie nei siti molto visitati, che i nostri articoli ricevano molti commenti.

Il lettore ha quindi la la necessità di effettuare molto spesso uno scroll della pagina per andare in fondo o per tornare all'inizio della stessa. In questo post vedremo come sia possibile inserire dei pulsanti di navigazione, che possono essere messi sulla destra, sulla sinistra, in basso a sinistra o in basso a destra, e che permettano di spostarsi dall'alto al basso della pagina o viceversa con un solo click.

Questa personalizzazione non ha bisogno di librerie esterne, quindi è molto leggera e non incide negativamente nella velocità di caricamento di un sito. Inoltre sarà possibile scegliere il colore dei bottoni, in linea con lo stile del nostro sito. Benché il codice presentato sia stato testato solo nella piattaforma Blogger, non escludo che possa funzionare anche in siti di piattaforme diverse, perché non utilizza nessun tag specifico della piattaforma.

In aggiunta i bottoni utilizzano delle immagini create con il sistema CSS Sprite, che mostrerà un effetto hover quando il lettore passerà sopra ai pulsanti con il cursore. Non ci sarà neppure bisogno di caricare nel web le immagini dei pulsanti per ricavarne gli hotlink, perché l'ho fatto io stesso e vi linkerò gli URL.

Si può scegliere tra questi 5 stili di bottoni

Quello inserito di default nel codice del widget è il primo. L'installazione su Blogger è semplicissima. Si va su Layout -> Aggiungi un gadget -> HTML/Javascript quindi, in Sezioni del sito, si incolla questo codice

<div id="updownbutton"><script type='text/javascript'>
//<![CDATA[
var HIPCEI = "<style type=\"text/css\">#updownbutton .updownbutton, #updownbutton .updownbutton div{    padding:0px;    margin:0px;    border:0px;}#updownbutton .navigation_up_down{    margin:auto;    width:30px;    height:60px;    position:fixed;    bottom:80px;    right:8px; } #updownbutton .navigation_up_down .navigation_up_down_up{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJcd2I6gA-21gmPfx-Cfk7ySge3jOwSNpPOLZiHLz-HO_arz28-4Iwh45FmqUxNAwmnrqnSMvmlA9-TqYkK4-Gac3uxfvwSvjrI_U6Y-TLgSjtU-vdikyVIK1GFEONbTguHwzq4p7ncU/s90/updowngraycircle96.png\');    background-position: 0px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:hover{    background-position: -30px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:active{    background-position: -60px 0px;}#updownbutton .navigation_up_down .navigation_up_down_down{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJcd2I6gA-21gmPfx-Cfk7ySge3jOwSNpPOLZiHLz-HO_arz28-4Iwh45FmqUxNAwmnrqnSMvmlA9-TqYkK4-Gac3uxfvwSvjrI_U6Y-TLgSjtU-vdikyVIK1GFEONbTguHwzq4p7ncU/s90/updowngraycircle96.png\');    background-position: 0px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:hover{    background-position: -30px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:active{    background-position: -60px -30px;}</style><div class=\"navigation_up_down\">    <div class=\"navigation_up_down_up\" onclick=\"window.scrollTo(0,1);window.scrollTo(0,0);\"></div>    <div class=\"navigation_up_down_down\" onclick=\"window.scrollTo(document.body.scrollWidth,document.body.clientHeight*100000);\"></div></div>";
document.getElementById('updownbutton').innerHTML=HIPCEI;
//]]>
</script></div>

Si va su Salva, senza mettere il titolo nel gadget, e si posiziona a piacere nella sidebar. Si sceglie la posizione dei bottoni modificando la riga bottom:80px;    right:8px; che imposta la distanza in pixel dalla parte bassa e da quella destra del layout. Si può scegliere anche di posizionare i bottoni impostando la distanza dalla parte alta e da quella sinistra mediante i tag top (al posto di bottom) e left (al posto di right).

Con i valori del codice di esempio, i bottoni saranno visualizzati nell'angolo in basso a destra, in modo da essere più comodi quando il lettore arriva a leggere l'ultima parte del post o dei commenti. I pulsanti manterranno sempre la stessa posizione in tutte le pagine del sito, perché il codice ha il tag position:fixed; .

Demo Clicca qui

L'URL delle immagini dei bottoni vanno inseriti due volte nel codice. Si può mettere uno dei seguenti 5 URL. Per visualizzare il pulsante relativo, basterà incollare l'indirizzo del browser e andare su Invio. 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJcd2I6gA-21gmPfx-Cfk7ySge3jOwSNpPOLZiHLz-HO_arz28-4Iwh45FmqUxNAwmnrqnSMvmlA9-TqYkK4-Gac3uxfvwSvjrI_U6Y-TLgSjtU-vdikyVIK1GFEONbTguHwzq4p7ncU/s90/updowngraycircle96.png

https://lh3.googleusercontent.com/-J5XTwtLUDDg/T1oX_T_PxzI/AAAAAAAAWyc/WUHB9TAhso4/s90/updownblack96.png

https://lh3.googleusercontent.com/-qNjSpB16A3A/T1oYDPp4FII/AAAAAAAAWyk/xIQYiu0DwXs/s90/updownblue96.png

https://lh3.googleusercontent.com/-KLYDW3tkuFo/T1oYFwblZdI/AAAAAAAAWys/efJHmdeDEIs/s90/updowngray96.png

https://lh5.googleusercontent.com/-VK_7NBAixks/T1oYNrl4HbI/AAAAAAAAWy8/2ynTtHq2Dq4/s90/updownred96.png

Per testare l'effetto hover occorre aprire la pagina della demo e passare il mouse sopra ai pulsanti.