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.

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