Come inserire bottoni per spostarsi dal basso in alto dei post di Blogger e viceversa.

Nei blog che abbiano una home page con molti articoli oppure in cui vengano pubblicati dei post molto lunghi o che abbiano molti commenti c'è la necessità di effettuare molto spesso uno scroll della pagina per andare in fondo o per tornare all'inizio della stessa. In questo post vediamo 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.

Per testare il funzionamento di questi bottoni di navigazione recatevi nel Post di Demo dei bottoni di navigazione. L'aspetto dei bottoni varierà quando sono puntati con il mouse con un classico effetto hover

Il sistema di installazione è molto semplice visto che basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice in Sezioni del sito

<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:400px;    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 salva l'elemento senza digitare il titolo e non occorre neppure posizionarlo.I due URL delle immagini colorati di rosso rappresentano le immagini dei pulsanti. Quelli presenti nel codice mostrano i pulsanti secondo lo stile della prima icona. Ecco qui di sotto gli indirizzi delle altre icone

1. Stile N° 1 -
2. Stile N° 2 -
3. Stile N° 3 -
4. Stile N° 4 -
5. Stile N° 5 -

Basta cliccare sopra ai link e copiare l'indirizzo dalla barra del browser per poi inserirlo due volte nel codice al posto di quelli colorati di rosso. I due parametri bottom:400px; right:8px; determinano la posizione dei bottoni nel layout. In questo caso sono 400 pixel più in alto del bordo inferiore e 8 pixel sulla destra. Oltre a variare il numero dei pixel si può sostituire bottom con top e right con left per calibrare la distanza (sempre la stessa per l'attributo fixed) dai bordi del layout. Unica pecca di questa interessante personalizzazione è che non funziona con Internet Explorer. Non è una novità e gli utenti di questo browser si dovranno accontentare di fare lo scroll della pagina direttamente con il mouse.