Personalizzare la barra dei cookie ufficiale per 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.



27 commenti :

  1. Grazie a te per l'ennesimo aiuto ..... invece di aiutare Blogger/Google stà mettendo sempre più il bastone tra le ruote a noi poveri gestori di blog
    Con questa è la seconda volta che devo cambiare tutto .....
    Speriamo che non gli venga in mente di cambiare altro - Ora dovrei essere a posto grazie ancora per il tuo grande aiuto
    Un saluto buna serata e migliore settimana in corso
    P.S. Buona estate e Buone Vacanze ......

    RispondiElimina
    Risposte
    1. Si, infatti non se ne può più! La combinazione caldo afoso + cookie è micidiale :-)

      Elimina
  2. He he he lo puoi dire ad alta voce ..... puoi anche gridarlo Andrea ..... è davvero una combinazione micidiale ;-)
    Buona settimana :-)

    RispondiElimina
  3. Grazie, mi hai "salvato" come del resto anche con la precedente edizione del banner

    RispondiElimina
  4. Il codice html funziona ma quelli css per modificarne l'aspetto no...:-( come fare? Ho seguito tutte le procedure correttamente. Grazie!

    RispondiElimina
    Risposte
    1. Vero, me ne sono accorto anche io. Di recente Google ha aggiornato lo stile predefinito della barra rendendo inutili tutte le personalizzazioni precedenti. Comunque adesso ho sostituito il codice css, che poi è lo stesso che sto usando su Scuolissima, e quindi dovrebbe funzionare.

      Elimina
  5. non riesco ad avere la visualizzazio\ne corretta della barra, come devo fare?

    RispondiElimina
    Risposte
    1. il tuo blog non lo conosco e quindi non posso sapere a cosa ti riferisci. Un consiglio generico ed alla cieca è quello di rimuovere i css della vecchia barra, di spostarla in basso o di cambiare tema...

      Elimina
  6. Ciao, guida utilissima, grazie per i consigli e la gentilezza con cui ti prodighi a rispondere ai commenti! Ti disturbo anch'io perché non riesco a far funzionare il css per la personalizzazione... l'ho inserito ma non vedo nessun cambiamento.

    RispondiElimina
    Risposte
    1. Facendo un ispezione con Chrome sul modello del tuo blog riesco a vedere due lunghi css che iniziano con "CSS Barra dei Cookie". Quello messo in posizione sbagliata va tolto perché non fa funzionare l'altro.

      Elimina
  7. Ciao Andrea, utilissima la tua guida..io sono riuscito a modificare il banner ufficiale di google con la dicitura che ci hai proposto ma vorrei sapere come cambiare il collegamento + informazioni perché mi riporta sempre alla pagina iniziale del blog..come faccio a modificare il collegamento? TI prego aiutami perché non ci capisco una mazza..grazie a priori

    RispondiElimina
    Risposte
    1. Dal primo codice di questa guida dovrai sostituire il link della mia informativa con la tua informativa personale... è facile distinguerlo perché è colorato di rosso. Il testo che invece sei riuscito a modificare è quello di colore blu.

      Elimina
  8. Ah perfetto..adesso ho capito cosa intendevi..problema risolto..ti ringrazio tanto!!!

    RispondiElimina
  9. c'è invece un modo per poter risalire a tutti i cookie presenti nel mio blog e che magari io disconosco? Premetto che ho un blog d'informazione e le uniche cose che pubblico sono articoli di testo o video che possono provenire: da youtube, facebook o dailymotion...altre piattaforme molto difficilmente.

    RispondiElimina
    Risposte
    1. si tramite Chrome si possono vedere i cookie di ogni sito:
      http://www.scuolissima.com/2015/05/conoscere-cookie-sito.html

      Elimina
  10. Ciao, avevo la barra predefinita e un po' invadente di Google.Con la personalizzazione si ristretta leggermente, ma non sono riuscita ne a mettere la barra sotto, e nemmeno cambiare i colori della stessa ... e pensare che ho seguito con calma tutti i tuoi suggerimenti:

    RispondiElimina
    Risposte
    1. probabilmente hai posizionato il css in un posto sbagliato, controlla se è posizionato come descritto nel primo metodo in questo link:
      http://www.scuolissima.com/2014/08/come-aggiungere-codice-css-blogger.html

      Elimina
    2. Sono entrata in CSS e da lì funziona; la barra rimane cmq sopra, ma mi piace anche così.
      Intanto ti ringrazio molto per la tua gentilezza!

      Elimina
    3. L'ultimo codice serve per posizionare la barra in basso.

      Elimina
  11. Ciao,
    posso chiedederti perchè, il tasto "+Informazioni" viene visualizzato più squadrato del tasto "OK" che appare più arrotondato?
    Grazie.

    RispondiElimina
    Risposte
    1. Ho aggiornato il codice, adesso se lo sostituisci con quello vecchio lo vedrai arrotondato.

      Elimina
  12. Ciao Andrea,fino a ieri questo tuo codice funzionava senza problemi sul mio blog. Da stamattina è scomparso il banner e non c'è verso di reinserirlo. Anche se copio i codici di nuovo, non funziona nulla. Sai cosa può dipendere?

    RispondiElimina
    Risposte
    1. È stato un problema temporaneo dello script di Google, evidentemente avranno fatto qualche aggiornamento.

      Elimina
  13. Andrea ho applicato come da te descritto il codice, tutto ok. Posso sapere come posso cambiare la grandezza del banner da renderlo più visibile? Quali sono i codici che posso cambiare? Grazie Libera

    RispondiElimina
    Risposte
    1. Dovrebbe bastare l'aggiunta di questo codice css:
      #cookieChoiceInfo {padding: 14px !important;}

      Elimina
    2. Dimenticavo. Dove va incollato il codice? :-)

      Elimina
    3. subito dopo il css di questo articolo. Se non sai come fare segui questa guida:
      http://www.scuolissima.com/2014/08/come-aggiungere-codice-css-blogger.html

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".