Pubblicato il 03/06/15e aggiornato il

Come creare un menù per la versione mobile di Blogger.

Come installare un menù nella versione mobile di Blogger da visualizzare solo con tali dispositivi insieme a un altro menù da visualizzare da desktop.
Partiamo da due problematiche comuni a molti utenti della piattaforma Blogger, una più recente e una invece di vecchia data. Secondo le arcinote disposizioni del Garante della Privacy, in verità tuttora molto discusse nella loro ambiguità di interpretazione, ciascun sito oltre ad avere il banner per il consenso all'uso dei cookie deve avere anche un collegamento alla Cookie Policy accessibile da ogni pagina del  blog. Questo significa avere una voce del Menù delle Pagine Statiche che sia proprio quella della Informativa lunga e questo vale per la versione desktop ma anche quella per il mobile. 

Il problema di vecchia data è invece quello che i menù che vengono visualizzati nella versione desktop o non sono visti in modo adeguato in quella mobile oppure proprio non si vedono perché non supportati. Per risolvere in un colpo solo questi due situazioni basterà creare un menù apposito per la versione mobile del sito che abbia anche un collegamento alla Cookie Policy. In questo modo quando un lettore visualizzerà il nostro blog da desktop lo vedrà con il solito menù mentre da mobile lo visualizzerà con un menù completamente diverso e più adatto ai dispositivi touch. In ogni caso sia nella versione desktop sia in quella mobile ci dovrà essere una voce specifica per la pagina della Privacy.

Per realizzare questa personalizzazione useremo i tag condizionali che recentemente sono stati ampliati e che ci serviranno appunto per imporre le condizioni che il menù da mostrare sia quello specifico del dispositivo con cui viene aperto il blog.

INSERIRE DELLE CONDIZIONI AL MENU DESKTOP


Se già avete un menù desktop dovete racchiudere tra due tag condizionali il codice che si trova nella parte visibile della pagina cioè tra <body> e </body>. In sostanza se per il vostro menù avete dovuto incollare un codice sopra a </head> e un altro sopra per esempio a <div class='main-outer'> sarà solo questo secondo codice che dovrà essere racchiuso tra tag condizionali in questo modo 

<b:if cond='!data:blog.isMobile'>
Codice del menù
</b:if>

Se invece avete incollato il menù su Layout > Aggiungi un gadget > HTML/Javascript dovete cercare l'ID del widget, trovare il suo codice nel modello e inserire i due tag condizionali evidenziati di giallo rispettivamente subito sotto la riga <b:includable id='main'> e subito sopra l'altra riga </b:includable> per poi ovviamente salvare il template.  In questo modo il menù sarà visibile solo nella versione desktop. Per controllare andate su Modello > Cellulare > Ruota dentata e scegliete la versione Personalizza per il modello in versione mobile. Adesso aggiungete la stringa ?m=1 a un qualsiasi URL del vostro blog e aprite una scheda del browser per controllare che il menù non si veda.

INSTALLARE IL MENÙ PER IL MOBILE


Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga <header> quindi, subito sopra a questa, incollate questo codice

<b:if cond='data:blog.isMobile'>
<style>
/*CSS Menù Versione Mobile */
#menu{
background: #F95B5B;
color: #FFF;
height: 38px;
border-bottom: 2px solid #DDD;
border-top: 2px solid #DDD;
}
#menu > ul:nth-child(3) {background-color:#11786b; /* Sfondo menù secondo livello */
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:43px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.95em Georgia;}
#menu a{display: block;
line-height: 38px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #1FE0C9;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:28px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Georgia;display:none;width:35px;height:34px;line-height:34px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F95B5B;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.95em Georgia;
text-transform: none;
text-shadow: none;
border-bottom: 1px dotted #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 33px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #1FE0C9;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.95em Georgia;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}
/* CSS Versione Mobile Fine */</style>
<div style='margin-top:25px;'/>
<nav id='menu'>
    <input type='checkbox'/>    <label>&#8801;<span>Idee&#160;per&#160;Computer&#160;ed&#160;Internet</span></label>
    <ul>
    <li><a href='http://www.ideepercomputeredinternet.com/'>Home</a></li> 
    <li><a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html'>Cookie Info</a></li> 
    <li><a href='#'>Scegli&#160;Argomento&#160;<font size='1'>&#9660;</font></a>
    <ul class='menus'>   
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/blogger'>Blogger</a></li>
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/widget'>Widget</a></li>
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/menu'>Menu</a></li>
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/effetti'>Effetti</a></li>
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/android'>Android</a></li>
    <li><a href='http://www.ideepercomputeredinternet.com/search/label/wordpress'>Wordpress</a></li>
    </ul>
    </li>
               </ul>
        </nav>   
</b:if>

quindi salvate il template. Il menù visto da iPad e iPhone avrà questo aspetto

menu-mobile

In alto c'è la icona del menù che è stata creata con la stringa &#8801 e che, se ci si clicca sopra o se ci si fa tap con il cellulare, aprirà il primo livello del menù in questo modo visto da Galaxy 

menù-mobile-blogger

Nel primo livello ci sono tre voci Home, Cookie Info e Scegli Argomento. Andando con il mouse o con il dito su Scegli Argomento si apre il secondo livello del menù. Considerato che si tratta di un menù per il mobile è bene non mettere troppe voci.

Le personalizzazioni più importanti riguardano i codici dei colori e la famiglia di caratteri (Georgia). Il titolo del menù al posto degli spazi ha la stringa &#160; che deve essere usata per delle voci con due o più parole. L'altra stringa &#9660; serve per visualizzare la freccia verticale. Ovviamente dovrete sostituire gli URL e le voci di questo blog con quelle del vostro sito.  La struttura del menù può essere ampliata inserendo anche altri sottomenù con questa sintassi 

<ul class='menus'>   
    <li><a href='#'>Voce 1</a></li>
    <li><a href='#'>Voce 2</a></li>
    <li><a href='#'>Voce 3</a></li>
    <li><a href='#'>Voce 4</a></li>
    <li><a href='#'>Voce 5</a></li>
    <li><a href='#'>Voce 6</a></li>
    </ul>

da incollare tra </a> e </li> in una voce del primo livello che avrà questa struttura

<li><a href='#'>Voce&#160;Principale&#160;<font size='1'>&#9660;</font> </a> </li>


Si potrà testare come si visualizza il menù aprendo nel browser un suo URL con l'aggiunta di ?m=1. Concludo illustrando il significato di <div style='margin-top:25px;'/>  che è un tag <div> con la chiusura data da una slash (/) e che serve per posizionare al meglio il menù. Il valore giusto di 25 pixel per il blog di test può non andare bene per un altro sito. Quindi se il menù si vede solo parzialmente aumentate questo valore mentre se ha uno spazio vuoto sopra di esso diminuitelo.




43 commenti :

  1. complimenti per il post utilissimo, e sempre benvenuto per le incapaci come me. ^-^
    ottimo davvero! sai quante volte ho pianto per creare un menu a tendina nel mio blog?? Meno male che ho conosciuto il tuo blog. Grazie veramente. <3

    RispondiElimina
  2. A questo menù manca solo la casella di ricerca alla destra del nome del blog. La casella non ci entra in ogni caso, ma sarebbe interessante un pulsante della lente d'ingrandimento che una volta cliccato aprirà una sottosezione del menù contenete la casella di ricerca. Per ora ci si accontenta.

    RispondiElimina
  3. grazie delle info, ora ci provo. Ma non riesco a capire dove devo inserire la prima parte: "Se già avete un menù desktop dovete racchiudere tra due tag condizionali ......." in modello ? grazie

    RispondiElimina
    Risposte
    1. Se non capisci può darsi che tu non abbia bisogno di fare quel passaggio
      @#

      Elimina
  4. Il menu del tuo Blog da Android non si apre...

    RispondiElimina
    Risposte
    1. Dipende con che dispositivo lo apri e che browser usi. Con un Galaxy di tre anni fa e con Chrrome si apre benissimo
      http://i.imgur.com/OmKzGt2.png
      @#

      Elimina
    2. Il browser di default di Android è pessimo. Fa vedere uno spazio bianco in mezzo alle pagine
      @#

      Elimina
  5. Perfetto,grazie, appena inserito :) Volevo chiederti una cosa, non so cosa ho combinato in passato nel modello, forse ho modificato per errore qualche codice che riguarda la versione mobile e non riesco a rimediare, in pratica dai cellulari lo spazio all'interno dei post e credo anche del template in generale è un po' limitato, più stretto di quanto dovrebbe essere insomma, anche per questo non avevo mai optato per la versione mobile personalizzata e ora purtroppo ne sono costretta, qualche suggerimento? :/

    RispondiElimina
    Risposte
    1. Sto per pubblicare un post su come si possano modificare gli spazi e le distanze tra i vari elementi del layout. Nel tuo caso devi applicare queste regole alla versione mobile e quindi aprire il tuo blog aggiungendo ?m=1 all'URL del tuo sito
      @#

      Elimina
  6. Ciao Ernesto, grazie come sempre per i tuoi articoli! volevo chiederti però se c'era possibilità di cambiare colore al primo livello del menù che appare nero ... si può fare? io ho preferito fare un unico menù senza il sottolivello, e quello sono riuscito a modificarlo facilmente, mentre per i colori non so come fare rimane impostato di base nero ...

    Ah una cosa riguardo la questione dei cookie, io nel mio sito l'avevo chiamata Privacy, o è obbligatorio chiamarla 'Politica dei Cookie' ???

    RispondiElimina
    Risposte
    1. Per il nome della pagina fai un po' come ti pare l'importante è che la chiami in modo che si capisca di cosa si parla. Rigurado al colore mi sono posto anche io il problema che però visto il tipo di menù non è di semplicissima soluzione. Comunque dopo
      border-bottom: 2px solid #DDD;
      border-top: 2px solid #DDD;
      }

      incolla questa nuova riga di codice

      #menu > ul:nth-child(3) {background-color:#0f0;}

      dove il codice del colore lo puoi personalizzare a piacere.
      @#

      Elimina
    2. OK perfetto! grazie come a sempre!

      Elimina
  7. Bellissimo codice (che serviva da un po').
    Io ho un problema. Ho un menu che è quello flottante che riportasti tu qualche tempo fa (anche se il mio lo tengo fisso, ma è la stessa cosa). Ho controllato e ho già i tag che dovrebbero far in modo che venga visualizzato solo nella versione desktop. Il fatto è che quando mi collego dal cell mi compare, al posto dove di solito andrebbero le pagine (quindi non sopra al titolo come nel caso di questo menu) la scritta Home page. Questo perché (credo) ho il widget pagine (quello standard) nel layout anche se non ho selezionato nessuna pagina, perché mi serve per creare un effetto grafico che non saprei come altro fare (lo so, mi sto incartando, ma tutto questo è per non mettere link cliccabili).

    Il punto è: come risolvo questa cosa che sicuramente non sono riuscita a spiegare? Metto il tag condizionale anche al widget standard di blogger delle pagine? Quale sarebbe, nel caso, la stringa di codice?

    Scusa. La prossima volta me la preparo meglio.

    RispondiElimina
    Risposte
    1. @# Incolla questo codice sopra a </head>

      <b:if cond='data:blog.isMobile'>
      <style>
      #crosscol {display:none !important;}
      </style>
      </b:if>

      Elimina
    2. Risolto in un attimo. Lode a te!

      Elimina
  8. Anch'io volevo mettere la casella di ricerca (non posso usare quella che ho già perché è una creata ad hoc e si trova sul widget delle pagine statiche che ha il problema di cui sopra). Dovrei inserire un altro codice, magari dal layout e mettere i tag condizionali?

    RispondiElimina
    Risposte
    1. Usi Adsense? Se sì segui questa procedura
      http://www.ideepercomputeredinternet.com/2015/06/motore-ricerca-adsense-blogger-desktop-mobile.html
      Se non hai Adsense la procedura è la stessa ma il codice lo puoi ottenere in questo modo
      http://www.ideepercomputeredinternet.com/2013/04/motore-ricerca-personalizzato.html
      Puoi creare una casella di ricerca per mobile (più corta) e una per desktop più lunga con i soliti tag condizionali
      @#

      Elimina
    2. Se volessi inserire la casella di ricerca (seguendo i link che mi hai suggerito) e metterla nella stringa di questo menu in che parte del codice dovrei aggiungerla?

      Elimina
    3. Non conviene farlo. Nella versione mobile la casella di ricerca non entra nel menù. Ti consiglio di seguire il link di cui al commento 8.a che è il metodo che ho seguito io
      http://www.ideepercomputeredinternet.com/2015/06/motore-ricerca-adsense-blogger-desktop-mobile.html
      Per il posizionamento ti conviene inserirla o subito sotto l'header cioè sotto a < /header > oppure subito sopra cioè sopra alla riga < header >
      @#

      Elimina
  9. Mamma ragazzi, per noi è difficilissimo! Siamo proprio degli imbranati. Abbiamo fatto vari cambi di codici e sicuramente tolto o messo qualcosa nel modello, chiediamo perdono :(. Ora abbiamo nel mobile entrambi i menu (sia quello per desktop che per mobile, quello per mobile è in lungo-cioè, un casino!!) e non sappiamo come toglierli e come sistemarli ?

    RispondiElimina
    Risposte
    1. Se riesci a trovare il codice del menù per il desktop cerca di incollarci all'inizio e alla fine i due tag condizionali come mostrato nel post
      < b:if cond='!data:blog.isMobile' >
      Codice del menù
      < /b:if >
      Dovete fare mente locale e ricordarvi dove avete trovato il codice per poi cercarlo nel modello
      @#

      Elimina
    2. "codice del menù per il desktop " intendi il menu mutilevel ?
      grazie

      Elimina
    3. Lo devi sapere da solo quello che hai installato, non posso dirtelo io :))
      @#

      Elimina
    4. Eccomi :(! Ho tolto tutto il menu per il mobile . Ora però se apro il cell mi si vede il menu multilevel identico a come si vede nel pc solo che molto piccolo. Come devo fare per ingrandire la schermata ma soprattutto per toglierlo ed eventualmente inserire il mobile ? Devo ripartire dalle tue istruzioni anche se le avevo già seguite ma poi ho tolto tutto ? Spero di essermi spiegata, grazie.

      Elimina
    5. @# Ti chiami Enzo e parli al femminile :) Forse ti chiami Chiara e Enzo è il cognome :)
      Va beh. Credo che tu abbia fatto un po' di confusione. Forse ti conviene togliere tutto e controllare che non ci siano più menù quindi ricominciare da capo mettendo i codici tutti insieme così non sbagli. In questo modo

      <b:if cond='!data:blog.isMobile'>
      Codice del menù visibile da desktop
      <b:else/>
      Codice del menù visibile da mobile
      </b:if>


      Elimina
  10. Ti prego mi aiuteresti? È tutto il giorno che provo a mettere un menu a tendina per la versione mobile e non ce la faccio!

    RispondiElimina
    Risposte
    1. Guarda che posso fare ben poco oltre a quello che è già scritto nel post. Hai un menù che si vede solo da desktop? Se sì prova a incollare il codice di questo menù per vederlo da mobile. Prima di mettere i tuoi link incolla il codice così come è per vedere se funziona.
      Se hai un modello scaricato da internet che ha disabilitato la versione mobile il menù non si vedrà. E' anche possibile che con i template scaricati il codice non funzioni
      @#

      Elimina
  11. Ciao Ernesto, ho seguito tutte le indicazioni e va tutto bene.
    C'è solo il fatto che nella versione mobile il menu appare distaccato di qualche centimetro, ovvero il menu appare più sotto rispetto all'inizio della pagina. Si può portarlo sopra, come appare il tuo nella versione mobile? grazie

    RispondiElimina
    Risposte
    1. Probabilmente non hai letto attentamente le ultime righe del post. Te le riporto
      "Concludo illustrando il significato di < div style='margin-top:25px;'/ > che è un tag < div > con la chiusura data da una slash (/) e che serve per posizionare al meglio il menù. Il valore giusto di 25 pixel per il blog di test può non andare bene per un altro sito. Quindi se il menù si vede solo parzialmente aumentate questo valore mentre se ha uno spazio vuoto sopra di esso diminuitelo."
      ! 25 pixel di spazio per il mio sito pare siano troppi per il tuo quindi puoi ridurli oppure anche eliminarli del tutto a addirittura mettere un numero negativo se questo non bastasse.
      @#

      Elimina
  12. Grazie ha funzionato sei una risorsa preziosa!

    RispondiElimina
  13. Io ho creato il menù multilivello seguendo l'altro post ma si vede solo da desktop. Ho provato ad aggiungere il codice come indicato qui (coi tuoi link per provare se funzionava) ma non lo visualizzo. Uso il modello semplice di blogger e con il menu normale creato col widget si vedeva ma non aveva i multilivelli! Hai soluzioni?

    RispondiElimina
    Risposte
    1. Non vedo perché a te non dovrebbe funzionare. Lo hanno installati in moltissime persone basta leggere i commenti. Forse non hai abilitato la versione mobile andando su Modello -> Cellulare -> Ruota dentata -> Sì.Mostra il modello per cellulari per poi scegliere Personalizza tra i modelli proposti e andare su Salva
      @#

      Elimina
  14. Ciao! Ho un problema.. Quando clicco sulle tre lineette in alto per aprire il menu si apre e se ci riclicco si chiude. Questo non lo fa se aggiungo ulteriori livelli; nel senso, si apre l'elenco ma non si richiude! In pratica, usando il menu mobile di questo blog come esempio, se clicco su "Scegli argomento" mi si apre l'elenco "Blogger", "Widget" ecc., ma se riclicco su "Scegli argomento" non si richiude. E' possibile risolvere questa cosa oppure no?

    PS: Mi chiamo Marco, non fare caso al nome che appare sopra il commento:)

    RispondiElimina
    Risposte
    1. No. Per chiuderlo si deve cliccare sulle tre linee orizzontali che aprono e che chiudono il menù
      @#

      Elimina
    2. Ok grazie! E si possono centrare verticalmente le tre lineette orizzontali che aprono il menù?

      Elimina
    3. Sarebbe una assurdità grafica. In tutti i menù sono o sulla sinistra o sulla destra. Comunque il codice delle tre linee è questo

      Lo puoi mettere dopo il nome del blog e allora sarebbe più o meno al centro. Per esempio
      <label>&#8801;<span>Idee&#160;per&#160;Computer&#160;ed&#160;Internet&#160;</span>&#8801;</label>

      @#

      Elimina
    4. @# Cioè
      <label><span>Idee&#160;per&#160;Computer&#160;ed&#160;Internet&#160;</span>&#8801;</label>

      Elimina
    5. Il codice delle tre linee non viene pubblicato ma solo le tre linee. Ci riprovo con le Entities. Si dovrebbe vedere ora
      &#8801;

      Elimina
    6. Intendo centrare verticalmente le linee all'interno della barra del menu; facendo l'esempio con il menu della foto qui sopra, le tre linee e il testo "Idee per computer e internet", rispetto alla barra rossa, sono allineati in alto: c'è meno margine sopra rispetto a sotto! Io vorrei sapere se si può aggiungere un margine superiore che sposti linee e testo poco più sotto o una stringa di codice che centri direttamente tutto quanto. All'interno della barra principale comunque, e mantenendo le linee a sinistra e il testo a destra delle linee ovviamente. Non so se mi sono spiegato

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

      Elimina
    8. Usa lo strumento Screenfly per testare la visualizzazione nei principali dispositivi mobili e desktop
      http://www.ideepercomputeredinternet.com/2015/03/responsive-design-test.html
      @#

      Elimina
  15. Non serve, ho capito come allineare sia le tre linee sia il testo in modo che non cambi a seconda del dispositivo in uso. Ho settato un margine dal basso per entrambi gli elementi e adesso va bene.
    Grazie comunque dei suggerimenti e complimenti per le guide del tuo blog! Praticamente ho creato il mio blog seguendo le guide di questo sito :)

    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.