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>
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>≡<span>
<a href="http://www.ideepercomputeredinternet.com">Idee per Computer ed Internet </a></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 Argomento <font size='1'>▼</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>
<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>≡<span>
<a href="http://www.ideepercomputeredinternet.com">Idee per Computer ed Internet </a></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 Argomento <font size='1'>▼</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
In alto c'è la icona del menù che è stata creata con la stringa ≡ 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
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   che deve essere usata per delle voci con due o più parole. L'altra stringa ▼ 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>
<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 Principale <font size='1'>▼</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.
complimenti per il post utilissimo, e sempre benvenuto per le incapaci come me. ^-^
RispondiEliminaottimo 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
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.
RispondiEliminagrazie 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
RispondiEliminaSe non capisci può darsi che tu non abbia bisogno di fare quel passaggio
Elimina@#
Il menu del tuo Blog da Android non si apre...
RispondiEliminaDipende con che dispositivo lo apri e che browser usi. Con un Galaxy di tre anni fa e con Chrrome si apre benissimo
Eliminahttp://i.imgur.com/OmKzGt2.png
@#
Uso quello di default Android kitKat
EliminaIl browser di default di Android è pessimo. Fa vedere uno spazio bianco in mezzo alle pagine
Elimina@#
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? :/
RispondiEliminaSto 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@#
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 ...
RispondiEliminaAh una cosa riguardo la questione dei cookie, io nel mio sito l'avevo chiamata Privacy, o è obbligatorio chiamarla 'Politica dei Cookie' ???
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
Eliminaborder-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.
@#
OK perfetto! grazie come a sempre!
EliminaBellissimo codice (che serviva da un po').
RispondiEliminaIo 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.
@# Incolla questo codice sopra a </head>
Elimina<b:if cond='data:blog.isMobile'>
<style>
#crosscol {display:none !important;}
</style>
</b:if>
Risolto in un attimo. Lode a te!
EliminaAnch'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?
RispondiEliminaUsi Adsense? Se sì segui questa procedura
Eliminahttp://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
@#
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?
EliminaNon 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
Eliminahttp://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 >
@#
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 ?
RispondiEliminaSe 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
Elimina< 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
@#
"codice del menù per il desktop " intendi il menu mutilevel ?
Eliminagrazie
Lo devi sapere da solo quello che hai installato, non posso dirtelo io :))
Elimina@#
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@# Ti chiami Enzo e parli al femminile :) Forse ti chiami Chiara e Enzo è il cognome :)
EliminaVa 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>
Ti prego mi aiuteresti? È tutto il giorno che provo a mettere un menu a tendina per la versione mobile e non ce la faccio!
RispondiEliminaGuarda 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.
EliminaSe 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
@#
Ciao Ernesto, ho seguito tutte le indicazioni e va tutto bene.
RispondiEliminaC'è 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
Probabilmente non hai letto attentamente le ultime righe del post. Te le riporto
Elimina"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.
@#
Grazie ha funzionato sei una risorsa preziosa!
RispondiEliminaIo 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?
RispondiEliminaNon 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@#
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?
RispondiEliminaPS: Mi chiamo Marco, non fare caso al nome che appare sopra il commento:)
No. Per chiuderlo si deve cliccare sulle tre linee orizzontali che aprono e che chiudono il menù
Elimina@#
Ok grazie! E si possono centrare verticalmente le tre lineette orizzontali che aprono il menù?
EliminaSarebbe una assurdità grafica. In tutti i menù sono o sulla sinistra o sulla destra. Comunque il codice delle tre linee è questo
Elimina≡
Lo puoi mettere dopo il nome del blog e allora sarebbe più o meno al centro. Per esempio
<label>≡<span>Idee per Computer ed Internet </span>≡</label>
@#
@# Cioè
Elimina<label><span>Idee per Computer ed Internet </span>≡</label>
Il codice delle tre linee non viene pubblicato ma solo le tre linee. Ci riprovo con le Entities. Si dovrebbe vedere ora
Elimina≡
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
EliminaQuesto commento è stato eliminato dall'autore.
EliminaUsa lo strumento Screenfly per testare la visualizzazione nei principali dispositivi mobili e desktop
Eliminahttp://www.ideepercomputeredinternet.com/2015/03/responsive-design-test.html
@#
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.
RispondiEliminaGrazie comunque dei suggerimenti e complimenti per le guide del tuo blog! Praticamente ho creato il mio blog seguendo le guide di questo sito :)
Un'altra domanda! E' possibile posizionare le freccette (quelle che indicano che c'è un sottomenu) sulla destra del menu? Nel senso, avere le parole allineate a sinistra e le freccette allineate a destra?
RispondiEliminaPotresti provare a sostituire
Elimina▼
con
<span style='text-align:right;'>▼</span>
ma non so se funzionerà
@#
No non funziona, ho provato anche con ma non funziona lo stesso. Ovviamente non ho messo questo testo
EliminaNon mi scrive il codice, ho provato con l'elemento p align="right"
EliminaP e sbagliato perché è il tag del paragrafo e fa saltare una riga. Magari prova a togliere i dee tag < font > e < / font > e aggiungi font-size:8px; nel campo style
RispondiElimina@#
Al limite prova con span align = ' right ' senza spazi
RispondiElimina@#
Niente non funziona, vabbe non importa! Anche se sono nella sezione sbagliata, è possibile aggiungere del testo in fondo al sito mobile di blogger? (che si veda solo nella versione mobile, non in quella desktop; e che stia proprio in fondo al sito indipendentemente dal fatto che si stia visualizzando la home page, gli articoli di un'etichetta, una pagina o un post)
EliminaNon voglio mettere widget perché avendo impostato uno sfondo diverso nella versione mobile, mettendo il widget, nella parte dove sta il widget c'è lo sfondo della versione desktop! In più non saprei come fare per non vederlo nella versione desktop
EliminaLeggi questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/06/link-visualizza-versione-mobile-blogger.html
con cui si inserisce un link particolare che puoi cambiare a piacere
@#
E poi (lo scrivo già adesso così puoi rispondere una volta soltanto) si può cambiare il colore del testo del titalo del blog solo nella versione mobile del blog?
RispondiEliminaLeggi questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/09/personalizzare-blogger-dispositivi-mobili.html
nella parte finale
@#
Ti ringrazio per i suggerimenti ma...
EliminaPer quanto riguarda il colore del nome del blog, seguendo la guida che mi hai suggerito ho risolto ma soltanto per quanto riguarda il titolo del blog nella home page: se clicco per leggere un articolo torna il colore originale.
Riguardo al testo in fondo al sito mobile, la guida che mi hai indicato non mi è utile in quanto da quello che ho capito non permette di inserire un testo a piacere che si veda in fondo al solo sito mobile.
Mi interessa perlopiù sapere come si cambia il colore del titolo anche all'interno dei post, poi se è possibile avere qualche dritta anche relativamente al secondo problema sarebbe ottimo!
Ho cambiato modello e sono riuscito a risolvere il problema.
EliminaSo che probabilmente ti sto rompendo le scatole ma ho due ultimissime domande (poi non scrivo più):
1. Si può in qualche modo cambiare il layout della visualizzazione dei post in home page da mobile? Perché mi piacerebbe si vedessero nello stesso modo in cui si vedono dal pc; o perlomeno posizionare l'immagine sopra il testo anziché a lato?
2. Ho messo lo sfondo del footer di un colore diverso dal resto del sito, solo che non si estende in larghezza all'infinito come invece succede per il colore dello sfondo del titolo; colora un riquadro limitato. Si può in qualche modo estendere colorare tutto anche nel footer?
Giuro non ti stresso più poi ;)
Nessuno stress. Alle domande troppo impegnative non rispondo. Se poi le ritengo di interesse generale ci posso fare un post nei giorni successivi. Quello di mettere immagine e titolo una sopra all'altro non mi sembra una buona idea perché diminuisce il numero di post visibili con una peggiore ottimizzazione dello spazio. Non escludo però che si possa riuscire a farlo. Riguardo alla Home della versione mobile mi sono limitato a queste modifiche
Eliminahttp://www.ideepercomputeredinternet.com/2016/12/blogger-nome-autore-personalizzato.html
http://www.ideepercomputeredinternet.com/2015/04/modificare-colore-sfondo-blogger-versione-mobile.html
Riguardo allo sfondo del footer non so che sistema hai usato. Forse hai provato con questo codice
.mobile .post-footer {background-color:#0ff;}
che mette lo sfondo solo alla parte intrna. Prova con quest'altro
.mobile .footer-outer {background-color:#0ff;}
@#
Ciao Ernesto e buon anno nuovo!
RispondiEliminaHo aperto da poco il mio blog (lelycuriosa.blogspot.it) e sto spulciando il tuo lavoro per adattarlo al meglio alle mie esigenze, perciò intanto grazie mille per la tua generosità.
Ho una domanda da porti.
Ho installato il menù multilivello per la versione desktop e questo del post per il mobile. Va tutto bene, sono riuscita a fare quello che volevo, solo che ho notato che, dal momento in cui ho messo questo secondo menù l'immagine dell'header si è sgranata, ma solo se vista dal mobile, nella versione desktop no, è come prima.
Sai come posso risolvere la cosa?
Intanto grazie in anticipo e buon anno!
È un problema comune che dipende da Google Foto che per alleggerire il peso della Intestazione ne mortifica la qualità. Io in questo blog ho risolto nascondendo l'Header nella versione mobile
Eliminahttp://www.ideepercomputeredinternet.com/2016/11/blogger-header-mobile-media-screen.html
visto anche che l'intestazione aperta da mobile prende veramente troppo spazio
@#
Salve Ernesto, come è possibile che io non ho i tag condizionali con il codice che si trova nella parte visibile della pagina cioè tra body e body?
RispondiEliminaChiara
Il tuo blog è questo?
Eliminahttp://imsweetchiara.blogspot.it/
Hai un template Responsive che si adatta automaticamente alla risoluzione della pagina quindi non hai bisogno dei tag condizionali per il mobile che in ogni caso dovrebbero essere inseriti da noi. Il tuo layout e il tuo menù si adattano al cellulare. Apri questo link
http://quirktools.com/screenfly/#u=http%3A//imsweetchiara.blogspot.it/2017/01/cose-lovby-e-cosa-ho-ricevuto.html&w=414&h=736&a=37&s=1
@#
Ciao, è possibile aumentare lo spessore delle linee che dividono una voce dall'altra del menu? Mi piacciono le cose ben distinte. Grazie
RispondiEliminaSostituisci in queste righe
Eliminaborder-bottom: 2px solid #DDD;
border-top: 2px solid #DDD;
border-bottom: 1px dotted #31AFDB;
i valori 1px e 2px con 3px, 4px o anche di più
@#
No perché le prime due righe si riferiscono al bordo del nome del menu.
EliminaIn pratica vedi le voci che si aprono cliccando su "scegli argomento" che sono tutte separate da una lineetta? Ecco vorrei che anche le voci principali fossero separate così.
P.S. Il terzo codice si riferisce appunto allo spessore delle linee di separazione ma del menu di secondo livello.
Di bordi ci sono solo quelli. Prova a aggiungerne un altro nel punto in cui credi di dover separare di più facendo dei test magari iniziando incollando questo codice
Eliminaborder-bottom: 2px solid #ddd;
sotto alla riga
#menu ul.menus{
@#
Sono riuscito a risolvere inserendo quel codice sotto a /* Sfondo menù secondo livello */
EliminaCiao, continuo ad utilizzare questo bellissimo menu.
RispondiEliminaMi chiedevo però: è possibile inserire un url come per esempio l'indirizzo della home quando si va a cliccare sul titolo?
Sul titolo del menù? Ritengo sia possibile.Facendo riferimento a questo codice prova a sostituire
EliminaIdee per Computer ed Internet
con
<a href='http://www.ideepercomputeredinternet.com'>Idee per Computer ed Internet</a>
ovviamente cambiando nome e URL.
P.S. Non ho testato
@#
Va, grazie mille!
EliminaL'unica cosa è che viene tipo sottolineato con una lineetta in basso.
Dovresti inserire il tag text-decoration:none; però ora non mi va di andare a cercare il blocco giusto di CSS :)
Elimina@#
Quando hai tempo e voglia, figurati, senza impegno!
EliminaNiente io stavolta non riesco proprio :-(
RispondiEliminaCiao, è possibile inserire la favicon prima del titolo?O comunque una piccola immagine?
RispondiEliminaAltra cosa, avevo visto un tuo articolo che riguardava un menu per mobile molto più semplice e strutturato come insieme di link, però ora non riesco più a trovarlo.
Non so se magari ti dice qualcosa.In pratica schiacci sul menu e sulla schermata ti compaiono i link con dei pallini a sinistra.
Per la prima domanda leggi questo post
Eliminahttps://www.ideepercomputeredinternet.com/2018/09/emoji-icone-menu-blogger-widget.html
Il menù per mobile che sto usando anche io è questo. Un altro lo puoi trovare qui
https://www.ideepercomputeredinternet.com/2017/03/blogger-mobile-multilevel-menu.html
@#
Grazie!
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaErnesto per cortesia mi potrebbe creare questo menu senza però la doppia tendina
RispondiEliminalasciandomi solo home page e altri 4 righi per aggiungere altre pagine. Ho provato e riprovato ma elimino sempre qualche parte ci codice importate.
Cancella tutto questo codice
RispondiElimina<li><a href='#'>Scegli Argomento <font size='1'>▼</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>
quindi sotto a
<li><a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html'>Cookie Info</a></li>
ci incolli altre due righe del tipo
<li><a href='#'>Nome Voce</a></li>
con l'URL di collegamento al posto del cancelletto # e digiti il nome della voce
@#
Niente il menu non viene mai imposto come voglio io ho anche provato ad impostarlo completamente come ha messo lei il codice ovviamente cabiando i nomi e i link con quelle delle mie etichette ma non si vede più niente.
Eliminac'è modo per inserire questo menu' al di sotto del titolo del blog?
RispondiEliminaNon te lo dire se funzionerà. Al posto della posizione che ho indicato puoi cercare nel codice quella del contenuto del post. La riga che indica il contenuto è questa
Elimina<data:post.body/>
che devi cercare nella sezione mobile e non in quella desktop ovvero
<b:includable id='mobile-post' var='post'>
Ricordati di salvare il template prima di tentare le modifiche
@#
Il codice va quindi inserito prima di quella riga per visualizzarlo sotto il titolo (non so se funzionerà)
Elimina@#
in quel modo compariva sotto il titolo del post e non sotto il titolo del blog, poi ho trovato la giusta collocazione nel codice, grazie
EliminaCiao Ernesto, sto avendo un problema forse banale. Ossia quello di comporre il menù con più sottomenù. Sotto Home sono riuscito a creare un sottomenù ma questi rimane aperto così ho provato ad aggiungere il parametro ul class='menus' subito sotto ma mi dà errore quando salvo (The element type "ul" must be terminated by the matching end-tag "ul".), anche togliendo il parametro li a fine riga. Forse perché è già presente un sottomenù e non ne accetta due? Infatti se provo ad aggiungere un secondo sottomenù, mi ritorna errore di parametri di chiusura (ossia di li). Non so se c'è qualcosa che dimentico oppure dipende da un limite proprio del menù...
RispondiEliminaNon ho mai testato la possibilità di inserire più di un sottomenu quindi non ti so dire se possa o meno funzionare, mi spiace
Elimina@#
Grazie, pensavo fosse implicita la possibilità. Allora tento con altri menù che suggerisci...
EliminaSalve Ernesto. In questi giorni, sui miei blog, visibile nella versione mobile è comparsa la scritta (Sposta in...) posizionata sulla barra di menu di apertura delle pagine. Sa, per caso, come mai? Grazie.
RispondiEliminaNo. Ho controllato adesso nel mio sito e non ho visto niente del genere. Mi pare una cosa strana. Forse dipende dal modello (ipotesi).
Elimina@#
Grazie Ernesto. Ho provato anche a cambiare modello ma si vede sempre. I temi sono quelli classici di Blogger. L'unica cosa diversa che ho fatto nel blog è un reindirizzamento dalla Home page a una pagina specifica. E' possibile inviarle una immagine esplicativa di quello che vedo?
EliminaSuccede anche a me in due blog su tre. Devo verificare bene i codici, nel caso riesca a risolvere ti farò sapere.
EliminaGrazie Stefania. Ho provato anche a cambiare modelli e ho notato che solo con il Dynamic Views non compare.
EliminaHo smanettato un po'. Dal tema cerchi widget pagelist e togli la riga così nella versione mobile il menù compare senza alcuna scritta ma con solo con la freccetta che apre i sotto menù. meglio che vedere "sposta in"
EliminaGrazie Stefania. Buona soluzione.
EliminaPurtroppo non credo di poterti aiutare perché non sono più sul pezzo da molto tempo nel senso che non mi occupo più di Blogger. Pubblico contenuti di altro genere. Mi spiace.
RispondiElimina@#