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

mentre per il mobile si vedrà così (con un 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

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.