Come installare un menù multilivello con casella di ricerca ma senza javascript in un blog di Blogger.
La realizzazione di un menù è una delle cose di maggior impegno per un webmaster visto che bisogna scegliere la qualità e la quantità di voci da mostrare, l'aspetto e la tipologia del menù, testare come si visualizza con i vari browser e non ultimo inserire tutte le voci e gli indirizzi relativi.
Gli articoli che ho dedicato ai menù non sono tra i più visti ma sicuramente tra i più commentati e quelli che risultano avere una permanenza più elevata dei visitatori. Il menù che vado a presentare funziona correttamente con Firefox, Chrome, Safari, Opera e Internet Explorer 10. Ha qualche problema di visualizzazione con i browser IE delle versioni precedenti.
Si tratta di un menù orizzontale pensato su più livelli che possono essere creati o eliminati a piacere in fase di personalizzazione. Alla fine delle voci del menù è stata introdotta anche una casella di ricerca per gli articoli del blog che funziona tramite l'inserimento di una keyword nel campo relativo e andando su Invio per trovare gli articoli che abbiano una corrispondenza con tale parola chiave.
Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga di codice ]]></b:skin> quindi, subito sopra, incollate questo blocco di CSS
Salvate il modello. Sempre su Modello > Modifica HTML selezionate Vai al widget > Header1
e scorrete il codice fino a che non trovate la fine della intestazione
Il codice dell'Header terminerà con uno o due </div> e sarà seguito da un <div class='…> . Subito dopo la fine del codice della Intestazione si incolla quello che sarà il codice del nostro menù
PERSONALIZZAZIONI DEI CSS
Nel codice dei fogli di stile sono stati colorati di rosso i parametri più importanti da modificare e accanto sono stati inseriti dei commenti colorati di verde per indicare a cosa si riferiscono. Possiamo scegliere la larghezza del menù in percentuale o in pixel, il raggio di curvatura dell'arrotondamento, il colore dello sfondo delle voci con o senza l'effetto del mouse, il colore del testo con o senza mouse, il colore di sfondo del menù e quello dei sottomenù se puntati o meno dal cursore e la larghezza dei sottomenù. I più esperti potranno ovviamente modificare anche tutti gli altri parametri. Ai neofiti ricordo che ho pubblicato un post sui codici dei colori che potrebbe tornarli utile.
PERSONALIZZAZIONE DELLE VOCI DEL MENU
Per aggiungere una nuova voce principale, prima di <!-- Casella di Ricerca Inizio -->, incollate<li class="top"><a href='#' class="top_link"><span>Voce X</span></a></li>
Se invece volete inserire una voce insieme a dei sottomenù il codice è il seguente
<li class='top'><a href='#' class='top_link'><span class='down'>Voce X</span></a>
<ul class='sub'>
<li><a href='#'>Voce X.1</a></li>
<li><a href='#'>Voce X.2</a></li>
<li><a href='#'>Voce X.3</a></li>
</ul>
</li>
<ul class='sub'>
<li><a href='#'>Voce X.1</a></li>
<li><a href='#'>Voce X.2</a></li>
<li><a href='#'>Voce X.3</a></li>
</ul>
</li>
Se poi vi serve creare un altro sottomenù per esempio della Voce X.1, al posto della riga colorata di viola inserite quest'altro codice
<li><a href='#' class='fly'>Voce X.1</a><ul>
<li><a href='#'>Voce X.1.1</a></li>
<li><a href='#'>Voce X.1.2</a></li>
<li><a href='#'>Voce X.1.3</a></li>
</ul></li>
<li><a href='#'>Voce X.1.1</a></li>
<li><a href='#'>Voce X.1.2</a></li>
<li><a href='#'>Voce X.1.3</a></li>
</ul></li>
ELIMINAZIONE DELLA CASELLA DI RICERCA
Coloro che non vogliono visualizzare la casella di ricerca possono eliminarla cancellando tutto il codice dei CSS posizionato dopo la riga /* CSS della casella di ricerca */ e tutto il codice del menù che va da <!-- Casella di Ricerca Inizio --> fino a <!-- Casella di Ricerca Fine --> righe in verde comprese.
Ricordo che se non visualizzate bene il menù sul vostro blog con Internet Explorer o con Chrome si può sempre inserire nel template un codice di compatibilità con questi browser per vederlo correttamente. Se non avete la riga indicata nel post linkato perché state usando un template scaricato da internet basta che dopo <head> incolliate questa riga di codice
Una particolarità importante di questo menù è che non usa javascript ma solo CSS e quindi per questa ragione ha una velocità di caricamento molto più alta dei menù simili ma con javascript. Concludo osservando che il menù invece di essere posizionato sotto l'Intestazione può benissimo essere inserito dopo la Navbar e prima dell'Header andando su Vai al widget > Navbar1 e seguendo la stessa procedura che è stata appena illustrata.
Ciao Ernesto. Questo menù mi è piaciuto molto, quindi ho deciso di metterlo, al posto del menù tradizionale di blogger. Ovviamente questo, a differenza di quello blogger, non è compatibile con la versione mobile, su cui risulta totalmente sballato.
RispondiEliminaAvevo pensato di non far comparire il widget sulla versione mobile, ma essendo incorporato nell'intestazione, mi andrebbe via anche il logo. Nella tua demo però nella versione mobile non appare, pur essendoci l'intestazione. Come hai fatto?
Se serve il mio blog è infoapplecomputer.blogspot.it
@# Ho semplicemente scelto il modello semplice su Modello > Cellulare. Ma anche Predefinito dovrebbe andare bene.
Elimina1) ah ok. Quindi se io volessi mantenere il mio modello per il mobile, non posso togliere questo menù?
Elimina2) Che voce devo aggiungere al CSS per far sì che il menù venga semitrasparente (sempre se possibile)?
3) se diminuisco la lunghezza della barra di ricerca, la barra mi viene "tagliata". Cioè da una parte stondata, mentre dalla parte destra tagliata di netto. Come risolvo? ho la necessità di accorciarla.
Grazie mille
@#
Elimina1) In teoria si possono inserire due tag condizionali come illustrato nella seconda parte di questo post
http://www.ideepercomputeredinternet.com/2013/01/blogger-mobile-modello.html
<b:if cond="data:blog.isMobile">
<!-- Visibile solo nei dispositivi mobili-->Codice di un elemento da visualizzare solo nel mobile al posto del menù
<b:else/>
<!-- Visibile solo tramite desktop -->Codice del menù
</b:if>
2) Leggi qui
http://www.w3schools.com/css/css_image_transparency.asp
o anche qui
http://www.ideepercomputeredinternet.com/2012/11/trasparenza-effetto-immagini.html
però non è cosa immediata
3)La barra di ricerca ha una immagine di sfondo, questa
https://lh3.googleusercontent.com/-Da_UMxywwnY/UcoYOhXiQbI/AAAAAAAAiWs/N89PODWYsIU/s1600/ricerca.png
che è 228x22 pixel. Se vuoi accorciarla devi ridimensionare questa immagine nella sola larghezza lasciando invariata l'altezza
Grazie mille Ernesto, molto efficiente come al solito... un'ultima domanda. Se faccio come hai proposto tu per la versione mobile, teoricamente potrei anche inserire un secondo menù: uno per il desktop e uno per il mobile; giusto?
Elimina@# Sì è così. Però quei tag condizionali quando li ho testati non hanno funzionato per tutti i modelli. E' per questo che ho usato l'avverbio "teoricamente"
EliminaAncora una domanda Ernesto: Mi hai dato il codice per far apparire il menù nella versione desktop ed un altro elemento nella versione mobile. Se io invece nella versione mobile non volessi far apparire niente?
EliminaNon conosco il tag che sia l'opposto di questo
Elimina< b:if cond="data:blog.isMobile" >
per mostrare cioè un elemento solo nella versione desktop. Se proprio non vuoi mettere nulla nel mobile prova a inserire una piccola immagine dello stesso colore dello sfondo o un testo con i font colorati come il background @#
Ho risolto con questo codice:
EliminaCodice del menù
E poi ho inserito il widget delle pagine specificando Mobile='only'.
Grazie mille ernesto per l'aiuto che mi hai dato e scusa per il tempo che ti ho fatto perdere ;)
Non mi ha pubblicato il codice, comunque era quello che mi avevi suggerito te, lasciando vuota la parte del mobile e riempiendo solo l'else
Eliminal'ho applicato al mio blog, era proprio quello che cercavo da tanto tempo... e poi con quella casella cerca incorporata rende il blog più professionale, sei il migliore!
RispondiEliminaGrazie
Ciao, purtroppo questa sera ho provato ad installare questo meraviglioso menu, tutto stava procedendo come doveva fino a quando non è andata via la corrente e una volta riacceso il pc non ho capito più nulla. In pratica ho provato a rifare i procedimenti per arrivare all'installazione di questo menu ma quando vado nella voce "header 1" per eseguire il secondo passaggio ed incollare il CSS per menù multilivello, ma mi si sono sballati tutti i codici HELP PLEASE =(
RispondiEliminaSpero che tu prima di procedere abbia salvato una copia del modello (template) come consigliato nel post. In questo caso basta che tu lo ripristini e inizi di nuovo l'installazione
Elimina@#
L'ho fatto, ma purtroppo non mi va in nessun modo, non so, forse andando via la corrente improvvisamente non è andato tutto come previsto... in tal caso devo soltanto rifondare il blog, giusto? :/
RispondiEliminaTi è andata via la corrente proprio mentre salvavi il file? Veramente sfortunata. Non credo perché non avresti potuto fare delle modifiche. Dovrebbe caricare e ripristinare il tutto. Se non ti ricordi dove è il file XML del modello è chiaro che dovrai caricare uno nuovo
RispondiElimina@#
Questo commento è stato eliminato dall'autore.
RispondiEliminaP.s. risolto ed ora è fantastico! Grazie ancora!
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaCiao! Seguo il tuo blog da un po' e trovo che tu sia davvero grandioso! Complimenti!
RispondiEliminaAl contrario, però, io purtroppo non sono molto pratica con i blog >.<
Tuttavia qualche giorno fa ho aperto un blog di cucina e non voglio rinunciarci! Ho inserito questo fantastico menu che mi è venuto benissimo (grazie alle tue istruzioni ovviamente) solo che ora vorrei sapere una cosa perché non mi è chiara.Cerco di spiegarmi quanto meglio possibile. Allora una delle voci sul mio menu dice "Speciali" cliccandoci su si apre una sottovoce "ricette festività" sulla quale cliccando si apre ancora un elenco, in cui ci sono tutte le festività scritte. Ora, nella parte "Epifania" (che si avvicina ormai) ho inserito una ricetta, ma vorrei inserire l'url di altre ricette sempre nella stessa categoria, come faccio? (Il che vale per il resto delle categorie che ho creato, come "torte", "antipasti" etc)
Grazie.
La soluzione migliore è quella di linkare non l'URL del post con una ricetta "Epifania" ma l'URL della etichetta "Epifania" che inserirai in tutti i post che abbiano una relazione con questa festività. L'URL in questione dovrebbe essere di questo tipo
Eliminahttp://nomeblog.blogspot.com/search/label/epifania
Questa stessa operazione puoi farla ovviamente anche con le altre etichette
@#
Questo menù funziona solo per blog su piattaforma Blogger. Non so se esiste qualcosa di simile per Tumblr
RispondiElimina@#
È già tanto se trovo il tempo per documentarmi su Blogger :)
RispondiEliminaMi sono occupato raramente di Tumblr
@#
Ciao Ernesto. Ho installato questo menu sul sito della scuola materna di mio figlio che ho rifatto completamente (http://www.asilozanella.it/). Esattamente quello che serviva, grazie.
RispondiEliminaTi chiedo questo, però, perché non riesco davvero a trovare la soluzione, più che altro volevo capire se sono io che non ci arrivo oppure se la cosa proprio non è possibile.
Ogni voce principale del menù rimanda ad una pagina statica. Vorrei che le sottovoci rimandassero alla stessa pagina statica, ma a punti differenti della stessa. Ti faccio l'esempio pratico, che è l'unico attualmente visibile sul sito: VITA SCOLASTICA ha come sottovoci Gli orari, L'abbigliamento, I pasti, Assenze e malattia. Clikkando su I pasti, tanto per fare un esempio, vorrei che la pagina si aprisse esattamente al suo terzo paragrafo. Spero di essere stata sufficientemente chiara.
Attualmente (e tanto per non fare comparire l'avviso che la pagina del blog non esiste) ho inserito il medesimo link (quello alla pagina statica) per tutte e quattro le sottovoci. La pagina dunque si apre sempre all'inizio, però non sarebbe esattamente quello che avevo in mente.
Ho provato a dare un'occhiata al tuo articolo http://www.ideepercomputeredinternet.com/2013/10/segnalibri-pagina-web-marcatore-hash-url-frammento.html però ho l'impressione non sia esattamente quello giusto.
Ti ringrazio anticipatamente.
Invece è proprio il post giusto per fare quello che chiedi. In una delle voci secondarie incolla questo link per esempio
Eliminahttp://www.asilozanella.it/p/la-vita-scolastica_8.html#orari
quindi vai all'inizio del capitolo degli Orari che potrebbe essere un titolo o un paragrafo. Devi modificare il codice in questo modo
<h3 id="orari">Titolo degli Orari</h3>
nel caso che tu abbia usato il tag di un titolo oppure
<p id="orari"> Inizuio ddel paragrafo degli orari....
nel caso tu abbia solo usato dei paragrafi.
Per gli altri link utilizzi la stessa tecnica. Per esempio
http://www.asilozanella.it/p/la-vita-scolastica_8.html#abbigliamento e
http://www.asilozanella.it/p/la-vita-scolastica_8.html#pasti
per poi creare gli ID corrispondenti. Ricordati di non usare spazi.
@#
Wow funzionaaaaa!!! Grazie mille, favoloso.
EliminaPerò ti posso chiedere una cosa (tanto per capire fino in fondo)?
Quando leggo sul tuo post:
per la demo di una stella a 6 punte ho messo questo link
http://blog-statico.blogspot.it/#star-six1
e prima del # ci trovo /
come mai nel mio link di esempio qui sopra / sparisce?
http://www.asilozanella.it/p/la-vita-scolastica_8.html#orari
Io, prima, lo mettevo. Può essere che sia stato per questo che non mi riusciva, cioè per quello / in più?
Ho riletto più volte il post, mi sono persa io il passaggio oppure è ovvio toglierlo (ma non per me)?
La slash non va messa. Se nel post c'è si tratta di un refuso. Ora sono al cellulare ma quando vado al PC rimedio (se me lo ricordo)
Elimina@#
Ciao Ernesto, ho già seguito i tuoi consigli un bel po' di volte, e ieri ho deciso di mettere il menu sul mio blog (http://www.italianskiblog.com/) e funziona benone!
RispondiEliminaUn'unica domanda: nel caso è possibile staccare il menu dall'immagine d'intestazione?
Adesso non posso testare quindi non posso assicurare che funzioni ma prova a aggiungere la riga
Eliminamargin-bottom:30px;
dopo la riga
border-radius:12px; /* Raggio curvatura bordi voci principali */
@#
Funziona anche bene! Grazie e a presto!
EliminaCiao Ernesto e innanzitutto grazie per tutte le conoscenze che metti così gentilmente a nostra disposizione.
RispondiEliminaIn un blog di prova stavo cercando di "creare" questo menù. Mi funziona tutto, solo che è tutto spostato a sinistra. Mi chiedevo perciò se fosse possibile centrarlo.
In alternativa mi piacerebbe sapere se è possibile, inserendo qualche codice, rendere a più livelli il menù che ho già inserito mesi fa nel blog e che puoi vedere qui: http://scarabocchidipensieri.blogspot.it/
Grazie ancora!
@# Non ti so dire su due piedi se sia possibile centrarlo. Prova a incollare questa riga di codice
Elimina<div align='center'>
prima di
<div id='menuMultilevel'>
<ul class='menu'>
.....
e l'altro tag
</div>
alla fine dello stesso codice cioè dopo
<!-- Casella di Ricerca Fine -->
</ul>
</div>
Così Funziona, anche io avevo il problema e ho risolto aggiungendo un div sopra con allineamento al centro :)
EliminaSarebbe possibile modificare anche il colore delle voci presenti nel menu principale?
RispondiEliminaIntendo al passaggio del mouse...
RispondiEliminaSpiegandomi meglio e guardando l'immagine contenente il menu d'esempio: come per la Voce 2.2 mi piacerebbe avvenisse lo stesso per la Voce 2
Sì è possibile. Aggiungi questa riga di codice
Elimina.menu li.top a:hover {background:#008250;}
subito dopo
.menu li:hover li a {
background:none;
}
Ovviamente puoi scegliere il colore che ti pare
@#
Ho fatto questa modifica che dici anche al mio menù :))
EliminaNon ci avevo pensato :)
@#
Ciao Ernesto ho inserito questo menu nel mio blog ed è perfetto. Nella versione mobile però è un disastro, come posso risolvere? È possibile adattarlo o metterlo magari in verticale anziché in orizzontale solo per la versione mobile? Grazie
RispondiEliminaps il blog è gattosandro-viaggiatore.blogspot.it
EliminaLa soluzione migliore è quella di lasciare il widget solo per la versione desktop. Per la versione mobile si può installare un altro menù. Leggi qui
Eliminahttp://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
@#
Ok, ho messo il menu per la versione mobile ma adesso li ho tutti e due. Devo inserire questo codice:
EliminaCodice del menù
Giusto? Solo che non ho capito dove. Scusami e grazie per il tuo prezioso aiuto.
Devi seguire il post che ti ho linkato nel commento 16.b. Per non visualizzare questo menù nella versione mobile devi inserire due tag condizionali sopra e sotto il codice del menù che si trova in questa pagina
Eliminahttps://docs.google.com/document/d/1-Lrw6-KDvlKaszgWSchyUfV1Ri7_b4uJ-uwMHvqZuN8/pub
In sostanza devi incollare questo blocco di codice
<b:if cond='!data:blog.isMobile'>
..... Codice del menù di cui c'è un esempio in questa pagina https://docs.google.com/document/d/1-Lrw6-KDvlKaszgWSchyUfV1Ri7_b4uJ-uwMHvqZuN8/pub ....
</b:if>
Ovviamente il blocco di codice tra i puntini di sospensione è solo una indicazione
@#
Ora ho capito! Grazie mille
RispondiEliminaBuona sera la ringrazio per le utilissime informazioni che mi sta fornendo da anni con il suo blog, riguardo questo post ormai datato più di 3 anni fa ma affrontato da me adesso, vorrei chiederle perchè non mi cambia il formato dei font del menù? sebbene io lo cambi dove descritto, non cè niente da fare! e purtroppo la lettura del menu diventa difficoltosa essendoci un testo di piccole dimensioni. se mai dovesse leggere questo post potrebbe darmi una soluzione a questo problema? la ringrazio stefano
RispondiEliminaNon ho capito se vuoi cambiare la famiglia di font o le dimensioni o tutte e due le cose. Può darsi che vengano ereditate delle impostazioni del sito. Per la famiglia di font cambia entrambe queste due righe
Eliminaont-family:arial, verdana, sans-serif;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
con
font-family: Georgia !important;
dove al posto di Georgia metti la famiglia di font che preferisci. Per la dimensione c'è solo questa riga
font-size:13px;
che puoi modificare in questo modo
font-size:16px !important;
Dove al posto di 16 metti il valore che credi. Dovrebbe funzionare
@#
Ciao Ernesto! Ho trovato tutto veramente molto utile, rimane solo un piccolo inghippo. Sono riuscita a modificare i colori ma rimane il verde al passaggio del mouse, ed inoltre le tendine risultano in secondo piano rispetto ai post e quindi non sono pienamente visibili! Mi puoi aiutare? Grazie mille!
RispondiEliminaPer quello che riguarda il verde devi cambiare questo codice
Elimina#008250 in tutte le sue occorrenze.
Per il menù che sta in secondo piano sostituisci questi codico
z-index:5;
z-index:2;
z-index:3;
z-index:4;
rispettivamente con
z-index:599999;
z-index:299999;
z-index:399999;
z-index:499999;
Se non bastasse aggiungici qualche altro 9 al numero di z-index
@#
Noto anche con sorpresa che cliccando sul mio profilo dica "profilo non disponibile", nonostante io abbia un profilo di blog pubblico. Mi sai dire come mai? Ti metto qui l'indirizzo del blog cosi da verificare!
RispondiEliminahttps://coppiavventura.blogspot.co.uk/
Con il tuo account Blogger apri questa pagina
Eliminahttps://www.blogger.com/edit-profile.g
quindi segui le indicazioni per rendere pubblico il tuo profilo
@#
Grazie per le risposte! Ho risolto il colore ma per quanti 9 io aggiunga il menù a tendina rimane comunque nascosto dietro la parte centrale del blog e non permette ne di vedere cosa c'è scritto ne di cliccarci sopra ovviamente :(
RispondiEliminaCiao Ernesto! Ho inserito questo menu nel mio blog ed è andato tutto liscio. Una sola cosa: quando dal cellulare si cliccano le voci del menù la schermata si sposta sempre verso sinistra, sai come risolvere questo problema? Grazie in anticipo
RispondiEliminaQuesto menù è pensato per i desktop. È un miracolo che funzioni abbastanza bene anche da mobile visto che non è Responsive.
EliminaSe vuoi un menù anche per il mobile devi sceglierne un altro e inserire dei tag condizionali. È tutto spiegato in questo post
http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
@#
ciao ernesto una domanda se io volessi aggiungere un immagine di sfondo al menu cosa dovrei fare?
RispondiEliminaAl posto di background:#D84938; metti background:#FFF url(Indirizzo_Immagine.png) no-repeat; però non so cosa verrà fuori
Elimina@#
Complimenti utilissimo, nel mio blog l'ho installato e funziona perfettamente.
RispondiEliminaMa siccome voglio sempre strafare ho inserito delle immagini nelle sottovoci modificando la scritta così:
< li >< a href='Link_URL' >< img src='https://it.wiki.elvenar.com/images/3/39/Good_marble_big.png'/ > MARMO < /a >< /li >"
l'immagine si vede e la scritta pure l'unico problema lo si nota con la selezione, sembra che il testo MARMO, ACCIAIO... messo accanto all'immagine sia più in basso dell'immagine stessa e che quando si seleziona risulta tagliato.
Per chiarire meglio ti allego uno screen:
https://s15.postimg.cc/nx1hox4ff/menu.png
Non so se la tua sia una domanda o solo un contributo. Cmq il menù è strutturato per il testo e non per le immagini. Mi pare che tu abbia fatto il massimo. Non vedo come migliorare la situazione. Cambiando i valori dei margin e dei padding c'è il rischio di peggiorare l'aspetto in zone del menù senza immagini
Elimina@#
innanzitutto grazie mille per la risposta.
EliminaEra una domanda, non un contributo in quanto non ho competenze tali per fornire addirittura un contributo.