Pubblicato il 29/07/15e aggiornato il

Come personalizzare il Banner di Blogger per i cookie nei modelli a Visualizzazione Dinamica.

Come personalizzare il banner di Google per i Cookie per i blog con template Dynamic Views.
Il javascript utilizzato da Google per i modelli Dynamics Views è lo stesso di quello degli altri template e non mi so spiegare perché quando provavo ad applicarlo non mi funzionava mentre adesso invece il banner si visualizza. Probabilmente hanno cambiato qualcosa nel codice per rendere il banner compatibile anche con i modelli a Visualizzazione Dinamica.

Ricordo per sommi capi di cosa sto parlando. Tutti i siti italiani avevano tempo fino al 2 Giugno per mettersi in regola con le disposizioni del Garante della Privacy. Si tratta di una regola europea a cui devono ottemperare tutti i paesi aderenti alla UE con la data limite del 30 Settembre 2015. In prossimità di questa scadenza Google ha implementato nei blog su Blogger un banner di consenso per i cookie che potremmo definire nativo.  A questo punto tutti gli sforzi che  avevamo fatto per creare il banner da soli sono diventati superflui. Si potrà comunque sempre scegliere di lasciare un nostro banner e di nascondere quello di Google.

Questa opzione però certo non è facile per chi abbia un blog a Visualizzazione Dinamica visto che l'informativa breve la avevamo inserita nell'header in un modo un po' estemporaneo. In questo post vediamo come personalizzare il banner nativo di Blogger posizionandolo nella parte bassa con opzioni diverse per il desktop e il mobile. Si segue sostanzialmente il post che ho appena pubblicato sullo stesso tema con una piccola variazione.  Il risultato sarà il seguente per il desktop

banner-dsktop-visualzzazione-dinamica

mentre per il mobile si vedrà così (con un iPad)

modello-dinamico-ipad

Ricordo che per vedere il banner bisogna aprire una scheda con navigazione in incognito e per controllare come si vede da mobile si deve aprire sempre una scheda in incognito e usare il tool Screenfly. Si va su Modello > Personalizza > Avanzato > Aggiungi CSS

css-avanzato-personalizza

e si incolla 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 */
color: #c5fc42 !important; /* Colore del testo del messaggio */
font-weight:bold; /* Grassetto */
font-family: Georgia; /* Famiglia di caratteri */
}
#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;
}

Si posiziona il cursore una riga sotto all'ultima parentesi graffa in modo da rendere attivo il pulsante Applica al blog in alto a destra su cui si dovrà cliccare.

Si va poi su Modello > Modifica HTML, si cerca la riga </head> e sopra si incolla

<!-- 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-->

Si salva il modello. Con questo sistema si possono personalizzare separatamente i banner per il mobile e per il desktop. Non sto a ripetere tutte le possibili personalizzazioni ma vi invito a fare riferimento alla parte finale del post sulla Personalizzazione del Banner di Blogger.




9 commenti :

  1. Grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    RispondiElimina
  2. Provato anche questo: modello personalizzato su desktop e modello "visualizzazioni dinamiche" su mobile, ma, su mobile, il banner continua ad essere quello predefinito di Google....

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
    2. Tra l'altro, vedo che, su mobile, il banner continua ad essere quello predefinito di Google anche per l'utente Stefano qui sopra, che (su mobile) usa il mio stesso modello

      Elimina
    3. Il tuo blog è questo?
      http://danielesensi.blogspot.com/
      Non hai un modello a Visualizzazione Dinamica ma normale. Se ho capito bene il problema sarebbe quello della personalizzazione della versione mobile. Intanto anche quella desktop non è personalizzata quindi presumo che tu non abbia incollato nessun codice. Per fare in modo che la personalizzazione funzioni anche da mobile devi andare su Modello > Cellulare e scegliere Personalizza tra i modelli per mobile proposti.
      Il tuo modello però non è dinamico e non devi seguire questo post ma quest'altro
      http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
      o, se è troppo complicato, prova con questo
      http://www.ideepercomputeredinternet.com/2015/07/blogger-banner-cookie-google-personalizza.html
      Ricordati di non mettere apostrofi o caratteri speciali nel testo dell'informativa da visualizzare al posto di quella di Google.
      @#

      Elimina
    4. Dunque: ho un modello personalizzato per la versione desktop, e quello a visualizzazione dinamica per la versione mobile. Il banner attuale sì, è modificato: mi sono limitato a modificare in parte la scritta e il link. Non posso abilitare, in mobile, il modello personalizzato perché viene.. una ciofeca

      Elimina
  3. Vorrei farti una domanda: questo banner va bene per quanto riguarda i cookies di Google, Social e quanto altro, ma se tu hai sul sito un Autoresponder, oppure servizi come Histats, o piwik insomma servizi esterni, questo banner va bene ugualmente?

    RispondiElimina
    Risposte
    1. Bisogna creare una pagina di Policy Privacy come questa
      http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html
      in cui elencare la maggior parte dei servizi che utilizzano cookie per poi linkarla al potso di quella di Google
      @#

      Elimina
    2. Grazie, sono riuscita finalmente ad adattarlo al modello visualizzazioni dinamiche. Ora funziona. Chissà se si inventeranno qualcosa prima del 30 settembre, staremo a vedere. Grazie mille.

      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.