Personalizzare la barra dei cookie ufficiale per Blogger


Come sostituire il link, modificare il testo, personalizzare i colori della barra ufficiale per il consenso dei cookie su Blogger.
Il primo segno che qualcosa stava per cambiare su Blogger è stata l'introduzione della barra dei cookie in sostituzione della navbar. Questa scelta è risultata un fiasco sia perché pochi utilizzano la navbar sia perché non funziona nella versione mobile del blog. Dato che le leggi dell'Unione Europea impongono che i visitatori residenti nell'Unione vengano avvisati dell'utilizzo dei cookie su un sito o blog, quelli di Blogger hanno introdotto un codice nel modello in modo permanente. Per togliere la nuova barra dei cookie di Google c'è un procedimento insolito e quindi non si potrà mai togliere per errore.

Questo è l'avviso apparso a tutti nella sezione Panoramica dal pannello di amministrazione di Blogger:



Potrebbe sembrare una buona notizia ma chi ha già utilizzato un metodo diverso per aggiungere la barra dei cookie manualmente, si è trovato ad avere due barre per il consenso dei cookie. Questo significa che una delle due va tolta; mi sento di suggerire di lasciare quella di Google perché si può ugualmente personalizzare come quella utilizzata in precedenza, quindi dell'altra dovrete eliminare sia il codice dello script sia il codice css delle personalizzazioni.

Per personalizzare la barra dei cookie ufficiale per Blogger dovete andare su Modello > Modifica HTML e poi cercare il tag </head> (da non confondere con <head>) e prima di esso dovrete andare ad aggiungere il seguente codice:
<script type='text/javascript'>
cookieOptions = {msg: "Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Navigando nel blog accetti l'uso dei cookie.", close: "OK", learn: "+Informazioni", link:"http://www.scuolissima.com/2012/11/disclaimer-scuolissimacom.html"};
</script>

Questo codice vi permetterà di modificare la dicitura della barra, le parole contenute nei due pulsanti e il link dell'informativa estesa. Per impostazione predefinita Blogger inserisce la sua pagina dei cookie, ma dato che molti utilizzano cookie di terze parti come quelli di Facebook e Twitter, è consigliato sostituire il link predefinito con quello della propria Privacy/Policy.


Personalizzazioni

La barra ufficiale dei cookie introdotta da Google si può facilmente personalizzare utilizzando il css. Questo è il codice css che ho utilizzato per la mia barra, va copiato prima del tag ]]></b:skin> del modello, sentitevi liberi di copiarlo e/o modificarlo:
/* CSS Barra dei Cookie */
div#cookieChoiceInfo {
background-color: #3399FF !important;
color:#FFF !important;
min-height: 20px;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss,#cookieChoiceInfo > div > a:nth-child(2) {
color: #eee;
background-color:#FF8000 !important;
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 > a:nth-child(2):hover {
color:#fff !important;
text-decoration:none !important;
position: relative;
top:1px;
left:1px;
}
.cookie-choices-button { background-color:#FF8000 !important; border-radius: 10px 10px 10px 10px;
}
.cookie-choices-text {color: white !important;}

Dopo aver completato questi semplici passaggi, il risultato finale della barra dovrà essere il seguente:



background-color: #3399FF !important; -----> è il colore azzurro della barra.

color: white !important; -----> è il colore bianco di tutte le scritte.

background-color:#FF8000 !important; -----> è il colore arancione dei due pulsanti.


Come spostare la barra in basso

Per spostare la barra nella parte inferiore dello schermo dovete modificare il codice css riportato sopra. Ovvero subito dopo /* CSS Barra dei Cookie */ dovrete aggiungere il seguente codice:
#cookieChoiceInfo {
top: auto !important;
bottom: 0 !important;}

Cercate di renderla ben visibile la barra, ad esempio se il vostro tema dovesse possedere uno sfondo nero, dovreste evitare di impostare il colore nero come sfondo della barra. Anche le scritte contenute dentro la barra dovranno essere ben leggibili. Se avete dei dubbi potete benissimo non inserire il codice css e lasciare la barra coi colori predefiniti, ovvero di colore grigio-nero.


Argomenti più cercati

Seguici su

     



© Scuolissima.com - appunti di scuola online! © 2022, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies