Pubblicato il 27/05/15e aggiornato il

Come visualizzare un avviso per i cookie in una pagina scura prima della accettazione.

Come installare un avviso con oscuramento totale della pagina per l'accettazione dei cookie. Nell'avviso oltre alla informativa breve ci sarà anche i pulsanti per il consenso, quello per l'informativa lunga e quello con le istruzioni per la cancellazione dei cookie.
Con questo articolo concludo almeno per il momento una serie di post per la installazione dell'avviso per i lettori riguardo al'utilizzo dei cookie di profilazione. Dopo aver mostrato la barra personalizzabile, il banner con tre link e l'avviso con oscuramento del sito è la volta delle istruzioni per nascondere il blog e contestualmente mostrare tre link vale a dire il pulsante per l'accettazione, il link per l'informativa estesa e quello con le istruzioni per cancellare i cookie già presenti.

Si tratta presumibilmente della soluzione più radicale e estrema che possa essere usata dagli webmaster che utilizzano la piattaforma Blogger. L'aspetto della schermata può ovviamente essere personalizzato nei colori e nel testo e sarà simile a questo


In un blog su Blogger dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla questo codice

<!-- Accettazione Cookie - Inizio -->
<div id='banner_cookie'>
Questo sito utilizza cookie tecnici propri e cookie di profilazione di terze parti.
<br/>
 Se continui nella navigazione accetti il loro uso.<br/> <a href='javascript:void(0);' onclick='var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie(&apos;info_cookie&apos;,&apos;1&apos;,expiration,&apos;/&apos;);document.getElementById(&apos;banner_cookie&apos;).style.display=&apos;none&apos;;'><b>OK</b></a> | Per <a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html' target='_blank'>+Info</a> sui cookie <br/> Come <a href='http://www.ideepercomputeredinternet.com/2012/10/cookie-browser-chrome-firefox-ie-eliminare.html' target='_blank'>eliminare i cookie</a> già presenti.
</div>
<!-- Stile del Banner -->
<style>
#banner_cookie {
display: none;
z-index: 99999;
position:fixed;
left:0px;
right:0px;
bottom:0px;
top:0px;
width:100%;
padding-top:100px;
background: #000; /* Colore di sfondo */
color:#F2F97F /* Colore del testo */
line-height:60px;  /* Dimensione Interlinea */
font-family:Georgia /* Famiglia di font */
font-size:32px; /* Dimensione font */
text-align:center;
}
#banner_cookie a:nth-child(2),#banner_cookie a:nth-child(3),#banner_cookie a:nth-child(4),#banner_cookie a:nth-child(6) {
padding:2px;
background:#f72c1d; /* Colore sfondo bottoni */
 border-radius:8px;   /* Arrotondamento */
text-decoration:none;
}
#banner_cookie a {
color: #1FE0C9; /* Colore testo bottoni */
font-weight:bold;  /* Grassetto */
 text-decoration: none;
}
#banner_cookie a:hover {
color:#FFF; /* Colore testo bottoni passaggio cursore */
}
#banner_cookie a:nth-child(2):hover,#banner_cookie a:nth-child(3):hover,#banner_cookie a:nth-child(4):hover, #banner_cookie a:nth-child(6):hover {
position: relative;
top:1px; /* Spostamento di 1 pixel al passaggio del mouse */
left:1px;
}
</style>
<!-- Script dei cookie -->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+&quot;=&quot;+escape(value)+((expires==null)?&quot;&quot;:&quot;; expires=&quot;+expires.toGMTString())+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+((secure==null)?&quot;&quot;:&quot;; secure&quot;)}function getCookie(name){var cname=name+&quot;=&quot;;var dc=document.cookie;if(dc.length&gt;0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(&quot;;&quot;,begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+&quot;=&quot;+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+&quot;; expires=Thu, 01-Jan-70 00:00:01 GMT&quot;}}</script>
<!-- Gestione barra dei cookie -->
<script type='text/javascript'>
var ckeck_cookie = getCookie(&quot;info_cookie&quot;);
if (ckeck_cookie != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie(&quot;info_cookie&quot;,&quot;1&quot;,expiration);
document.getElementById(&quot;banner_cookie&quot;).style.display=&quot;block&quot;; }
</script>
<!-- Accettazione Cookie - Fine -->

Si salva il modello. Si apre una pagina del sito con Navigazione Anonima per verificare il funzionamento dello script che inserirà un cookie tecnico della durata di un anno quindi dopo l'accettazione non sarà più visto per questo lasso di tempo. La Demo online deve essere ovviamente aperta con una scheda in Incognito per vedere all'opera questo script


Le personalizzazioni riguradano i codici dei colori, la famiglia di font e la loro dimensione. Particolare interesse ha anche la dimensione dell'interlinea per la distanza tra le varie righe. Per quello che riguarda le due pagine linkate bisogna considerare che queste se facessero parte del sito rimarrebbero oscurate fino a quando il lettore non clicchi su OK. Quindi bisogna linkare la Privacy Policy e la guida per cancellare i link in altri siti come potrebbero essere una pagina di Google Sites o un altro blog creato all'occorrenza. Questo codice funziona anche su Wordpress se incollato su Aspetto > Editor > footer.php subito sopra alla riga </body>.




11 commenti :

  1. Ernesto, mi chiedo e le chiedo: chi gestisce un semplice blog (non commerciale) su piattaforma blogger, come deve comportarsi? Grazie anticipatamente.

    RispondiElimina
    Risposte
    1. Io con questi post cerco di aiutare a capire nei limiti delle mie conoscenze e capacità, aiuto ancher me stesso :)
      @#

      Elimina
  2. Ciao! I tuoi post sono molto utili, solo che spesso mi trovo nello stesso problema, ovvero che non c'é la parte BODY che dici…. come posso fare?

    RispondiElimina
    Risposte
    1. È quasi sempre la penultima riga del modello. C'è sempre è un tag fondamentale dell'HTML. Leggi questi due post e guarda eventualmente anche i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Probabilmente come è successo ad altri non hai ben compreso come si faccia a cercare il codice nel template
      @#

      Elimina
    2. Ce l'ho fatto al primo colpo! Ora ho un'altra domanda (scusami ma non sono molto pratica). Mi viene il messaggio tale e quale al tuo… solo che se poi clicco su INFO mi passa alla tua pagina "Politica dei cookie di questo sito in ottemperanza alla direttiva del Garante della Privacy."… e non riesco a cambiare la grandezza del messaggio, mi piacerebbe che apparisse come nel tuo blog, sotto in piccolo…

      Elimina
    3. Devi inserire l'indirizzo della tua pagina della Privacy al posto di
      http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html
      che nel codice è colorato di rosso. Per la grandezza dei caratterti modifica font-size:32px;
      Se vuoi una scritta come nel mio blog non è questo il post giusto ma quest'altro
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-blogger-wordpress.html
      ricordandoti che per mettere in basso una scritta bisogna sostituire top con bottom in entrambe le occorrenze del codice
      @#

      Elimina
    4. Ok, dopo provo. Grazie mille. Un'ultima domanda, se ho capito bene devo accedere a Google site e creare una specie di pagina dove si vedrà la politica dei coockis quando qualcuno cliccherà su INFO, giusto? e una volta fatto modifichero' l'indirizzo che ora esce "http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html" ? (scusami l'ignoranza… anche nei termini)

      Elimina
    5. … sono nel pallone… mi sono persa e non capisco più nulla… :-(

      Elimina
    6. Sì ma non importa che usi Google Sites puoi creare un altro blog gratuito con Blogger e con quello pubblicare una pagina con la Privacy per poi sostituire l'indirizzo
      @#

      Elimina
  3. Ma quando si ha più di un blog, occorre creare una pagina della privacy per ciascuno, o si può farne una sola valida per tutti?

    RispondiElimina
    Risposte
    1. Non penso. Ho visto su Repubblica che usano una pagina di Kataweb che penso valga anche per Espresso
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.