Oggi vorrei prendere ispirazione da un post che ho scritto tempo fa e mai pubblicato e che riguarda appunto la go to top icon, ovvero l’icona che appare nel footer di un blog e che cliccata riporta il visitatore all’inizio della pagina.
Avete presente? La mia icona l’ho
appena disegnata con PicMonkey usando il mio adorato e sempreverde rosa e la
trovate nell’angolino in basso a destra del
blog. Per il mio blog ho pensato ad una semplice freccia ma se l’icona ve la
disegnate da sole, potete sbizzarrivi con colori e testi, l’importante è che non sia troppo intrusiva
col resto del design visto che si tratta di un’immagine che resta fissa.
Se anche voi usate PicMonkey, potete sfruttare gli elementi grafici che trovate alla voce Overlays, tipo un cuore o un cerchietto, e poi inserire al loro interno le frecce rivolgendole verso l’alto. Ricordatevi di usare i colori già presenti sul blog!
Vediamo come installare un’icona del genere sul nostro blog e modificarne il codice se vogliamo rendere l’effetto scroll-to-top {ovvero lo scorrimento verso l’alto} più lento.
Come Aggiungere un’Icona ‘Torna ad Inizio Pagina’
Dopo aver scelto un’icona o averla disegnata, questa andrà caricata online al fine di ottenere il ‘codice diretto immagine’. Tale codice va inserito nello script qui sotto:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="codice diretto immagine"/></a>
Quando il codice è completo, basterà incollarlo in un gadget Html/Javascript dalla pagina Layout {vedi Come Aggiungere un Banner nella Sidebar}.
Come Rallentare la velocità di Scorrimento
Le icone ‘vai a inizio pagina’ mi sono sempre piaciute ma non le ho mai usate perché non mi garbava la velocità supersonica con la quale facevano slittare la pagina del blog verso l’alto.
Ecco perché ne parlo solo oggi che ho scoperto un codicino da inserire nel template del nostro blog per rallentare la velocità di scorrimento della pagina.
Ho prelevato il codice da Blanca di Personalización del Blogs e in particolare dal guest post scritto da Mónica di Cortar, Coser y Crear. Per chi parla il castigliano, leggetevi tranquillamente il post sul blog di Blanca.
Per le italofone, ecco cosa dovete fare:
1. INSERITE UN CODICINO NEL TEMPLATE
- dalla Bacheca di Blogger, cliccate su Modello e fate un backup del vostro template.
- poi andate su Modifica HTML e usando Ctrl + f, aprite il motore di ricerca del template, incollate </body> e cliccate invio.
- una volta individuata la stringa </body>, copiate questo codice sopra ad esso:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script> $(function () { $('.go-to-top').click(function () { $('html,body').animate({ scrollTop: 0 }, 500); return false; }); }); </script>
- cliccate su Salva Modello.
2. AGGIUNGETE IL CODICE NEL LAYOUT
Ora non dovete far altro che installare la vostra icona ‘vai a inizio pagina’ in un widget Html/Javascript.
Il codice html è leggermente diverso dal precedente e vanno aggiunti due comandi {evidenziati in celeste}. Oppure incollate in questo qui sotto l'indirizzo della vostra immagine e siete apposto.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" title=" Back to Top "class="go-to-top"><img src="codice diretto immagine" /></a>
Dove Trovare le Icone
Se vi piacciono le freccette, sappiate che sul blog di Blanca potete trovarne un vasto assortimento e non dovete far altro che copiare il codice relativo all’ icona scelta e incollarlo in un gadget Html/Javascript dalla pagina Layout.
Ecco un esempio delle icone di Como poner un botón de subir arriba
Allora buon divertimento e già che ci siamo, ottimo week-end a tutte voi! Alex
Pacman
Nostradamus
Magical Cat Adventure
Snake