Come personalizzare il banner del GDPR di Blogger

Come personalizzare testo, colore del testo e dello sfondo, famiglia e dimensione dei font, colore dei pulsanti, nel banner del GDPR di Blogger e come aggiungere un effetto hover, arrotondamento, gradiente e ombreggiatura

Riprendo l'argomento del GDPR a seguito di alcuni commenti ricevuti su questo tema. Ricordo che il GDPR è la norma approvata dal Parlamento Europeo che disciplina la privacy dei cittadini in generale e, in particolare, quella degli utenti che aprono i siti web.

Per mettersi in regola con queste nuove norme i possessori di siti web hanno dovuto modificare alcune cose nel rapporto con i navigatori che arrivano sul loro sito. In particolare, per chi amministra un blog su Blogger, ho pubblicato una Guida sul GDPR per per uniformarsi a tale normativa.

Complessivamente si tratta di nove articoli che prendono in esame tutti gli aspetti delle nuove disposizioni sulla Privacy. Google, già ai tempi della Cookie Law, aveva aggiunto a tutti i siti di Blogger un javascript che mostrava in automatico un banner quando si apriva un sito per la prima volta. 

Per visualizzare tale javascript, aggiungete all'URL del vostro sito questa stringa /js/cookiechoices.js, poi incollatelo nella barra degli indirizzi del browser e andate su Invio. Con queste impostazioni di default, l'informativa breve visualizzata nel banner sarà quella ufficiale di Google. Ci saranno anche i bottoni Ulteriori Informazioni e OK, rispettivamente per visualizzare l'Informativa estesa e per proseguire nella navigazione.

Ho già pubblicato un tutorial su come personalizzare l'informativa breve in modo complessivo. In questo post vedremo come scegliere solo le personalizzazioni che ci interessano, tralasciando le altre. Iniziamo su come personalizzare solo il testo della informativa breve sia per desktop che per mobile.

PERSONALIZZARE IL TESTO DEL BANNER DEL GDPR

Si va su Blogger e si salva il Tema per un eventuale ripristino. Si clicca poi su Tema -> Modifica HTML e si cerca la riga </head>, quindi, subito sopra a questa, si incolla questo codice

<!-- Personalizzazione banner cookie e GDPR inizio-->
<b:if cond='!data:blog.isMobile'>
<!-- Banner Desktop -->
       <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito su Blogger usa cookie Google e di altre terze parti per analizzare il traffico, per statistiche e pubblicità personalizzata. Navigando nel blog accetti l\47uso dei cookie e il trattamento dei dati secondo il GDPR.&quot;, close: &quot;OK Accetto&quot;, learn: &quot;+Info&quot;, link:&quot;https://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
</script>
     <b:else/>
<!-- Banner Mobile -->
           <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito su Blogger usa cookie Google e di altre terze parti per analizzare il traffico, per statistiche e pubblicità personalizzata. Navigando nel blog accetti l\47uso dei cookie e il trattamento dei dati secondo il GDPR.&quot;, close: &quot;OK&quot;, learn: &quot;+Info&quot;, link:&quot;https://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
</script>
     </b:if>
<!-- Personalizzazione banner cookie e GDPR fine-->

Si salva il Tema. Se ora si apre il sito con una scheda in incognito si vedrà il banner con questo aspetto

Il nuovo testo è colorato di blu mentre il testo dei bottoni è colorato di viola. Se usate degli apostrofi nel testo utilizzate la notazione giusta, cioè l\47uso al posto di l'uso altrimenti il javascript non funzionerà. Evitate anche simboli speciali e lettere accentate. Al posto dell'URL della mia informativa estesa inserite quello della vostra. 

ALTEZZA BANNER

Quando si modificano i CSS del banner occorre inserire i nuovi CSS tra <style> e </style> . P.e. questo codice

<style>
#cookieChoiceInfo {height:120px;}
</style>

aggiunto sempre sopra alla riga </head> mostrerà il banner alto 120 pixel.

PERSONALIZZAZIONE DEL TIPO, DIMENSIONI E COLORE DEI FONT

Per la personalizzazione del tipo di font, della loro dimensione e del loro colore si usa questo codice

<style>
span.cookie-choices-text {font-size:14px !important; color: #f00 !important; background-color:#D6601B !important; font-family:Georgia !important;}
</style>

che porta a questo risultato

PERSONALIZZAZIONE SFONDO DEL BANNER

Per la personalizzazione dello sfondo del banner, oltre che del colore del testo, si utilizza questo codice

<style>
div#cookieChoiceInfo {
background-color: #1fe0c9 !important;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
span.cookie-choices-text {color: #f00 !important;}
</style>

a cui è stato aggiunto anche il grassetto. Ovviamente vanno personalizzati i parametri colorati di rosso.

Il risultato è mostrato nello screenshot precedente.

PERSONALIZZAZIONE DI COLORE E SFONDO DEI BOTTONI

Si può personalizzare anche il colore e lo sfondo dei due pulsanti. Per esempio questo codice

<style>
#cookieChoiceInfo &gt; a:nth-child(2),a#cookieChoiceDismiss, #cookieChoiceInfo &gt; div &gt; a:nth-child(2) {font-size:36px; background-color:#00f; color:#f00;}
</style>

modifica il colore del bottone di accettazione, lo fa diventare più grande e con un diverso sfondo in questo modo

Per modificare l'aspetto del primo pulsante si utilizza invece quest'altro codice

<style>
#cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1) {font-size:24px; background-color:#f00; color:#00f;}
</style>

che porta a ottenere questo risultato

Evidentemente non occorre usare sempre i tag <style> e </style>. Basta inserire tutti i CSS che ci interessano all'interno di questi due tag. È anche possibile personalizzare in modo indipendente l'aspetto del banner nella versione desktop e nella versione mobile. Prendendo come riferimento il primo codice, si possono aggiungere i CSS per la personalizzazione dell'aspetto del banner da desktop subito sotto alla riga <!-- Banner Desktop -->, mentre i CSS per la versione mobile, vanno incollati subito sotto alla riga <!-- Banner Mobile -->.

SFUMATURA, ARROTONDAMENTO E EFFETTO SCHIACCIAMENTO

Ai pulsanti si può aggiungere anche un gradiente e un effetto schiacciamento, oltre a un arrotondamento dei pulsanti. Il codice da utilizzare in questo caso è il seguente:

<style>
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1) {
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, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1):hover {
color:#4ce6d4;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;left:1px;
}
</style>

che produce questo risultato

Quando si passa con il mouse sopra a un pulsante, questo modifica la propria forma con un effetto schiacciamento. Possono essere modificati tutti i codici dei colori per renderli adatti al nostro layout. Si possono anche scegliere colori e dimensioni diverse per i due bottoni creando due blocchi diversi di codice.

Il primo deve avere il selettore #cookieChoiceInfo > a:nth-child(2) mentre il secondo avrà come selettore span.cookie-choices-buttons > a:nth-child(1). L'effetto Hover si ottiene aggiungendo :hover al selettore e, se non piace, l'ultimo blocco può essere tralasciato. Si può anche personalizzare l'ombreggiatura.