Pubblicato il 09/03/12e aggiornato il

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

bottoni-navigazione

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://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/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://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/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.  





9 commenti :

  1. Già provato! Bellissimo, grazie mi serviva molto ;)

    RispondiElimina
  2. FE NO ME NA LE !!!!
    Ottimo Ernesto e grazie tante

    RispondiElimina
  3. ...dimenticavo: il tuo antipixel è presente nella mia home, col titolo "il mio blogger guru".
    Questo il mio GRAZIE.

    RispondiElimina
  4. @ ...
    Sono contento che sia piaciuto. Sto pensando di presentare anche una versione slide che possa spostare la pagina dall'altro in basso e vicevera con JQuery o Scriptaculous

    RispondiElimina
  5. Risposte
    1. @barbasilico
      Nella Demo funziona poi, come per tutte le personalizzazioni, ci possono essere dei modelli in cui non sono compatibili.

      Elimina
  6. utilissimo grazie!...stavo cercando come fare questa modifica,( http://www.lagattasultettomilano.com/ ) inserire i bottoni di condivisione sopra l'header... questi ultimi li posso creare con PS o un programma simile?. Grazie

    RispondiElimina
    Risposte
    1. @ tilli
      Certamente. Puoi realizzare tutti i bottoni che vuoi, caricarli su Picasa e sostituire l'URL nel codice

      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.