Come inserire un avviso fisso o flottante in un blog con link a Facebook, Twitter e Google+.

Se si ha la necessità di comunicare qualcosa ai navigatori possiamo pubblicare un post oppure inserire una scritta scorrevole nella parte alta del sito affinché l'informazione sia maggiormente visibile. Se si vuole essere sicuri che sia il lettore fisso sia il lettore casuale leggano una nostra comunicazione, il modo più sicuro è quello di inserire nel blog una specie di post-it immateriale.

Si tratta in sostanza di un banner che può essere installato in una posizione fissa della pagina o in modo flottante per farlo rimanere sempre nella stessa posizione. Tale banner deve dare al lettore la possibilità di nasconderlo per visualizzare i contenuti della pagina nella loro interezza:

1. Demo di Avviso flottante -
2. Demo di avviso fisso -

L'aspetto del post-it che ho realizzato è quello di un rettangolo arrotondato ma gli utenti di Internet Explorer vedranno solo un rettangolo ad angoli retti perché quel browser supporta male alcuni tag tipo border-radius o box-shadow.

In alto a destra è visibile la scritta Chiudi con la relativa icona. Per l'installazione di un avviso di questo tipo non occorre modificare il modello. In basso a destra sono state inserite anche tre icone con collegamenti ai nostri account di Facebook, Twitter e Google+, diventato da poco aperto a tutti. E' sufficiente incollare il codice seguente in Design > Modifica HTML > HTML/Javascript.

<style type="text/css">
#avviso{
width:400px; /* Larghezza del box */
padding:5px; position:fixed; z-index:5000;}
.box-avviso{
border:4px double #940F04; /* Colore del bordo */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #909090; -moz-box-shadow: 8px 8px 6px #909090; box-shadow: 8px 8px 6px #909090;
background-color: #FFEAE9; /* Colore di sfondo */
padding: 8px; font-family: Verdana, Geneva, sans-serif;
color: #003366; /* Colore del testo */
}
.testo-avviso { /* Stile di AVVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>
<div id="avviso" style="left:20px; top:200px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">CHIUDI</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJ2Cu2aQbFfNMZ1xIiSavkyuOXeSb8gBio3wnxn0cR75v3K51LjuwpRmaxn15plKVs9C5SFl4-yo64-5Ie4S7M7Onn9qzZyFxP9af933NCCPKmds0naZt_oQ7WHXnukYwdONjgwMXCoY/" style="vertical-align:middle;"/></a></b></div>
<br/>
<fieldset class="box-avviso">
<legend class="testo-avviso" align="center">AVVISO</legend>
  ……   Inserire il messaggio ….
<br/><div align="right"><a href="http://www.facebook.com/parsifal32" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqbppwu0_ucqNchXzmCIhwdwnjqjBLfn6RrJDvTFMQnJ-Yzm5X-pAthNNtnaaR12O9kHZI3JQiHAEU9Da930K1IO8NTS0sTewAv-mVgDLPHjmtxyVGxrRHu4jR6H-k9FjgXVCP55sTPwE/" width="24"/></a>
<a href="http://twitter.com/parsifal32" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqW27z6HlZCj4g24uY5oFj5x9DRnHfRhxoTjQXWs8szLCUrCJopiHPgh6zxRz2rAvn5B8Q6ddCkekPVbRWs0mfNe8GNl5Nun30o9b_38PagcY2hUn7cqGNm4ieyS9oTajqE3CtBLt7O14/" width="24"/></a><a href="https://plus.google.com/111056841635962157738/posts" target="blank"><img style="margin-left:4px; margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDmxXrj7xt8CFq5IE7K08N_96B1jIFtQdAricTfzVhvk-ft4tZt_RVf2hV9IUJ8QyZqtmNxNTkP8dIo608CAqBUapx49Sh_gBxXMgMFMsnECYX3YyNG_XseRW8Ikml8lA0gfrQdGG9ts/" width="26"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("avviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>

La personalizzazione più importante riguarda la terza riga. Con position:fixed; l'avviso sarà flottante e rimarrà immobile allo scorrere della pagina. Invece con position:absolute; manterrà la posizione che ha rispetto al layout del blog e scorrerà insieme alla pagina. Altri due parametri fondamentali sono quelli individuati dalla riga <div id="avviso" style="left:20px; top:200px; padding:0;">. Fissano la posizione rispetto ai bordi del blog. Invece di left e top possono anche essere usati i tag right e bottom. Si possono anche usare dei valori negativi. Questi valori possono variare di molto a seconda del modello di blog, della sidebar in cui viene inserito l'elemento pagina e in funzione di altri fattori. Per trovare i parametri giusti non resta che fare dei test con numeri diversi.

Gli altri parametri vanno personalizzati in questo modo:

1. width:400px è la larghezza del box dell'avviso
2. border:4px double #940F04; è lo stile del bordo del box
3. 10px; è il raggio di curvatura degli angoli del box
4. box-shadow indica l'ombreggiatura del box con il colore grigio #909090;
5. #FFEAE9; è il colore di sfondo
6. color: #003366; è il colore del testo dell'avviso
7. #B4045F; è il colore del titolo dell'avviso e #BA55D3 quello della sua ombreggiatura
8. CHIUDI è la scritta che si visualizza accanto all'icona per chiudere la finestra
9. AVVISO è il titolo della comunicazione
10. In …… Inserire il messaggio ….  si incolla il testo che si vuole visualizzare all'interno del box
11. Al posto di parsifal32 mettete il vostro nome utente Facebook e Twitter e sostituite l'ID del mio account Google+ con il vostro. Si ottiene facilmente copiandolo dalla barra degli indirizzi del browser.

I link ai tre social servono per dare al navigatore la possibilità di avere informazioni ulteriori rispetto a quelle lette nell'avviso. Questo post-it può servire a per avvertire che non si potrà rispondere ai commenti per impegni improvvisi, per informare i lettori di un evento importante che stiamo organizzando o a cui stiamo partecipando, per avvertire di una grossa novità introdotta nel blog, ecc…