Pubblicato il 20/06/12e aggiornato il

Bottoni floreali per spostarsi a inizio e a fondo pagina.

Bottoni per spostarsi all'inizio e alla fine della pagina con effetto dissolvenza e opacità.
Vediamo come inserire dei bottoni nel layout del nostro blog su Blogger in modo da spostarsi velocemente all'inizio e alla fine della pagine. Ho inserito due bottoni realizzati con una immagine di un fiore che è piaciuta molto a una lettrice ma si possono usare anche delle immagini più asettiche.
 
Vi ricordo che ho dedicato a questo argomento anche un post che però illustrava come inserire il solo bottone per tornare all'inizio  e un altro articolo che aveva anche il pulsante per andare alla fine del post ma non aveva implementato alcun effetto.
 
In questo articolo saranno presentati due bottoni molto simili che permetteranno di spostarsi dal basso in alto e viceversa usando JQuery e un po' di effetto opacità.
 


 
Per l'installazione si va su Modello > Backup/Ripristino e si salva il modello completo per questioni di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il codice seguente

<!-- Bottoni Up & Down con JQuery -->
<style type='text/css'>
.nav_up{
background-color:white;
position:fixed;
background:transparent url(
https://lh4.googleusercontent.com/-gg-q0VjwzSc/T-HNPkYI81I/AAAAAAAAYwg/KHBL98-1VuQ/s125/fiori-inizio.png) no-repeat top left;
background-position:50% 50%;
width:120px; /* Larghezza immagine */
height:125px; /* Altezza Immagine */
top:30%; /* Distanza dal basso */
left:10px; /* Distanza dalla sinistra */
white-space:nowrap;
cursor: pointer;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.nav_down{
background-color:white;
position:fixed;
background:transparent url(https://lh4.googleusercontent.com/-u4TRPXs0mAI/T-HNMIkezWI/AAAAAAAAYwY/WhuKIkb8Nio/s125/fiori-fondo.png) no-repeat top left;
background-position:50% 50%;
width:120px; /* Larghezza immagine */
height:125px; /* Altezza immagine */
bottom:30%; /* Distanza dalla parte alta */
left:10px; /* Distanza dalla sinistra */
white-space:nowrap;
cursor: pointer;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
</style>
 
Si cerca quindi la riga </body> e, subito sopra, si incolla quest'altro codice
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Si salva il modello. Accanto ai parametri evidenziati di rosso sono presenti i commenti che spiegano a cosa si riferiscono. Ricordo solo che le immagini possono essere sostituite da altre a nostra scelta e sarà nostra cura modificarne le dimensioni.

Con questa configurazione le due immagini che portano il visitatore rispettivamente all'inizio e alla fine della pagina sono state inserite sulla sinistra del layout. Se avete un modello in cui stanno meglio sulla destra è sufficiente sostituire left con right nelle due occorrenze. Si può anche mettere un bottone sulla destra e uno sulla sinistra a nostra discrezione.

La riga colorata di blu è la libreria JQuery. Nel caso in cui fosse già presente nel vostro modello si può fare a meno di incollarla. Le distanze delle immagini sono state calibrate al 30% dall'alto e dal basso. Si tratta di valori assolutamente arbitrari e possono essere modificati a piacere.
Fonte | Scrolling to the top and bottom with JQuery -




14 commenti :

  1. Molto bello. Domani provo a inserirlo nel mio blog. ;)

    RispondiElimina
  2. complimenti molto bello,già lo provato e funziona benissimo o solamente cambiato le icone (anche se sono molto belle) nel mio blog ci starebbero poco a tema e le ho spostate a destra,davvero complimenti.

    RispondiElimina
  3. @Ernesto Tirinnanzi
    Che bella sorpresa leggere che per accontentarmi hai pubblicato questo bellissimo post...due rose insieme per andare su e giù....Non ho parole!
    Grazie di cuore! Lo metterò nei giorni prossimi.
    Una ultima domanda . E' possibile creare una sola rosa " fine pagina" separatamente dall'altra di inizio pagina? Se è possibile.
    Un abbraccio
    Kamasa

    RispondiElimina
    Risposte
    1. @kamasa54
      Avevi stimolato la mia creatività :) Le rose le puoi posizionare come ti pare. Una a destra e una a sinistra, una in alto a destra l'altra in basso a sinistra, ecc.

      Elimina
    2. @Ernesto Tirinnanzi
      Ho provato più volte html delle rose inizio e fine pagina separatamente nel mio blog, ma non ci sono riuscita....per cortesia, puoi creare per me una rosa con scritta inizio e fine pagina separatamente a destra con la stessa distanza con quella di inizio pagina al mio blog senza inserire html nel modello template? Se è possibile.
      Grazie mille .
      Kamasa

      Elimina
    3. @kamasa54
      Sono assolutamente negato con i programmi di grafica e non credo riuscirei a creare due rose migliori di quelle che ho fatto. Se vuoi cambiare il testo usa Gimp che puoi scaricare gratuitamente.

      Elimina
  4. Come già detto, ho provato a inserire le due icone del blog. L'effetto era stupendo, ma mi sono accorta che non mi funzionava più il gadget post correlati. Forse perché usa un'altra versione di JQuery?

    RispondiElimina
    Risposte
    1. @Bastet
      E' esattamente per quella ragione. Se hai già JQuery per far funzionare contemporaneamente widget e immagini basta che tu non incolli la riga colorata di blu all'inizio dell'ultimo codice. Sarebbe meglio che aggiornassi anche la versione di JQuery dei post correlati. L'ultima disponibile è la 1.7.2

      Elimina
    2. Ho provato ad aggiornare la versione e anche a non incollare la riga blu del codice, ma non funziona. Così ho seguito la guida nell'altro articolo (riuscendo anche a mettere delle mie icone). Non si vede con IE, ma... pazienza.

      A ogni modo, grazie mille. I tuoi post mi salvano in parecchie occasioni. ;)

      Elimina
    3. @Bastet
      E' strano ma se hai risolto va bene così :)

      Elimina
  5. ciao volevo sapere dove posso trovare delle immagini da sostituire ai fiori...grazie mille

    RispondiElimina
  6. @Samantha
    Puoi cercarle su Google inserendo la parola chiave. Se cerchi delle icone prova su Icon Finder

    RispondiElimina
  7. le immagin le ho,e come faccio ad inserirle? scusa ma sono 1 pò imbranata su queste cose...grazie mille

    RispondiElimina
    Risposte
    1. @samanthastreghetta
      Le immagini le devi caricare su Picasa seguendo le istruzioni di questo post
      http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
      E' un po' vecchio e quindi la grafica potrebbe essere un po' mutata. Dopo aver ottenuto il link diretto tramite Copia URL Immagine devi incollarlo al posto di quelli colorati di rosso nel codice, vale a dire questo
      https://lh4.googleusercontent.com/-gg-q0VjwzSc/T-HNPkYI81I/AAAAAAAAYwg/KHBL98-1VuQ/s125/fiori-inizio.png
      per andare a inizio pagina e quest'altro
      https://lh4.googleusercontent.com/-u4TRPXs0mAI/T-HNMIkezWI/AAAAAAAAYwY/WhuKIkb8Nio/s125/fiori-fondo.png
      per andare a fondo pagina

      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.