Come mostrare un banner con avviso e link nel blog.

Come installare un banner con un avviso e dei link per notificare ai lettori un importante avvenimento e come lasciare agli stessi la possibilità di nasconderlo.

Ci sono delle occasioni particolari in cui l'amministratore di un sito ha l'esigenza di comunicare ai lettori un messaggio particolarmente importante. Potrebbe essere il caso di un giveaway, di una ricorrenza, di un annuncio di importanti modifiche nel sito, della pubblicizzazione di nuovi prodotti o altro ancora. Il sistema migliorare per essere sicuri che tutti i lettori saranno informati è quello di inserire un avviso che si mostri in tutte le pagine. Visto però che non si deve limitare la visibilità delle stesse bisogna anche inserire un pulsante che permetta al navigatore di nascondere tale avviso.

Seguendo la falsariga del banner per informare i lettori sulla politica dei cookie vediamo come si possa mostrare un banner personalizzabile con un aspetto simile a questo 

Ovviamente il testo visualizzato, i link inseriti e i colori possono essere personalizzati a piacere. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </body> quindi subito sopra a questa si incolla il codice seguente 

<!-- Avviso per i lettori - Inizio -->
<style>
#banner-avviso {
  height:50px;
  width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:#222;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
color:#fff;
border-bottom:solid 2px green;
-moz-box-shadow:5px 5px 5px #333;
-web-kit-box-shadow: 5px 5px 5px #333;
-goog-ms-box-shadow: 5px 5px 5px #333;
box-shadow:3px 2px 4px green;
}
#banner-link
{
color:green;
font:14px georgia;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#banner-link a
{
font:14px georgia;
color:#fff;
text-decoration:none;
}
#banner-chiusura
{
float:right;
margin-top:15px;
margin-right:20px;
}
#banner-chiusura a
{
color:#fff;
text-decoration:none;
font:14px georgia;
padding:3px;
background:red;
border-radius:10px;
}
#banner-main
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("banner-avviso").style.visibility = "hidden";
}
</script>
<div id='banner-avviso'>
<div id="banner-main">
  <p id='banner-link'> <b>AVVISO IMPORTANTE:</b> <a href='URL_DEL_LINK'>  Politica dei cookie del sito </a> | <a href='URL-DEL-LINK'>Per installare questo banner</a></p>
</div>
<div id="banner-chiusura">
<a href="javascript:closesticky();" >X</a>
</div>
  </div>
<!-- Avviso per i lettori - Fine -->

Si salva il modello. La parte del codice evidenziata di giallo può essere personalizzata come ci pare inserendo testo e link ricordandoci di evitare gli apostrofi che possono essere interpretati come codice. Il banner prende il 100% della larghezza ed ha una altezza di 48 pixel. Si possono modificare i codici dei colori e la famiglia dei font oltre alla dimensione dei caratteri.

Non ho testato direttamente ma non vedo alcuna ragione per cui questo banner non possa funzionare anche su Wordpress, su altre piattaforme di blogging o su qualsiasi pagina web in cui venga inserito. Concludo ricordando che volendo si può visualizzare il banner anche in posizione fissa a fondo pagina invece che all'inizio. Basterà solo sostituire top: 0px; con bottom: 0px;.