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

• Widget, video, pulsanti e immagini flottanti -

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.