Come mostrare un avviso fisso o fluttuante (Post-it) su Blogger con link a Facebook, Google+ e Twitter.

Come mostrare un avviso fisso o fluttuante in un sito per comunicazioni importanti ai lettori con icona di chiusura e link ai social network.

Chi possiede un sito spesso ha l'esigenza di comunicare ai lettori una importante informazione. Può essere quella di dover abbandonare il blog per un certo periodo di tempo, di non poter rispondere ai commenti per sopravvenuti impegni, di aver realizzato un nuovo progetto da condividere o altro ancora.

L'avviso con cui si vuole comunicare una novità ai lettori deve essere ben visibile ma anche non invasivo. Ci deve quindi essere un sistema semplice per poterlo nascondere all'occorrenza. Un avviso di questo tipo può essere utile anche per pubblicizzare una campagna di sensibilizzazione o per fare partecipi i lettori di un evento sportivo, cinematografico, teatrale o musicale.

L'avviso che vi propongo ha questo aspetto che però può essere personalizzato

Si tratta di una soluzione più sofisticata rispetto al banner da visualizzarsi nella parte alta del layout che darebbe problemi di coabitazione con il banner della Cookie Law. Lo stile dell'avviso che vado a illustrarvi ha nella parte alta una icona per nasconderlo dopo averlo letto e nella parte bassa le icone dei più importanti social network con i relativi collegamenti.

Per la sua installazione non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style type="text/css">
#avviso{
width:400px; /* Larghezza del box */ padding:5px; position:fixed; z-index:99999;
}
.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: Georgia;
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="Georgia" 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 qui il comunicato testuale ….
<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>

Si clicca su Salva. Qui sotto ci sono le due Demo per Avviso Fisso e Avviso Flottante

Demo
Clicca qui

Demo
Clicca qui

Le personalizzazioni più importanti riguardano:

1. Con position:fixed; l'avviso avrà un posizionamento fluttuante. Se si sostituisce con position:absolute; il posizionamento sarà fisso in un punto determinato del layout
2. I parametri left:20px; top:200px; posizionano l'avviso a 20 pixel dal bordo sinistro e a 200 pixel dal bordo in alto. Nel caso si sia scelta l'opzione fluttuante questa posizione rimarrà invariata allo scorrere della pagina.  Alternativamente si possono usare anche i tag right e bottom.
3. Il parametro width:400px è la larghezza del box dell'avviso mentre l'altezza dipenderà dalla quantità di testo inserito
4. Il parametro border:4px double #940F04; è lo stile del bordo  del box
5. Il parametro box-shadow è l'ombreggiatura del box con il codice del colore #909090;
6. Il parametro #FFEAE9; è il colore di sfondo del box
7. Il tag color: #003366; è il colore del testo dell'avviso
8. #B4045F; è il colore del titolo dell'avviso e #BA55D3; quello della ombreggiatura
9. CHIUDI è la scritta che si visualizza accanto all'icona per chiudere la finestra
10. AVVISO è il titolo della comunicazione
11. A …… Inserire qui il comunicato testuale … si sostituisce il testo dell'avviso
12. Vanno sostituiti gli URL dei link alle icone di Facebook, Twitter e Google+
13. Gli URL delle icone dei social e della chiusura sono colorati di viola e si possono sostituire. 
14. Possono essere personalizzati inoltre le dimensioni dei caratteri del titolo dell'avviso e del testo oltre che la famiglia di font usata per l'avviso stesso (Georgia).