18.9.12

Inserire immagine fissa...

18.9.12

... che scrolli verso l'alto la pagina del nostro blog.

Ovvero inserire un'immagine che dica all'utente 'torna su!'
Perdonatemi a volte sono negata con i titoli XD

Come si fa???

Innanzitutto dobbiamo creare un'immagine (se non avete photoshop, va bene anche paint, altrimenti vi proporrò fra poco una utility online da perdere la testa).
Fatto ciò, carichiamola nel nostro blog (vi consiglio quello che di solito faccio, ovvero aprire un post dal titolo IMMAGINI e caricare ciò che vi serve di 'stramano'... ovviamente il post salvatelo solo senza pubblicarlo :D )

Una volta caricata l'immagine, e ottenuto il suo URL (cliccaci su col tasto dx e poi fai 'COPIA URL IMMAGINE'), vai in 'LAYOUT' e 'AGGIUNGI UN GADGET'.
Scegli il gadget 'HTML/JavaScript' ed incolla questo codice:
<div style="position:fixed; bottom:0px;right:0px;float:right;z-index:1;"><a href="#"><img alt="TORNA SU!" src="INSERISCI QUI IL LINK DELLA TUA IMMAGINE" /></a></div>
Incollato così il codice ti farà comparire l'immagine nella stessa posizione in cui vedi la mia coccinella in basso a destra.

Se vuoi fare una prova semplice, puoi prelevare il codice qui sotto con l'immagine da me creata.
<div style="position:fixed; bottom:0px;right:0px;float:right;z-index:1;"><a href="#"><img alt="TORNA SU!" src="http://2.bp.blogspot.com/-rUPflDKu6uo/UFdb5ip_J7I/AAAAAAAADDc/OifEdytF_0U/s1600/up.png" /></a></div>

40 commenti:

  1. Ciao Simona! Grazie! Ho in mente un tutorial da chiederti, appena ho un po' di tempo te lo scrivo!
    Baci Federica

    RispondiElimina
  2. Grazie Simona!
    Anche questo articolo è interessantissimo.
    Devo pensare cosa potrei inserire in quest'immagine,
    ho troppo voglia di aggiungerla al mio blog.

    Baciotti
    Mary

    RispondiElimina
    Risposte
    1. beh nel tuo caso sarebbe bello mettere il tuo gufo :D

      Elimina
    2. Sì, mi piacerebbe proprio!
      Vorrei mettere un'immagine Gufesca,
      ma che colleghi una pagina con un link esterno, è possibile?
      Dalle prove che ho fatto mi pare di aver intuito
      che l'immagine, se deve riportare ad un link esterno,
      deve essere lei stessa nella pagina di questo link esterno, vero?

      Elimina
    3. Forse è possibile inserire un link all'immagine posizionata altrove?

      Elimina
    4. no, non deve essere necessariamente così!!! ciò che è racchiuso nel tag <a href="#"></a> è il link che porta l'utente dove vuoi tu...ora se vuoi farlo andare, ad esempio, nel tuo shop, che si trova quindi al di fuori del tuo blog, devi sostituire 'cancelletto' con il link dello shop.

      Elimina
    5. Ma grazie!
      Sei un Angelo!
      Ora ci provo subito!

      Baciotti!
      Mary

      Elimina
    6. Grazie, grazie, grazie!!!
      Ce l'ho fatta!!!

      Elimina
    7. evvai sono contenta :D ed è bellissimo con quegli occhioni!!!!!!!!!!! bravissima!!!

      Elimina
  3. Utile, utile utilissimo!
    Bacio!

    Elisa

    RispondiElimina
  4. bravissima ^^ graziiiiiiiiie ^^
    ma il sito che consigliavi ??

    RispondiElimina
    Risposte
    1. il sito è docs.google.com, grazie al quale si può disegnare un logo semplice...
      ho appena finito di editare un video tutorial su come caricare i files PDF per renderli visibili e stampabili alle nostre utenti (utile magari per chi ha dei pattern da far stampare)...appena metto a posto il microfono (perchè coi sottotitoli è stato un lavoraccio di un'ora -.-) registrerò una serie di mini tutorial utili per i nostri blog ;)

      Elimina
  5. Vorrei apportare delle modifiche al mio blog e spero di riuscirci con i tuoi consigli :) nuova follower, passa anche da me se ti va :-*
    http://themakeupworldofalittlefairy.blogspot.it/

    RispondiElimina
    Risposte
    1. certo che passo ;) e benvenuta!!!!!!!!!

      Elimina
  6. Ciao non riesco!! Cioè ci riesco ma la mia immagine anche se salvata in png ha lo sfondo bianco, non riesco a rendere l'immagine trasparente uffa, mi aiuti? grazie Michela

    RispondiElimina
    Risposte
    1. ciao Michela, non disperare!!! vedrai che insieme ce la faremo :D... all'interno del codice style="...." prova ad aggiungere dopo il 'z-index:1;' questo 'background:transparent;' .... mi raccomando copia il codice all'interno delle virgolette!!!

      Elimina
    2. Grazie, di queste cose non capisco niente! Ho scritto così, credo ma mi esce ancora lo sfondo
      , cosa sbaglio? Grazie

      Elimina
    3. ok allora ora ho visto l'immagine che ieri sera non mi era apparsa...ed effettivamente ha proprio lo sfondo bianco di suo, così mi sono presa la libertà di fartene uno io, se per te va bene :) lo puoi scaricare direttamente cliccando qui:
      https://docs.google.com/drawings/pub?id=1ew1-lO8AoE1fL2jqMmdhicMxr9poirxEAHo2wEO8uvE&w=169&h=193

      Elimina
    4. Non ho parola sei gentilissima!!! Ti metto nella pagina dei miei link! Ho delle proposte per "proponilo tu" appena ho tempo lo faccio! grazie grazie Michela

      Elimina
    5. Mi piace un sacco!!!!!!!!!!!!!!!!! Grazie Michela

      Elimina
  7. Ciao Simona! Ho provato a mettere il gadget "torna su", e ci sono anche riuscita. L'unica cosa è che l'immagine viene troppo grande.
    Mi sai dire che dimensioni deve avere la foto? Credo che dipenda da questo!
    Grazie per tutto quello che condividi con tutte noi :-)

    RispondiElimina
  8. Simona sono andata per tentativi e ci sono riuscita!!!
    Che soddisfazione..... Il merito è tuo, grazie!

    RispondiElimina
    Risposte
    1. Troppo buona Giorgia, ma credo che il merito sia tutto tuo, io ho solo suggerito, tu hai applicato :D

      Elimina
  9. Grazie alle tue spiegazioni (tra l'altro molto chiare) ci sono riuscita anch'ioooo!!! non ci posso credere!!
    grazie mille!!
    Emanuela

    RispondiElimina
  10. Grazieeeeeeeeeee ora provo subito.
    Era da tantissimo tempo che cercavo nel web come fare, ma come te, non sapevo come "chiamarlo"
    Ciaooo

    RispondiElimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  12. Fantastico!!! L'ho appena aggiunto al mio blog!!! :D

    RispondiElimina
  13. ciao Simona!
    grazie per il codice! l'ho appena messo
    Ma se lo volessi come il tuo? cioè che compare dopo un paio di scrollate di mouse
    e poi la pagina torna su lentamente e non "sparata"?
    è troppo complicato?
    grazie sempre!
    germana

    guarda come l'ho messo, più di così nin so...
    http://sopralatorta.blogspot.it/

    RispondiElimina
    Risposte
    1. Ciao Germana!
      Io il codice l'ho preso da questo sito: scrolltotop.com
      E' di una semplicità unica nell'inserirlo, perchè ti basta incollarlo subito prima del tag di chiusura /body del tuo codice html ;)

      Elimina
    2. il codice di tre righe in corrispondenza delle freccette?
      ma così mi da la sua freccetta ed io vorrei la mia immagine personalizzata :(

      Elimina
    3. Hai ragione...io ho modificato lo script inserendo su uno spazio web esterno da blogger...

      Elimina
  14. grazie di cuore per questa spiegazione semplicissima (io sono un po' dura di comprendonio per questo genere di cose!) ho cercato come una pazza fino a consumarmi gli occhi il sistema per inserire sto bottone.... ovunque leggevo che bisognava andare a cercare la tal stringa nel modello e poi incollare un codice pazzescamente lungo e poi bla bla bla e poi non funzionava un tubo (e ci ho rimesso almeno 3 decimi di vista...) poi capito qui... O Mia eroina!!!! :-)

    RispondiElimina
    Risposte
    1. Ahahahah grazie mille Simo, sei gentilissima ^_^

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*