COME INSERIRE IL BANNER PER I COOKIE SU BLOGGER

Di
Borza
16
1087

Se siete capitati su questo post cercando “come inserire i cookie in blogger”, probabilmente non sapete di cosa stiamo parlando. Quindi vi linko un post per scoprire cosa sono questi Cookie e a cosa servono. Cosa sono i Cookie e a cosa servono

Probabilmente però a voi interessava sapere come inserire il banner per l’accettazione sui Cookie all’interno del vostro blog di Blogger.

 

COME INSERIRE IL BANNER PER I COOKIE SU BLOGGER

Per inserire un banner per l’accettazione e l’informativa sui Cookie in Blogger dovrete:

1) Creare una pagina per l’informativa dei Cookie.

2) Aprite il pannello di controllo di Blogger e attraverso questa procedura come-trovare-una-porzione-di-codice
Cercate il rigo </body> (vedi foto sotto)

 

3) Trovato? Adesso inserite subito sopra la scritta </body> il seguente codice
<script type=”text/javascript”>
//<![CDATA[
(function(window) {
 
  if (!!window.cookieChoices) {
    return window.cookieChoices;
  }
 
  var document = window.document;
  // IE8 does not support textContent, so we should fallback to innerText.
  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:fixed;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:fixed;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:fixed;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() {
      // Set the cookie expiry to one year after today.
      var expiryDate = new Date();
      expiryDate.setFullYear(expiryDate.getFullYear() + 1);
      document.cookie = cookieName + ‘=y; expires=’ + expiryDate.toGMTString();
    }
 
    function _shouldDisplayConsent() {
      // Display the header only if the cookie has not been set.
      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.showCookieConsentDialog(‘Questo sito utilizza i cookie per migliorare servizi offerti agli utenti.Se decidi di continuare la navigazione consideriamo che accetti il loro uso.‘,
        ‘Chiudi’, ‘Maggiori Informazioni’, ‘http://www.tisemplificolavita.com/p/cookie.html‘);
  });
//]]>
</script>

 

16 Commenti

  1. Grazie per le indicazioni, ma concretamente come faccio a creare nel mio blog una pagina come quella che ho visto sui cookie?
    Grazie.
    Esther

  2. Ciao, se intendi la procedura per creare una pagina te la linko :

    tisemplificolavita.com/2013/04/come-creare-una-pagina-in-un-blog-di.html#.VXE6VOt6p5k

    Se intendi il tipo di pagina informativa nel post, al punto 1, c'è un esempio puoi prendere spunto da li

  3. Ciao Alessio,
    ho provato a seguire le tur istruzioni su come inserire il banner per i cookies su Blogger; quando clikko su Modifica HTML, mi compare il bottone "Vai al Widget" mi compare un menu a tendina con parecchie scelte (Navbar1,Header1,Pagelist1,Blog1,Attribution1,Image1,Label1,HTML1,Stats1,BlogArchive1,Profile1), prima di combinare guai, su quale winget devo andare per inserire il codice?

    Grazie

  4. Ciao AleXio quando ti compare il bottone "Vai al Widget" tu non cliccarci sopra ma invece posiziona il cursore de mouse alla fine della prima riga di HTML

    Poi clicca una volta con il tasto sinistro, la linietta del mouse comincerà a lampeggiare.

    A questo punto se hai un PC esegui sulla tastiera la combinazione di tasti Ctrl+f
    Se hai un Mac digita la combinazione cmd+f.

    Infondo al rigo apparirà una casella di ricerca, scrivici dentro la porzione di rigo che devi cercare, in questo caso vedi il post, e clicca su invio.
    Verrai riportato al rigo di HTML sopra il quale inserire il codice.

    Spero di essere stato chiaro, se hai altri problemi non esitare a contattarmi e fammi sapere se sei riuscito. Ciao!

  7. LLAM ciao, se hai fatto come ti ho detto io si deve vedere per forza, prova ad aprire il tuo blog con un browser differente, cioè se si solito usi Explorer prova ad aprirlo con Firefox o google chrome, per esempio: ( se usi explorer, apri il blog e quando ti appare il messaggio clicchi su "Chiudi", per un anno quando ti colleghi, il messaggio non viene più visualizzato, a meno che non lo apri con un altro browser e così via. Non so se mi sono spiegato. Se sbagli qualcosa nell'inserire il codice ti da errore, prova a cancellarlo e a rifare la procedura, poi fammi sapere!

  13. Ciao Alessio, mi sento un pò impedita, ma seguo esattamente ogni passaggio eppure non riesco, dopo aver copiato e incollato tutto quel lugo link sopra la scritta body, devo cliccare "salva modello"

  14. Fatto! 😉 Ho capito anche dove toppavo! cmq volevo mettere la barra in alto invece che la finestra che si apre al centro dello schermo ma inserendo al posto di Dialog la parola Bar non riesco, devo cancellare e ricopiare tutto la scritta in viola?

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui