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.

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:

• Come adattare al nostro layout il banner di Google inserito nei blog di Blogger -