Come Caricare l’Icona ‘Torna ad Inizio Pagina’


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! 

overlays su Picmonkey

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 () {
   $(&#39;.go-to-top&#39;).click(function () {
   $(&#39;html,body&#39;).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
go to top icons




Allora buon divertimento e già che ci siamo, ottimo week-end a tutte voi! Alex


20 commenti :

  1. Cara Alex, grazie per le spiegazioni, chiare e precise come sempre. Ho seguito per filo e per segno le tue indicazioni e... voilà l'icona è al suo posto.
    Grazie!
    Un abbraccio
    Sara

    RispondiElimina
  2. WonderAlex!

    Io vorrei taaaaaaaaaaaanto sapere come hai aggiunto sta vasca da bagno in fondo al post....credo di aver capito smanettando un po' ma senza mai modificare la finestra che credo sia da modificare...

    E bello che hai messo un link in spagnolo, me lo tengo!

    RispondiElimina
    Risposte
    1. Ciao Fra, non modificare alcuna finestra ciccia! Ti basta disegnare la tua firma che vuoi inserire alla fine di ogni post, poi la carichi online e poi segui questo tutorial per installarla nel blog http://www.ideepercomputeredinternet.com/2013/06/firma-blogger-post.html

      E' facilissimo e ti consiglio di usare il primo metodo descritto nel post.

      Gia' terminate le vacanze? Siete a casa?

      Elimina
  3. Ciaoooo alex farto amche questo lo abbiamo aggiunto!!grazieeeee mille sei una fonte inesauribile di idee!!!!un bacione!!!

    RispondiElimina
  4. Ma sei troppo preziosa...per me una bibbia...non ne capivo niente prima
    grazie

    che bello il tuo blog.... ti va di seguirci a vicenda?

    Nuovo post su
    http://emiliasalentoeffettomoda.altervista.org/
    Grazie
    Mari

    RispondiElimina
  5. Alex, volevo linkare la conclusione della tua raccolta per attività da fare con i bambini della scorsa estate, ma faccio fatica a risalire al post... anche la pagina attività mi fa vedere solo gli ultimi risultati, o forse sbaglio qualcosa io?

    RispondiElimina
  6. questa mi sembra proprio un'ottima idea, molto spesso capita di dover tornare a inizio pagina dopo un lungo elenco di post, e non c'è nulla di più comodo di un pulsante!
    grazie.
    Mary V

    RispondiElimina
  7. Grazie Alex!

    Vacanze finite, pensa siamo andati in Croazia in auto (da Modena eh) e passando a San Donà di Piave ti ho pensata! Ma tanto eh! Specie al ritorno quando ci ha fermati la polizia al ritorno sotto al diluvio a mezzanotte perché andavamo troppo piano!! Era il 9 luglio, magari ti ricordi quello che scendeva dal cielo!

    Dai un'occhiata al mio blog e poi ti chiederò il Blog Anatomy!

    Ora vado a vedere il link di ernesto

    Besos guapa!

    RispondiElimina
  8. ciao Alex tu sei bravissima a spiegare anche nei dettagli,ma per me non è sufficiente, comunque hai trovato la soluzione anche per quelli come me e una freccia tanto desiderata adesso fa bella mostra anche nel mio blog grazie DAVVERO un GRANDE saluto con buon ferragosto.

    RispondiElimina
  9. E se non troviamo /body> nell'elenco di voci html???

    grazie

    www.ilblogdisposamioggi.com

    RispondiElimina
  10. Ciao Alex! Io ho creato l'icona inserendola nel blog di prova che tengo molto caro! Ma ahimè, nel corpo HTML del blog non trovo l'espressione /body> indicata....La parola body tante volte....Come faccio a rallentare l'ascesa della freccia? Grazie

    RispondiElimina
  11. uff, provato...ma niente. l'immagine non è posizionata come la tua, ma più al centro della mia pagina e quando clicco l'immagine non fa scorrere la pagina in alto, ma si apre un'altra pagina dove fa visualizzare il box di html\java di loyout di blogger. dove ho sbagliato? eppure ho copiato il tuo codice e messo il link diretto dell'immagine. grazie per la pazienza

    RispondiElimina
  12. e anche questa è fatta!!!!
    thanks cara Alex!
    ^_^

    RispondiElimina
  13. wow è troppo bello il bottonee :D grazie mille! ottimo tutorial ! per ora ho messo un bottone preso dal blog spagnolo.. potresti fare un tutorial su come crearlo da noi? magari anche con pic monkey
    ti ringrazio tantissimo!!

    RispondiElimina
  14. Ciao Alex, fatto!!!!
    Dopo aver messo le icone sociali ho messo anche questo bel bottoncino che ho creato su picmonkey! Però...però!!!!!
    Come diavolo faccio a diminuire la parte finale della pagina (quella di attribuzione del template di blogger per intenderci!) del blog??? Quando arrivo lì la mia icona "Torna a inizio pagina" scompare!!!

    RispondiElimina
  15. Ciao!
    Fantastico questo tuo tutorial. In pochi minuti sono riuscita a realizzare un bottone tutto mio!!!
    Grazie!

    RispondiElimina
  16. Mi stai salvando il blog!! :) Aggiunta facilissimamente!
    Grazie!
    Ilaria

    RispondiElimina
  17. illuminante! adewsso ho anch'io la freccina per tornare a inizio pagina!!^^

    RispondiElimina
  18. Ciao Alex,ho seguito alla lettera le istruzioni, la freccia appare, ma non fa tornare su, non so il perchè. Ho inserito tutto correttamente. Mi puoi aiutare?

    RispondiElimina