Come inserire una barra di notifica sull'uso dei cookie nello stile di quella di Google.

Come mostrare una barra orizzontale con avviso ai naviganti sulla politica dei cookie del sito secondo i dettami del Garante della Privacy che non scorra con la pagina.

Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Forse non tutti gli webmaster sono a conoscenza del fatto che a partire dal Giugno 2015 dovranno inserire nei loro siti un annuncio che informi i visitatori sulla possibilità che venga tenuta traccia dei loro comportamenti tenuti sul sito. Questo può essere fatto da un programma di affiliazione pubblicitaria ma anche da Google Analytics o da un semplice bottone di Facebook. Si può trovare una trattazione più completa di questo tema nel post dedicato appunto alle determinazioni del Garante della Privacy.

Lo stesso Google ha dato agli webmaster degli strumenti in grado di inserire a scelta una Schermata iniziale in cui il visitatore può cliccare per accettare la politica dei cookie del sito e continuare la navigazione oppure una Barra di Notifica fissa allo scrollare della pagina con la stessa funzione. 

Questa barra si visualizza solo la prima volta che si usa un determinato browser per aprire un sito e successivamente non si aprirà più per un anno a meno che per esempio non si utilizzi la navigazione anonima. In un commento mi è stato fatto notare che Google nei suoi siti e anche nei blog del tipo Blogspot utilizza una barra che non scorre con la pagina ma che è fissa e che sparisce dalla vista.

Tale barra su Blogger viene visualizzata al posto della Navbar la prima volta che si apre un blog gratuito che non abbia eliminato la Navbar. Ho quindi pensato di modificare lo script utilizzato per Schermata Iniziale e Barra di Notifica per realizzare una barra simile a quella di Google.  

Si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla 

<!-- Codice per accettazione cookie - Inizio -->
<script type='text/javascript'>
//<![CDATA[
(function(window) {
  if (!!window.cookieChoices) {
    return window.cookieChoices;
  }
  var document = window.document;
  var supportsTextContent = 'textContent' in document.body;
  var cookieChoices = (function() {
    var cookieName = 'displayCookieConsent';
    var cookieConsentId = 'cookieChoiceInfo';
    var dismissLinkId = 'cookieChoiceDismiss';
    function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
      var butterBarStyles = 'position:absolute;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';
      var cookieConsentElement = document.createElement('div');
      cookieConsentElement.id = cookieConsentId;
      cookieConsentElement.style.cssText = butterBarStyles;
      cookieConsentElement.appendChild(_createConsentText(cookieText));
      if (!!linkText && !!linkHref) {
        cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
      }
      cookieConsentElement.appendChild(_createDismissLink(dismissText));
      return cookieConsentElement;
    }
    function _createDialogElement(cookieText, dismissText, linkText, linkHref) {
      var glassStyle = 'position:absolute;width:100%;height:100%;z-index:999;' +
          'top:0;left:0;opacity:0.5;filter:alpha(opacity=50);' +
          'background-color:#ccc;';
      var dialogStyle = 'z-index:1000;position:absolute;left:50%;top:50%';
      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
          'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';
      var cookieConsentElement = document.createElement('div');
      cookieConsentElement.id = cookieConsentId;
      var glassPanel = document.createElement('div');
      glassPanel.style.cssText = glassStyle;
      var content = document.createElement('div');
      content.style.cssText = contentStyle;
      var dialog = document.createElement('div');
      dialog.style.cssText = dialogStyle;
      var dismissLink = _createDismissLink(dismissText);
      dismissLink.style.display = 'block';
      dismissLink.style.textAlign = 'right';
      dismissLink.style.marginTop = '8px';
      content.appendChild(_createConsentText(cookieText));
      if (!!linkText && !!linkHref) {
        content.appendChild(_createInformationLink(linkText, linkHref));
      }
      content.appendChild(dismissLink);
      dialog.appendChild(content);
      cookieConsentElement.appendChild(glassPanel);
      cookieConsentElement.appendChild(dialog);
      return cookieConsentElement;
    }
    function _setElementText(element, text) {
      if (supportsTextContent) {
        element.textContent = text;
      } else {
        element.innerText = text;
      }
    }
    function _createConsentText(cookieText) {
      var consentText = document.createElement('span');
      _setElementText(consentText, cookieText);
      return consentText;
    }
    function _createDismissLink(dismissText) {
      var dismissLink = document.createElement('a');
      _setElementText(dismissLink, dismissText);
      dismissLink.id = dismissLinkId;
      dismissLink.href = '#';
      dismissLink.style.marginLeft = '24px';
      return dismissLink;
    }
    function _createInformationLink(linkText, linkHref) {
      var infoLink = document.createElement('a');
      _setElementText(infoLink, linkText);
      infoLink.href = linkHref;
      infoLink.target = '_blank';
      infoLink.style.marginLeft = '8px';
      return infoLink;
    }
    function _dismissLinkClick() {
      _saveUserPreference();
      _removeCookieConsent();
      return false;
    }
    function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {
      if (_shouldDisplayConsent()) {
        _removeCookieConsent();
        var consentElement = (isDialog) ?
            _createDialogElement(cookieText, dismissText, linkText, linkHref) :
            _createHeaderElement(cookieText, dismissText, linkText, linkHref);
        var fragment = document.createDocumentFragment();
        fragment.appendChild(consentElement);
        document.body.appendChild(fragment.cloneNode(true));
        document.getElementById(dismissLinkId).onclick = _dismissLinkClick;
      }
    }
    function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) {
      _showCookieConsent(cookieText, dismissText, linkText, linkHref, false);
    }
    function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) {
      _showCookieConsent(cookieText, dismissText, linkText, linkHref, true);
    }
    function _removeCookieConsent() {
      var cookieChoiceElement = document.getElementById(cookieConsentId);
      if (cookieChoiceElement != null) {
        cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);
      }
    }
    function _saveUserPreference() {
// Durata del cookie di un anno
      var expiryDate = new Date();
      expiryDate.setFullYear(expiryDate.getFullYear() + 1);
      document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString();
    }
    function _shouldDisplayConsent() {
      // Per mostrare il banner solo in mancanza del cookie
      return !document.cookie.match(new RegExp(cookieName + '=([^;]+)'));
    }
    var exports = {};
    exports.showCookieConsentBar = showCookieConsentBar;
    exports.showCookieConsentDialog = showCookieConsentDialog;
    return exports;
  })();
  window.cookieChoices = cookieChoices;
  return cookieChoices;
})(this);
document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentBar('Questo sito utilizza i cookie per migliorare servizi ed esperienza dei lettori. Se decidi di continuare la navigazione consideriamo che accetti il loro uso.',
        'OK', '+Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Si salva il modello dopo aver personalizzato il messaggio colorato di blu, i bottoni colorati di rosso e inserito il link alla pagina del sito in cui si sono inserite tutte le informazioni per i navigatori.

ULTERIORI PERSONALIZZAZIONI

Se volete rendere il messaggio e la barra più interessante personalizzando i colori

andate sempre su Modello > Modifica HTML, cercate la riga ]]></b:skin> e, subito sopra, incollate il codice seguente dopo averlo personalizzato a piacere i codici dei colori e la famiglia dei font

/* CSS Accettazione Cookie */
div#cookieChoiceInfo {
background-color: #1fe0c9 !important;
color:#f72c1d;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color: #79ecdf;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
text-align:center;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:Georgia;
font-size:14px;
font-weight:bold;}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#4ce6d4;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;left:1px;
}

Si deve salvare il template. Per maggiori informazioni su questa personalizzazione della barra che scompare allo scorrere della pagina consultate le istruzioni dell'articolo precedentemente linkato. Su questo stesso Tema ho pubblicato altri interessanti articoli:

1.  Il Garante della Privacy e l'utilizzo dei Cookie -
2. Inserire un banner per l'utilizzo dei cookie -
3. Inserire barra di notifica e schermata iniziale direttamente nel modello
4. Personalizzare la barra di notifica con colori di sfondo e bottoni in 3D
5. Come inserire una barra di notifica sull'uso dei cookie nello stile di Google
6. Inserire e personalizzare una barra di notifica sui cookie per Wordpress