Pubblicato il 30/09/14 - aggiornato il  | 2 commenti :

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 

avviso-lettori

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;.


2 commenti :

  1. Ciao Ernesto. Molto interessante!
    Utile e facilmente personalizzabile.
    C'è solo una cosa che non riesco a modificare (ammesso si possa).
    Ho posizionato l'avviso in alto, dove non disturba più di tanto, perché l'header rimane visibile.
    Nella versione mobile (smartphone) il tastino di chiusura, però, esce dal banner, venendo a trovarsi sotto di esso e a lato dell'header. Anche la scritta risulta un po' schiacciata nella parte inferiore del banner, in pratica non è più centrata in altezza. E' possibile posizionare il tasto in maniera che non esca dal banner? Ho provato naturalmente a modificare margin-right:20px con valori diversi, ma non risolvo.
    E' solo una questione estetica, anche di poco conto, però magari tu ha una soluzione.
    Grazie

    RispondiElimina
    Risposte
    1. Onestamente non so come aiutarti. Il post è del 2014 e neppure me lo ricordavo. Poi sono molti anni che non mi occupo più di Blogger, non lo faccio da quando hanno rilasciato gli ultimi template con codici tutti diversi e quindi non personalizzabili.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy