Pubblicato il 20/08/15e aggiornato il

Nuova personalizzazione del banner dei cookie su Blogger.

Come personalizzare il banner per i cookie di Blogger nei colori del testo, dello sfondo, nella famiglia dei caratteri e nella loro dimensione il banner di Google inserito in tutti i blog di Blogger.
Che ci siano state delle modifiche nel codice di Blogger me ne sono accorto da tanti piccoli problemi che ho avuto in questi giorni. Innanzitutto era sparita la Descrizione della Ricerca nell'Editor del post e quindi sono dovuto tornare su Impostazioni > Preferenze di Ricerca per reimpostarla.

Poi ho constatato alcuni piccoli cambiamenti del layout a cui ho dovuto porre rimedio. Un'altra modifica non troppo evidente è stata quella apportata al banner di Google che si visualizza in tutti i siti di Blogger. Sono stati modificati alcuni selettori degli elementi quindi il codice per la personalizzazione che avevo pubblicato qualche settimana fa non va più bene. Un bottone non è più colorato come dovrebbe, il testo non si riesce a modificarlo di colore e altre cosucce varie. Visivamente è stata introdotta una larghezza massima per il testo del banner che è stata fissata a 800 pixel. In questo modo il testo stesso è divenuto molto più centrale.

Vediamo come si possa nuovamente personalizzare il banner sia per desktop sia per mobile. Ovviamente si deve salvare il template quindi andare su Modello > Modifica HTML, cliccare sulla freccetta nera a sinistra della sezione <b:skin> intorno alla 13-esima riga, cercare con Ctrl+F l'altra riga ]]></b:skin> e, subito sopra a questa, incollare questo codice

/* CSS Accettazione Cookie */
#cookieChoiceInfo {
top: auto !important; /* Banner in basso */
bottom: 0 !important; /* Banner in basso */
}
div#cookieChoiceInfo {
background-color: rgba(28,201,181,0.95) !important; /* Colore di sfondo con trasparenza */
font-weight:bold; /* Grassetto */
font-family: Georgia; /* Famiglia di caratteri */
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss, span.cookie-choices-buttons > a:nth-child(1), #cookieChoiceInfo > div > a:nth-child(2) {
color: #eee; /* Colore del testo dei bottoni */
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0); /* Colore di sfondo dei bottoni */
box-shadow: 2px 2px 2px  #aaa; /* Ombreggiatura */
text-shadow:1px 1px 1px #ccc;
text-align:center;
padding:3px 8px;
text-decoration:none;
border-radius:8px;
font-family:Georgia; /* Famiglia di Caratteri */
font-size:13px; /* Dimensione font bottoni */
font-weight:bold;
}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover, span.cookie-choices-buttons > a:nth-child(1):hover, #cookieChoiceInfo > div > a:nth-child(2):hover {
color:#fff; /* Colore testo bottoni al passaggio del mouse */
box-shadow: 1px 1px 1px  #aaa; /* Ombreggiatura */
text-shadow:0px 0px 0px #ccc;
position: relative;
top:1px; /* Effetto schiacciamento bottoni */
left:1px;
}

I parametri da personalizzare sono stati colorati di rosso e il loro significato è indicato da dei commenti colorati di verde. Successivamente si cerca la riga </head> e, subito sopra, si incolla

<!-- Personalizzazione cookie inizio-->
<b:if cond='!data:blog.isMobile'>
<!-- Banner Desktop -->
<style>
span.cookie-choices-text {font-size:13px !important; color: #fff !important; /* Colore del testo del messaggio */ max-width:900px !important; /* Larghezza testo */}
</style>
      <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Le info sulla tua navigazione sono condivise con queste terze parti. Navigando nel blog accetti l\47uso dei cookie.&quot;, close: &quot;OK Accetto&quot;, learn: &quot;+Informazioni&quot;, link:&quot;https://goo.gl/wuWQ2h&quot;};
</script>
    <b:else/>
<!-- Banner Mobile -->
    <style>
span.cookie-choices-text {font-size:11px !important; color:#f00 !important; /* Colore del testo del messaggio */}
</style>
      <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito usa i cookie di terze parti con cui sono condivise le info su di te. Navigando nel blog accetti la nostra politica dei cookie.&quot;, close: &quot;OK&quot;, learn: &quot;+Info&quot;, link:&quot;http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
</script>
    </b:if>
<!-- Personalizzazione cookie fine-->

quindi si salva il modello. Ci sono due diverse personalizzazioni per desktop e mobile che possono essere modificate separatamente. Si possono anche cambiare separatamente altri aspetti ma mi sono limitato ad aumentare a 900 pixel la larghezza massima del banner per il desktop e a settare dimensioni e colori diversi per il testo del messaggio. Anche quest'ultimo però ha una differenziazione, più lungo per il desktop e più corto per il mobile così come per il testo visibile nei bottoni. Ho anche linkato due diverse Cookie Policy. Se avevate già utilizzato il codice precedente per la personalizzazione del banner di Blogger non dovete fare altro che sostituirlo dopo aver modificato i parametri.

banner-mobile-desktop-blogger

Lo screenshot del banner per il mobile del blog di test l'ho preso con Screenfly.




43 commenti :

  1. Ciao, avevo inserito il banner precedente, ma per cambiarlo vorrei cancellare prima il codice vecchio, solo che non so più dove inizia e dove finisce... Come posso fare? Inoltre, ho visto che google ha modificato il suo, e adesso ogni volta che apro il blog li ho doppi (anche dopo aver dato l'ok a codice preso nel tuo vecchio post). Secondo te non basta quello di google?
    Grazie

    RispondiElimina
    Risposte
    1. Il codice lo hai copiato da questo sito? Se è così io ci metto sempre delle stringhe esplicative per ritrovarlo facilmente. Ho visto il codice sorgente i questo sito
      http://gattosandro-viaggiatore.blogspot.it/
      che credo sia il tuo. Devi cancellare il codice a partire da questa riga
      -- Accettazione Cookie - Inizio --
      fino alla riga
      -- Accettazione Cookie - Fine --

      Quindi vedi cancellare il codice da
      -- Script dei cookie --
      fino a
      -- Accettazione Cookie - Fine --
      Non ho messo i segni < e > perché altrimenti non mi salva il commento ma nelle righe ci sono anche quelli. Prima di procedere salva comunque il modello
      @#

      Elimina
    2. Ok grazie mille! Sei sempre gentilissimo.

      Elimina
  2. ciao
    ho "personalizzato" il messaggio di google senza discriminare se desktop o mobile e mentre su desktop funziona se visualizzo il blog da cellulare continuo a vedere il messaggio di "default" di google.
    ho anche provato a duplicare la "personalizzazione" condizionanzola al test "<b:if cond='data:blog.isMobile" etc
    ma niente da smartphone continuo a vedere il solito messaggio
    hai qualche suggerimento ?
    grazie

    RispondiElimina
    Risposte
    1. Dal comportamento può essere che tu non abbia scelto "Personalizza" su Modello > Cellulare > Ruota dentata tra i modelli per il mobile
      @#

      Elimina
    2. ho modificato come suggerito e funziona
      grazie

      ps
      ma in quel caso cosa avrei dovuto fare ? bastava testare se: data:blog.isMobile ?

      Elimina
    3. Le modifiche applicate al codice del modello nel mobile funzionano solo se si è scelto il modello Personalizza per il Cellulare
      @#

      Elimina
  3. Ciao, Ernesto,
    ho copiato il tuo nuovo codice per provare se con questo riuscivo a far sparire il banner cliccando su OK Accetto. Non so se ricordi ma con l'altro codice si era presentato il problema. In un primo momento sembrava risolto ma si era poi ripresentato, il banner non scompariva più al clic sull'ok. E allo stesso modo con questo nuovo codice. Non scompare! Ho provato anche da tablet, stessa cosa. (da cellulare non ho provato ma non mi interessa più di tanto per ora).
    Posso fare qualcosa?
    ti ringrazio,
    g

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://matematicamedie.blogspot.it/
      Ho cliccato su OK e il banner è sparito. Ho ricaricato la pagina e il banner non è ricomparso. È chiaro che se tu apri il blog con una pagina in Incognito il banner appare perché non rileva il cookie di accettazione. Ho provato anche con il tool Screenfly per il mobile ed è tutto OK. Forse non ti è chiaro che il banner non si mostra più solo quando si apre il sito con un browser che abbia già archiviato il cookie con l'accettazione
      @#

      Elimina
    2. Sì il blog è quello.
      Grazie per aver provato e sono contenta che sia tutto ok.
      Però non capisco: il mio problema non è che il banner appaia, sia in incognito che no, ma che non scompaia quando clicco sull'ok. Come ad esempio è successo qui da te. La prima volta che ho visto il tuo nuovo banner, è scomparso al clic su Ok accetto e ora, evidentemente, come tu dici, archiviato il cookie con accettazione, non compare più. Da me, booh.
      Comunque, mi va bene che almeno non crei noie ai visitatori :-)
      grazie tantissime,
      io riproverò...
      g

      Elimina
  4. Ernesto, il tuo precedente codice sul mio blog continua a funzionare. E' cambiato il layout, nel senso che, come hai scritto tu, il testo è più centrato e i pulsanti, a seconda della risoluzione dello schermo e dello zoom, sono o centrati in basso o a destra del testo. Ma il colore di sfondo e quello dei pulsanti sono rimasti. Il colore del testo è bianco e non lo posso modificare, ma bianco a me va benissimo. Quello che ha scritto Giovanna mi fa preoccupare, nel senso che non vorrei che non "funziona" il pulsante di accettazione, anche se ho verificato cancellando i cookies dal browser e il banner ricompare. Se e quando ti è possibile potresti verificare anche tu? Grazie mille.

    RispondiElimina
    Risposte
    1. Credo che Giovanna non avesse ben compreso il funzionamento del banner. Il tuo sito è questo
      http://vascocomevivere.blogspot.it/
      e il bottone funziona come su tutti i siti
      @#

      Elimina
    2. Sì, il blog è quello. Ti ringrazio infinitamente per la tua disponibilità :)

      Elimina
  5. Ciao! E' da un po' che ti seguo e ho notato una cosa: ogni volta che entro in un tuo articolo per la prima volta mi esce nuovamente il banner di accettazione cookie, nonostante abbia cliccato OK ormai diverse volte. Siccome io stessa ho usato il tuo codice nel mio blog, c'è chi mi ha fatto notare la stessa cosa, ossia che il banner appunto si riapre nel momento in cui si entra in una pagina. Ma non dovrebbe non apparire più una volta dato l'OK, se non altro per un anno? Altrimenti c'è un modo per farlo sparire una volta accettato? Temo che potrebbe dare fastidio ai visitatori. Grazie

    RispondiElimina
    Risposte
    1. Dopo aver cliccato su Ok Accetto lo vedi sempre il banner? Credo di no. La ragione per cui ti appare più volte non dipende da questo sito ma da altre considerazioni che ti elenco
      1) Hai aperto il post del sito con un browser diverso da quello dell'ultima volta
      2) Hai cancellato i dati di navigazione del browser
      3) Hai usato CCleaner o altro software analogo per eliminare i dati superflui
      4) Credi di aver cliccato su OK ma non lo hai fatto
      @#

      Elimina
  6. Io non so perché ma non mi modifica la scritta: nonostante io modifichi la stringa e salvi l modello, il messaggio resta scritto così come l'hai impostato tu (intendo proprio le parole, non le personalizzazioni).

    RispondiElimina
    Risposte
    1. Tra l'altro questa cosa mi succede solo per la versione desktop e ho notato che non compare il tuo messaggio (quello che hai scritto adesso) ma uno che forse hai implementato in un precedente modello, ossia: Questo sito si serve dell'utilizzo dei cookie di Google per l'erogazione dei servizi, la personalizzazione degli annunci e l'analisi del traffico. Le informazioni sul tuo utilizzo del sito sono condivise con Google. Se prosegui la navigazione acconsenti all'utilizzo dei cookie (o è la scritta ufficiale di blogger? In ogni caso non ha molto senso, no? Non posso cambiarla in qualche modo?)

      Elimina
    2. Questo significa che nel modello hai ancora delle porzioni di codice che ti sei dimenticata di togliere quando hai messo il nuovo. Per controllare vai su Modello ecerca le espressioni che leggi nel banner in modo da trovare il codice in cui sono state inserite
      @#

      Elimina
    3. No, non c'è nulla (e lo so perché sono tornata al modello pre-implementazione del banner). Strano che la modifica funzioni soltanto per la versione mobile, no?

      Elimina
    4. Infatti la scritta non è la mia ma quella di Google. Non funziona la tua scritta. Torna nel modello e guarda il colore. Spesso si capisce anche da quello che non va se è di due diversi colori
      @#

      Elimina
  7. Ciao Ernesto,
    è possibile posizionare il banner dei cookie (in mobile) qualche pixel più in alto del fondo? Invece che "bottom", qualcosa tipo "bottom + 20pixel".
    Questo perché in fondo ho dei pulsanti social che vanno sopra il banner cookie.
    Grazie

    RispondiElimina
    Risposte
    1. Mi era stato già chiesto. Non escludo che possa essere fatto ma non ho trovato la soluzione :(
      @#

      Elimina
    2. Peccato :)
      Magari sposto i tasti social in alto. Grazie comunque per le innumerevoli dritte su Blogger!

      Elimina
    3. Ciao, ancora due domande:
      1) in questa versione quale porzione di codice si deve modificare per far apparire il banner cookie in alto, "top" (sempre in mobile)?
      2) tornando al discorso precedente, per far apparire il banner cookie (bottom) qualche pixel più in alto, sarebbe possibile inserire delle righe vuote (ad esempio con < / br >) dopo i pulsanti di "ok" e "info"

      Grazie ancora

      Elimina
    4. Per il banner in alto solo nel mobile devi aggiungere questo codice

      #cookieChoiceInfo {
      top: 0 !important;
      bottom: auto !important;
      }
      prima di
      span.cookie-choices-text {font-size:11px !important; color:#f00 !important; /* Colore del testo del messaggio */

      Per il resto della domanda prova con < br/ > ma non vedo come potrebbe funzionare :)
      @#

      Elimina
    5. Grazie per l'aggiunta di codice.
      Per il punto 2 era solo un'idea da profano in materia, pensavo che aggiungendo righe vuote sotto i pulsanti, il tutto si sarebbe spostato verso l'alto, lasciando quello spazio vuoto utile per far restare i pulsanti social che avevo. Comunque non saprei dove inserirli i < br/ > :)

      Elimina
  8. qual'è la riga di codice da modificare per cambiare il colore del banner, intendo il verdino acqua o celeste.. tutto il banner.. i bottoni rossi e le scritte in bianco mi vanno bene, Grazie Ernesto, in attesa di risposta ... :-)

    RispondiElimina
    Risposte
    1. C'era già scritto accanto
      background-color: rgba(28,201,181,0.95) !important; /* Colore di sfondo con trasparenza */
      Se non sai trattare il codice RGB al posto di quello HEX leggiti questo post
      http://www.ideepercomputeredinternet.com/2015/06/hex-rgb-converer-codice-colori-html.html
      @#

      Elimina
  9. Ciao scusami il disturbo ma sono davvero disperata, è tutto il pomeriggio che cerco di mettere un banner ma non so come mai non mi appare mai ;( ho copiato tutto identico come scritto sopra nelle tue indicazioni ma non riesco proprio a farlo comparire tu sai come posso fare?? Dove sbaglio?? Grazie mille il mio blog è questo http://denimakeup95.blogspot.it/

    RispondiElimina
    Risposte
    1. Funziona perfettamente. Devi solo sostituire l'indirizzo della mia Pagina della Policy Cookie con la tua. Incolla questo link nel browser
      http://i.imgur.com/VW7gu28.png
      Il banner non lo vedi perché devi aprire il tuo sito con Modalità in Incognito o con Navigazione Anonima perché viene mostrato ovviamente solo a chi entra per la prima volta nel sito per non essere troppo invasivo
      @#

      Elimina
    2. Ciao grazie mille per la risposta sei sempre gentilissimo, ho provato con la finestra in incognito e vedo il banner predefinito di google e non quello con la mia privacy, eppure ho modificato solo i link ma non spunta ;(

      Elimina
    3. Funziona perfettamente. Apri questo link
      http://i.imgur.com/wCqnZ5I.png
      Solo che non devi linkare la policy privacy di Google ma devi creare una pagina statica con questo stile
      http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html
      che puoi prendere come modello. Funziona anche da dispositivi mobili come puoi vedere da questo screenshot
      http://i.imgur.com/oLoXvxc.png
      fatto con un emulatore di un tablet
      @#

      Elimina
    4. Ho modificato e messo la mia privacy policy ma esce sempre quella di google quando io dal mio html ho inserito la mia ;(

      Elimina
    5. Quando ho guardato dopo il commento precedente il banner funzionava adesso invece non funziona. Pare che tu abbia tolto tutto il codice della personalizzazione. Rimane quello ufficiale di Google che cmq potrebbe anche bastare
      @#

      Elimina
    6. Ho riprovato e rimesso tutto ma dalla mia anteprima quando modifico html esce il mio link giusto mentre quando lo guardo in incognito esce la dicitura di google ;(

      Elimina
    7. @# È probabile che tu abbia sbagliato a copiare il link. Prova a sostituire completamente questa parte di codice
      cookieOptions = {msg: "Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Le info sulla tua navigazione sono condivise con queste terze parti. Navigando nel blog accetti l\47uso dei cookie.", close: "OK Accetto", learn: "+Informazioni", link:"http://goo.gl/C7gVM0;};

      con quest'altra

      cookieOptions = {msg: "Questo sito usa i cookie di terze parti con cui sono condivise le info su di te. Navigando nel blog accetti la nostra politica dei cookie.", close: "OK", learn: "+Info", link:"http://denimakeup95.blogspot.it/p/policy-privacy.html"};

      Elimina
    8. Nel tuo codice mancano le virgolette finali dopo l'indirizzo accorciato con Goo.gl. C'è
      link:"http://goo.gl/C7gVM0;};
      invece di
      link:"http://denimakeup95.blogspot.it/p/policy-privacy.html"};
      @#

      Elimina
    9. Grazie ora funziona:) sono davvero contenta, ti ho fatto una piccola donazione per avermi aiutata. So che non è molto ma spero sia apprezzata

      Elimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Il tuo sito è questo?
      http://storiearitmocardiaco.blogspot.it/
      In effetti non compare nulla. È strano. Prova a togliere tutti i codici dei banner. Dovrebbe vedersi almeno quello ufficiale di Google. Altro non ti so dire mi spiace :(
      @#

      Elimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ah sì è quello! Vai su impostazioni -> Di Base -> HTTPS -> Reindirizzamento HTTPS e metti NO al passaggio a HTTPS quindi salva
      @#

      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.