Come inserire una immagine fissa con link e icona di chiusura.

L'obiettivo di questo post è quello di illustrare come mostrare in una posizione predeterminata del blog una immagine che abbia un collegamento a un sito o a un feed e che possa essere nascosta dal navigatore. Questa personalizzazione può avere gli utilizzi più svariati. Può essere un invito a sottoscrivere i feed del sito oppure a iscriversi alla pagina fan su Facebook. E' possibile anche pubblicizzare un altro sito o anche sensibilizzare i lettori su una campagna di opinione. Mi viene anche in mente anche un suo possibile utilizzo per promuovere un evento o per ricordare un appuntamento in rete. Ho pubblicato, come mio solito, una dimostrazione dell'effetto in un mio blog.

• Demo della immagine flottante con icona di chiusura -

Se ci cliccate sopra, accederete a questa stessa pagina, mentre se andrete sulla icona rossa, la nasconderete alla vista

Naturalmente può essere cambiata l'immagine e le sue dimensioni, l'icona di chiusura, l'URL della pagina collegata e la posizione dell'immagine in relazione al layout del blog. Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget, cercate la solita riga </head> e, immediatamente sopra, incollate il

• Codice della immagine flottante -

Successivamente si cerca l'altra riga </body> e si incolla subito sopra il seguente blocco

<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target='_blank'><div id='ImmFlottante'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlX9n_ay28SU57ekbajfTvPEOQLqZ1ifgx8hT1qPpvlTXZCwe3XR9sJKjsezdr3EQhn8DRXcRa4B7PdQCEanN7Xj6x_Z8i5YRXHFohcyKKuLQnzCUqZswbQkPWQRhksM-9tv1GQnMZ3Ts/'/>
</div></a>

Per finire, subito sopra alla riga ]]></b:skin> si incolla quest'ultimo codice

/* IMMAGINE FLOTTANTE */
#ImmFlottante {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6qBQf8K0sWkO2K8IrpdRhGq0MAZFycv0vSm3mZWNdPYZNdrcppfOCAF5gm2m9tcVp427BPKQlcivaFXa2HhCL2BhYe6aTb_IplRgJNMO1jl-YkFSaoCayhM9UK49_Ic8YmvvqP6zVy4/) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

Finalmente si salva il modello. Elenco brevemente le possibili personalizzazioni

1. L'indirizzo di FeedBurner di questo blog può essere sostituito da qualsiasi altro URL.
2. L'espressione target="_blank" serve per aprire la pagina in un'altra scheda
3. L'indirizzo della immagine nel primo codice rappresenta la crocetta di chiusura. Ha dimensioni di 16 pixel e può essere sostituita con un'altra
4. L'indirizzo della immagine nel secondo codice è l'immagine flottante principale
5. Si può scegliere di altre dimensioni rispetto ai 128 pixel dell'esempio. In questo caso vanno cambiati i valori di width e height 
6. Con questo codice l'immagine andrà in basso a destra esattamente sul bordo del layout. Al posto di 0px possono essere inseriti altri valori per distanziarla dai lati. Se invece di bottom e right si utilizzano top e left per mettere l'immagine per esempio in alto a sinistra, dobbiamo modificare anche la classe .close dell'icona di chiusura. Con questo codice la crocetta va sulla destra a una distanza di 10 pixel.
7. Al posto di fixed possono essere inseriti altri valori.