Come mostrare nel blog una immagine fissa con icona di chiusura.

Come mostrare una icona fissa nel layout con link a una pagina web e con una icona di chiusura.

Volete creare un banner con un avviso per i lettori che però abbiano la possibilità di chiuderlo dopo averlo letto? Volete mostrare un avviso di un evento, di una campagna di sensibilizzazione? Volete festeggiare una ricorrenza?

Se optate per un messaggio testuale potete seguire le istruzioni su come creare un Post-it da mostrare nel blog con collegamenti ai principali social network. In questo post invece illustrerò come mostrare una immagine fissa nel layout con un collegamento e con una icona di chiusura. Come esempio ho preso una immagine che invita a sottoscrivere i feed del blog che aprirà appunto la pagina dei feed quando ci si cliccherà sopra. L'immagine può essere posizionata indifferentemente in uno dei quattro angoli del layout e può essere sostituita anche da un avviso digitato nella immagine con un software quali Photoshop o Gimp. Sulla destra della immagine si visualizzerà una icona per chiudere la stessa immagine in modo da non renderla troppo invasiva.

L'immagine avrà un collegamento a una pagina web scelta a piacere e potrà essere chiusa dal lettore cliccando sulla icona a forma di croce. L'immagine scelta è puramente indicativa e può essere sostituita con qualsiasi altra. Si possono ovviamente personalizzare anche le sue dimensioni.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa riga si incolla questo codice

<!-- Immagine Flottante Inizio -->
<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}
function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ImmFlottante").style.visibility = "hidden";
}
//]]>
</script>
<!-- Immagine Flottante Fine -->

Si cerca quindi la riga </body> e, subito sopra, si incolla quest'altro codice

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<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>

Infine si cerca la sezione <b:skin> e subito sopra alla riga ]]></b:skin> si incolla

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

Finalmente si salva il modello. Le personalizzazioni riguardano:

1. L'indirizzo di Feedburner di questo sito può essere sostituito da un qualsiasi altro URL a cui indirizzare il lettore che vi clicca sopra.
2. Il tag target='_blank' serve per aprire la pagina in un'altra scheda
3. L'URL colorato di viola nel secondo codice è quello della icona di chiusura di 16x16 pixel
4. L'URL colorato di viola del terzo codice è quello della immagine principale di 128x128 pixel
5. Per modificare le dimensioni delle immagini bisogna operare sui valori di width e height
6. Con questo codice l'immagine si visualizzerà fissa allo scorrere della pagina a una distanza di 80 pixel dalla parte alta e di 40 pixel dalla destra. Al posto di top e right si possono usare anche bottom e left per scegliere uno qualsiasi dei quattro angoli. 

Demo
Clicca qui

Nella Demo l'icona è invece posizionata in basso a destra.