Pubblicato il 30/05/11e aggiornato il

Come inserire widget, pulsanti e video che rimangano fissi allo scorrere della pagina.

Come rendere fisi nel layout o flottanti i widget di Blogger.
A fronte di una domanda che ho appena ricevuto in un commento ho pensato di scrivere quello che chiamo scherzosamente un "instant post" per rispondere in modo un po' più particolareggiato. La richiesta riguardava la possibilità di inserire una chat nel blog in modo tale da farla rimanere sempre in primo piano anche quando si scorre la pagina. Ho pubblicato un articolo di demo di
Sulla sinistra della pagina vedrete un pulsante per la condivisione su Facebook e un video di Youtube mentre nella parte destra in alto, è visibile la chat CBox che è la mia preferita tra tutte quelle che possono essere inserite in un blog. Per inserire oggetti flottanti o statici che dir si voglia, bisogna andare su Design > Aggiungi un gadget > HTML/Javascript e incollare un codice simile a questo
<div style="position:fixed;top:150px;right:30px;">
Codice dell'oggetto flottante da inserire </div>
Dove al posto della scritta in blu si può inserire il codice di una immagine cioè del tipo
<img src="URL IMMAGINE" title="Titolo Immagine" alt="Testo Alternativo" />
oppure quella di una immagine con collegamento
<a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" title="Titolo Immagine" alt="Testo Alternativo" /></a>
Si può inserire anche il codice di un video preso da Youtube o da altro sito di video sharing e anche oggetti HTML basati su degli script come sono le chat. La posizione dell'oggetto nel layout si determina attraverso i parametri top, bottom, left e right. Indicano rispettivamente le distanze dell'oggetto dalla parte alta, da quella bassa, da quella sinistra e da quella destra.
Nell'esempio di codice, il dato top:150px;right:30px; significa che l'oggetto inserito avrà una distanza di 150 pixel dall'alto e di 30 pixel dalla destra. Basta usare due parametri, uno per ciascuna dimensione. Nello stesso Elemento pagina si possono inserire anche più di un elemento, in questo caso ciascuno di essi dovrà essere inserito in un apposito contenitore <div> con posizioni diverse per non farli sovrapporre




9 commenti :

  1. provato anche con la chat Xat e funziona bene! Articolo molto utile. Grazie!

    RispondiElimina
  2. se inserisco adsense funziona :) ???

    RispondiElimina
    Risposte
    1. @MarcoParrilla
      Non credo funzionerebbe e molto probabilmente sarebbe anche contrario al regolamento.

      Elimina
    2. si scherzavo...visto che va di moda ho inserito il plugin Facebook "Like box" nell'angolo in basso a destra :) ciao e buon lavoro

      Elimina
  3. Ciao Ernesto,
    io ho inserito la barra flottante con i pulsanti Facebook/Google+/Twitter subito alla sinistra del blog; l'unica cosa che non mi piace, è che quando la pagina viene ingrandita la barra va a sovrapporsi ai contenuti del blog.
    Ho visto che alcuni siti come ad es. Giallo Zafferano (es. pagina: http://video-ricette.giallozafferano.it/videoricetta/Sushi.html) hanno lo stesso tipo di barra, che scorre allo scorrere della pagina, ma con la differenza che mantiene la stessa distanza dai contenuti del blog anche con l'ingrandirsi della pagina.

    Ho provato a sostituire l'attributo "fixed" con "absolute": a quel punto la barra si mantiene sempre alla stessa distanza, ma il problema è che non scorre più dall'alto in basso.
    Sai se c'è un modo di impostarla così come nel sito che ti ho citato ad esempio, o hanno utilizzato un javascript creato appositamente per loro?
    Ti ringrazio,

    Giuliana

    RispondiElimina
    Risposte
    1. @# Giallo Zafferano è un celebre portale di cucina che usa Wordpress. C'è il plugin per questa barra per gli utenti di Wordpress che quindi non hanno bisogno di fare nulla. Ci pensa lo sviluppatore a aggiornare il plugin quando funziona male o smette di funzionare. Su Blogger dobbiamo contentarci :)
      P.S. Bella la foto del nuovo avatar!!!

      Elimina
  4. Ciao Ernesto, volevo chiedeterti se è possibile evitare che si ricarichi questo widget ogni qualvolta che navigo nel mio sito. Cioè che rimanga sempre attivo anche se cambio pagina o leggo un post.

    RispondiElimina
    Risposte
    1. In questo post non si parla di un widget specifico ma del mondo in cui visualizzarlo fisso in una data posizione allo scorrere della 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.