Pubblicato il 05/11/15e aggiornato il

Come mostrare dei bottoni per spostarsi in alto e in basso di una pagina di Blogger.

Come installare dei bottoni per spostarsi in alto e in basso della pagina di Blogger.
Nei siti che siano soliti pubblicare articoli piuttosto lunghi non è raro visualizzare sulla destra o sulla sinistra due bottoni per facilitare lo spostamento in basso e in alto della pagina. Tale spostamento può essere repentino oppure molto più morbido. La prima soluzione sfrutta un semplice javascript e può essere installata nel sito seguendo le istruzioni del post su come inserire bottoni per spostarsi verticalmente nella pagina.

Per avere uno spostamento meno violento si deve invece utilizzare una libreria javascript come potrebbe essere quella jQuery. Tale libreria può essere già installata nel vostro template oppure dovrà essere fatto sul momento. Come icone ho usato due immagini floreali molto adatte a blog femminili che possono però essere sostituite da altre immagini in tema con il contenuto del sito oppure scegliere semplicemente delle icone a forma di freccia.


fiore-fondo-pagina fiore-vai-inizio-pagina
Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<!-- 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>
dove le immagini con URL colorato di rosso hanno dimensione 120x125 pixel e sono state posizionate rispettivamente al 30% di distanza dalla parte alta e dalla parte bassa. Gli altri parametri hanno accanto dei commenti esemplificativi del loro significato. È stata introdotta anche una opacità al 90% quando si passa con il mouse sopra alle immagini.

Ora si cerca la riga </body> e, subito sopra, si incolla questo nuovo 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. Con questa impostazione le due immagini si visualizzeranno sulla sinistra. Se preferite mostrarle sulla destra basterà sostituire le due righe
 
left:10px; /* Distanza dalla sinistra */

con

right:10px; /* Distanza dalla destra */


I due numeri 800 servono per la velocità di spostamento. Se nel vostro modello fosse già presente jQuery magari con una versione diversa da quella proposta in questo codice è meglio cancellare le due righe evidenziate di giallo. Si può testare il funzionamento direttamente da questa Demo




2 commenti :

  1. Molto utile, ma se io volessi cambiare la scrittura? basta sostituire in 'style type'?

    RispondiElimina
    Risposte
    1. Quale scrittura? Quella delle immagini? Guarda che sono scritte create con Photoshop e aggiunte alle foto dei fiori :)
      Puoi cambiare le immagini e sostituirle con altre scrivendoci quello che ti pare, puoi anche riadattare queste
      @#

      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.