Pubblicato il 29/07/15e aggiornato il

Come personalizzare il banner di Blogger per desktop e mobile e come mostrarlo in basso.

Come personalizzare nei colori di sfondo, testo e bottoni il banner di Blogger per la Cookie Law e come posizionarlo in basso. Si possono applicare modifiche diverse per desktop e per mobile.
Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Ieri gli utenti di Blogger quando sono entrati nei loro siti hanno scoperto la novità di un banner nativo di Blogger con Pulsante di accettazione dei cookie, Informativa breve e link alla Informativa lunga sull'uso dei cookie da parte di Google. Già ieri abbiamo visto come si possa modificare il messaggio breve, linkare la nostra Policy Privacy, scegliere il testo dei bottoni e personalizzare i colori di sfondo e testo. Abbiamo anche già visto come si possa facilmente disabilitare il banner di Blogger per lasciare soltanto quello che avevamo installato in occasione della scadenza del 2 Giugno. La nuova scadenza è il 30 Settembre ed è una data europea visto che si tratta della data ultima che hanno tutti gli stati membri per mettersi in regola con questa disposizione della Cookie Law.

In questo articolo faremo un altro passo avanti e mostreremo come si possano personalizzare separatamente il banner di Blogger per il mobile e quello per il Desktop e, a seguito di numerose richieste pervenutemi, come si possa posizionarlo nella parte bassa invece che in alto.


banner-blogger

Una diversa personalizzazione del banner visto da mobile e da desktop è conseguenza della diversa risoluzione di visualizzazione. Nella versione mobile è opportuno avere un testo più corto e dei pulsanti con un testo più essenziale e, sempre per questioni di spazio, nel mobile si può optare per una dimensione di  caratteri più piccola. Partiamo da un esempio pratico per poi illustrare tutti i parametri. Dopo aver salvato il template si va su Modello > Modifica HTML, si clicca sulla sezione <b:skin> intorno alla 13-esima riga per visualizzare tutti i CSS,  si cerca la riga finale  ]]></b:skin> e, subito sopra, si incolla

/* 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 */
color: #fff !important; /* Colore del testo del messaggio */
font-weight:bold; /* Grassetto */
font-family: Georgia; /* Famiglia di caratteri */
}
#cookieChoiceInfo > div > span.cookie-choices-text {color:#fff !important;}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss, #cookieChoiceInfo > div > 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, #cookieChoiceInfo > div > 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 traslazione */
left:1px;
}

Accanto ai parametri più importanti c'è un commento con il suo significato. Successivamente si cerca la riga </head> e, subito sopra, si incolla questo nuovo codice

<!-- Personalizzazione cookie inizio-->
<b:if cond='!data:blog.isMobile'>
<!-- Banner Desktop -->
<style>
div#cookieChoiceInfo {font-size:10.5px !important;}
</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>
div#cookieChoiceInfo {font-size:11px !important;}
</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-->

in cui le personalizzazioni sono separate per Desktop e Mobile da dei tag condizionali. Lo script diverso permette di mostrare due differenti testi per desktop e mobile e per i bottoni. Ricordo che nel javascript non si possono usare gli apostrofi. Lo si può fare solo con l'accortezza di precederli con il carattere \ . Nell'esempio c'è l'espressione "l\47uso" che sarà recepita come "l'uso". Si può integrare la versione desktop e mobile con dei CSS posizionati tra i tag <style> e </style>. Nell'esempio ho inserito solo delle dimensioni differenti per i caratteri del testo ma si possono per esempio inserire le due righe per mostrare il banner in basso se si preferisce questa posizione solo per una delle due versioni.  Le virgolette " come è noto sono state trasformate dal modello di Blogger in  &quot; e questa è una cosa già vista con altri javascript. Ci sono anche due diversi link per l'informativa estesa visto che ho preferito il collegamento a una pagina del blog per il mobile e una pagina esterna caricata su Google Drive quando si apra il sito con browser desktop. Ovviamente va salvato il modello per applicare le modifiche. 

Aggiornamento: Google ha nuovamente modificato alcuni selettori del codice quindi per una personalizzazione funzionante bisogna seguire questo nuovo articolo:





44 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Ho provato e il banner si è posizionato in basso ma rimane la scritta di google. Come mai?
    Grazie.

    RispondiElimina
    Risposte
    1. Ora ho capito. Ho messo al posto del codice sopra a /head un altro che avevi segnalato sul tuo post precedente e funziona.

      Elimina
  3. Tutto bene ma non riesco a mettere in banner in basso per una visualizzazione dinamica

    RispondiElimina
    Risposte
    1. Con le dinamiche non ho testato, poi magari ti farò sapere magari in un post
      @#

      Elimina
  4. Grazie carissimo. Senza di te saremmo messi male!!!

    RispondiElimina
  5. Le modifiche -ma anche quelle del post precedente- non sono visibili nella versione mobile, dove continua a campeggiare il banner originale di Google... :(

    RispondiElimina
    Risposte
    1. Non sono visibili neppure nella versione desktop da quanto ho visto. Se sei sicuro di aver copiato bene il codice non saprei che dirti ;(
      @#

      Elimina
    2. Non sono visibili perché, non funzionando su mobile che è la soluzione che stavo cercando, ho ripristinato il codice precedente (quello che si limitava a modificare testo e link nel banner di Google, ma che funzionava solo per desktop)

      Elimina
  6. Alla fine ho proceduto così... mi tengo il banner di google.. che ho modificato e messo in basso grazie al tuo codice... Ed è fichissimo il fatto di avere due visualizzazioni diverse desktop/mobile. Grazie davvero!!!!!

    RispondiElimina
    Risposte
    1. Gentile Claudia, posso chiederle quale modello ha utilizzato per la versione mobile del suo blog (visualizzazioni dinamiche, finestra immagine, fantastico spa, personalizza, ecc)? Glielo chiedo perché il mio modello (visualizzazioni dinamiche) non rileva le modifiche apportate al banner di Google, grazie

      Elimina
    2. Il modello è "personalizza".. :-D

      Elimina
  7. Vorrei provare anche io....ma la tabella x variare i colori dove la trovo? grazie.

    RispondiElimina
    Risposte
    1. Leggi questo post introduttivo
      http://www.ideepercomputeredinternet.com/2015/06/hex-rgb-converer-codice-colori-html.html
      e una tabella con i codici la puoi trovare qui
      http://www.ideepercomputeredinternet.com/2010/02/tabella-interattiva-in-italiano-dei.html
      @#

      Elimina
  8. Grazie Ernesto, come sempre esaustivo ed efficiente nei tuoi articoli, mi hanno aiutato molto per creare il mio sito, senza essere un'esperta. Avevo già seguito i tuoi post precedenti e avevo inserito il banner, ma ho deciso di tenere quello di google personalizzandolo con il tuo prezioso aiuto. Ho inserito il codice per spostare in basso il banner ma non sono riuscita, mentre ho già modificato i colori. Puoi aiutarmi? Grazie larmonicadellapresenza.it

    RispondiElimina
    Risposte
    1. Nella versione desktop il banner va in basso ma in quella mobile rimane in alto. Non conosco la ragione perché il codice
      top: auto !important; /* Banner in basso */
      bottom: 0 !important; /* Banner in basso */
      serve sia per il mobile sia per il desktop.
      Il banner viene nascosto dal menù che ti consiglio di disattivare per la versione mobile
      @#

      Elimina
  9. Ciao Ernesto, seguendo i tuoi post precedenti avevo inserito il banner che rimandava alla pagina della policy privacy e funzionava tutto alla perfezione, ora disabilitando il banner di google è sparito anche quello inserito in precedenza, ho provato ha reinserirlo seguendo le istruzioni di questo post ma non appare nulla ne da mobile ne da desktop... in cosa sto sbagliando? Grazie anticipatamente!

    RispondiElimina
    Risposte
    1. Si può disabilitare il banner di Google se si utilizza un altro script come questo
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-dark-banner-blogger.html
      L'altro codice che avevo presentato deriva dal codice di Google quindi puoi solo personalizzarlo sopo aver tolto lo script per disattivarlo come indicato in questo post
      @#

      Elimina
    2. Grazie mille per i preziosi consigli, problema risolto!
      Buona serata
      Silvia

      Elimina
  10. Ciao Ernesto, ho seguito alla lettera le tue indicazioni e tutto funziona sia con il mobile che con desktop (firefox e chrome). Su Explorer invece ho notato che il banner non funziona (al contrario sul tuo sito il banner lo vedo). A cosa può essere dovuta questa anomalia?

    RispondiElimina
    Risposte
    1. Non saprei. Sei sicuro di aver aperto una scheda Private Browser? La ragione potrebbe essere che hai un PC con una vecchia versione di IE
      @#

      Elimina
    2. Ciao Ernesto
      ho provato con diverse versioni di IE (l'ultima la 11) e con la modalità Private Browser ma non riesco a visualizzarlo...boh...è davvero un mistero....

      Elimina
    3. @# Prova a rendere compatibile in tuo modello con Internet Explorer
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      Aggiungi al codice anche la stringa IE=IE11;

      Elimina
    4. Grande Ernesto...adesso sembra sia ok!!!
      Ultima domanda per te: mi sono accorto che modificando il campo font-size nelle parti specifiche dedicate alla visualizzazione per mobile e desktop, quello che varia è l'interlinea e non la grandezza del carattere? È un problema che ho solo io?Come faccio a modificare, ad esempio, la grandezza del carattere per la visualizzazione su desktop?Grazie mille come sempre

      Elimina
    5. @# Prova a mettere per esempio
      font-size:80% !important;

      Elimina
    6. Anche quest'ultima soluzione ha l'effetto di moficare l'interlinea e non la grandezza del carattere...non so come procedere...:-(

      Elimina
  11. Ciao Ernesto, una domanda, volevo cambiare il colore del testo del messaggio, ma qualsiasi colore io metta, resta tale. Puoi aiutarmi? Grazie

    RispondiElimina
    Risposte
    1. Io ho messo
      color:#eefec8 !important;
      al posto di
      color: #c5fc42 !important;
      e funziona. Non capisco perché nel tuo modello non sia così
      @#

      Elimina
    2. :-( non lo so nemmeno io... grrrrr.. e vabbè dai.. anche se non è proprio bianco il colore del messaggio.. mi pare si legga bene... Grazie comunque :-D

      Elimina
    3. Non è che hai dimenticato i due punti : o qualche punto e virgola ; oppure il cancelletto # o ancora hai scritto color:#white; invece del corretto color:white; o color:#fff !important; ?
      @#

      Elimina
    4. E' tutto corretto.. ecco ti incollo la riga:
      color: #fff !important; /* Colore del testo del messaggio */

      Elimina
    5. @# Prova a aggiungere quest'altra riga di CSS
      #cookieChoiceInfo > div > span.cookie-choices-text {color:#fff !important;}

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

      Elimina
    7. Inserito.. e adesso funziona!!!!!! Grazie milleeeeeee :-D

      Elimina
  12. Ciao Ernesto, un paio di mesi fa sul mio blog misi il banner che ho trovato sul tuo blog (quello di questa pagina: http://www.ideepercomputeredinternet.com/2014/09/barra-notifica-cookie-personalizzata.html), ma ora mi trovo il layout del mio banner ma con la scritta di Google. Guardando i commenti a quel post, ho visto che altri avevano lo stesso problema e tu li hai reindirizzati qui. Ora io ho seguito alla lettera le cose da fare che hai scritto questo post, ma sono sempre punto e daccapo! Il punto è che ora nella sezione "Modello", sia nelle anteprime piccole che in quella in grande che compare dopo aver cliccato su "modifica html", compare il mio banner, ma quando apro il mio blog in una pagina in incognito, mi compare il banner di Google! Non so come fare sto impazzendo, spero che tu possa aiutarmi!

    RispondiElimina
    Risposte
    1. La prima cosa che devi fare è quella di eliminare tutto il codice che avevi inserito nel modello poi devi seguire le indicazioni di questo post
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      visto che Google ha nuovamente cambiato il codice da alcuni giorni. Per sicurezza all'inizio incolla il mio codice così com'è per vedere se funziona e solo successivamente modificalo con link, colori e parametri tuoi. La maggior parte dei malfunzionamenti deriva da personalizzazioni sbagliate.
      @#

      Elimina
    2. Grazie mille! Ho copiato il tuo così com'è e funziona perfettamente ! Ora lo personalizzo, facendo molta attenzione a ciò che faccio ;P Grazie infinite, mi hai salvato!

      Elimina
  13. Ciao Ernesto, buon pomeriggio da me e dalla mia ignoranza tecnologica, dunque ho letto cercando di ragionare su quel che dovrei fare per personalizzare il banner, ho abbandonato l'idea di rimettere il banner oscurante perché comunque quello inserito direttamente da Google mi sembra effettivamente di grandezza sufficiente e ben leggibile, ora passo a quel che non ho capito.
    Come faccio a lasciare il banner sopra? mi pare di capire che questo codice lo metta giù...e poi le scritte verdi sono solo indicazioni per spiegare meglio i passaggi, ma li devo lasciare nell'html oppure tutto ciò che è verde va eliminato prima di salvare il template?
    Poi dovrei cominciare a vedere come personalizzare ma prima devo capire ste cose...grazie mille Ernesto, aspetto lumi!!!

    RispondiElimina
    Risposte
    1. Se vuoi lasciare il banner in alto elimina questa parte di codice

      #cookieChoiceInfo {
      top: auto !important; /* Banner in basso */
      bottom: 0 !important; /* Banner in basso */}

      I commenti colorati di verde li puoi lasciare visto che servono per spiegare a cosa si riferisce ciascun tag ma li puoi anche togliere. Se scegli questa seconda opzione fallo però dopo aver installato il codice integro perché non è raro che qualcuno sbagli a cancellarli
      @#

      Elimina
    2. Dimenticavo :) È meglio che tu faccia riferimento al post linkato nell'aggiornamento
      @#

      Elimina
    3. Ah ecco quindi basta togliere quel pezzo, ok ci provo, poi tenterò di personalizzare coi colori etc, speriamo beneeeeee :D si si avevo visto l'aggiornamento ma poi mi sono persa via e ho commentato sotto a questo post.
      Grazie mille Ernesto!!!

      Elimina
  14. salve
    non avendo introdotto alcun banner dei cookie, volevo capire se fosse inutile inserirla visto che Google l'ha introdotta automaticamente in Blogger sia nella versione desktop che mobile! e quindi si è già in regola

    RispondiElimina
  15. Non re lo so dire con certezza. Per essere sicuro dovresti lineare la tua policy cookie al posto di quella di Google. Ho scritto un post in merito. Non ti posso dare il linko perché sono al cellulare. Se non lo trovi commenta nuovamente dopo il 4 Gennaio quando potrò rispondere dal pc
    @#

    RispondiElimina

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.