Creare un menù su 2 livelli con il CSS per la sidebar o per il sito

In genere i menù vengono posizionati al top del layout del blog per permettere ai lettori di navigare tra i contenuti offerti. Gli utenti di Blogger hanno a diposizione anche il menù nativo delle Pagine Statiche che è una ottima soluzione, però su un solo livello.

Non è difficile creare un menù su più livelli con il solo CSS, senza usare il javascript per non appesantire troppo la pagina. In questo sito ho presentato diversi menù su più livelli per la versione desktop, per la versione mobile e del tipo Responsive che vanno bene per entrambe le versioni.

Ci può però essere l'esigenza di avere un secondo menù da inserire per esempio in una sidebar, quindi visibile solo nella versione desktop, per permettere ai navigatori di selezionare dei contenuti di un particolare argomento. In questo post mostrerò appunto un menù che possa essere inserito in un un widget di una sidebar, o anche del footer, nei blog di Blogger e pure di Wordpress perché non viene usato il javascript ma solo il CSS.

Menù Responsive per desktop e mobile di Blogger su due livelli

Da quando la visualizzazione per il mobile è diventata fondamentale per il traffico di un sito e per la sua usabilità da parte degli utenti, è importante che ogni funzionalità aggiunta sia accessibile da desktop e da mobile.

Gli utenti di Blogger possono da qualche tempo utilizzare i modelli ufficiali responsive oppure installare uno dei tanti Temi Responsive disponibili nel web. Chi ancora usa un Tema di Blogger non Responsive, quando deve pensare al menù, può sostanzialmente seguire due strade.

La prima è quella di installare due menù separati per mobile e per desktop, e inserire i tag condizionali per mostrarli a seconda del dispositivo con cui viene aperto il sito. La seconda è quella di usare un menù responsive che si adatti automaticamente alla risoluzione del dispositivo.

Ho già mostrato diversi menù di Blogger per desktop e mobile tra cui anche qualcuno responsive. In questo post vedremo un menù che si adatta automaticamente alla risoluzione del dispositivo con cui viene aperto e che ha una forma classica quando viene aperto da desktop, e un aspetto più compatto se aperto da mobile.

Come creare e personalizzare il Menù delle Pagine di Blogger.

Il Menù delle Pagine (o delle Pagine Statiche) di Blogger viene creato quasi automaticamente quando vengono pubblicate delle Pagine nel nostro blog su Blogger. Ci sono delle differenze fondamentali tra Pagine e Post nella piattaforma Blogger e la più rilevante tra queste è che le Pagine sono svincolate dalla data di pubblicazione e quindi non finiscono nei feed del sito.

Le Pagine quindi vengono utilizzate per scopi particolari come quello di mostrare una Sitemap del sito per i lettori, di inserire un modulo di contatto,  una Galleria di Immagini e altri contenuti simili.

COME CREARE IL MENÙ DELLE PAGINE STATICHE

Bisogna ricordarsi che il Titolo delle Pagine statiche sarà anche la voce che si visualizzerà nel menù. Per le pagine non esiste la possibilità di personalizzare il Permalink come per i post ma possiamo ugualmente farlo utilizzando un escamotage. Su Blogger si possono creare fino a 20 pagine statiche. Per creare una pagina si va su Bacheca -> Pagine -> Nuova Pagina per aprire l'Editor delle Pagine che sarà identico a quello dei post. Non si potranno però aggiungere Etichette, Descrizione di Ricerca e Read More.

Menù multilivello per versione mobile di Blogger con casella di ricerca.

La realizzazione del menù è una delle operazioni più lunghe e noiose sia per gli utenti di Blogger, sia per quelli di Wordpress. È diventata ancora più stressante da quando è fondamentale la versione mobile del sito specie per gli utenti di Blogger.

Chi per il blogging utilizza la piattaforma di Google deve in definitiva scegliere tra queste soluzioni:

1. Utilizzare un modello Responsive scaricato da internet già fornito di Menù
2. Usare un modello Responsive e installare un menù Responsive per Blogger
3. Installare solo un menù per desktop con tag condizionali nascondendolo nel mobile
4. Installare due menù distinti, uno per il desktop e uno per il mobile, in modo da visualizzarli rispettivamente se aperti da computer o da dispositivo mobile.

Installare su Blogger un menù con due livelli e più colonne.

Anche oggi vediamo come installare un menù su Blogger che ha la particolarità di avere una grande ricchezza di voci ed è quindi adatto a chi voglia mostrare ai visitatori un gran numero di collegamenti. In questo menù invece di privilegiare il numero dei livelli si punta su quello delle colonne.

Come certo saprete ci sono menù che hanno delle voci secondarie per ogni voce principale e molte voci secondarie aprono a loro volta un livello successivo del menù. In questo caso ci sono solo due livelli ma il secondo livello invece di avere le voci poste in verticale le ha suddivise in colonne e questo dà modo di aggiungere molti elementi. Questo stile di menù è molto utilizzato in siti professionali e sono sicuro che incontrerà il gradimento di molti lettori.

Come fissare in alto i menù di Blogger allo scorrere della pagina.

Nel precedente articolo abbiamo visto una versione fluttuante di un Menù Responsive per Blogger. Come ho già spiegato in quel post fissare in alto un menù orizzontale semplicemente con i CSS è impresa non da poco.

Si può però risolvere usando il javascript insieme alla libreria esterna jQuery che permette di ancorare alla parte alta della pagina molte versioni di menù come per esempio il Menù Multilivello con casella di ricerca o il classico menù delle Pagine Statiche di Blogger.

In questo articolo mostrerò un procedimento generale per rendere flottanti i menù di Blogger per poi adattarlo ai due casi particolari appena elencati.

Menù Responsive e Flottante per Blogger.

Ho appena risposto a un commento in cui mi si chiedeva se fosse possibile rendere fluttuante un Menù Responsive per Blogger. La mia risposta è stata sul momento negativa perché usando il CSS si può fare ben poco per fissare un elemento in alto quando si scorre la pagina.

Infatti la parola fluttuante o flottante è una traduzione letterale della parola inglese floating che si riferisce al movimento di un oggetto in acqua o in altri liquidi. Per abuso di linguaggio si definisce altresì flottante anche un elemento che rimane fisso nel layout di una pagina web quando la si scorre. Il CSS ha un tag specifico per questa proprietà, che è position:fixed e che insieme a position:absolute e position:relative permette di posizionare gli elementi in modo assoluto o relativo.

Come eliminare o aggiungere opzioni al menù contestuale del destro del mouse in Windows 10.

Sono moltissimi i programmi che dopo la installazione aggiungono le loro opzioni al menù contestuale che si apre quando si clicca con il destro del mouse su un file o su un punto dello schermo. Alcune di queste opzioni sono imprescindibili perché rappresentano il metodo migliore per usare un determinato software.

È il caso per esempio di 7Zip o di altri programmi per creare o aprire file di archivio che vengono solitamente usati proprio cliccando sugli stessi file con il destro del mouse. Un altro esempio di utilizzo è quello delle opzioni di Dropbox per creare link di condivisione direttamente dal desktop.  Spesso però i produttori di software abusano della possibilità di aggiungere opzioni e il menù contestuale del mouse diventa così popolato da non entrare  più nello schermo.

Menù multilivello per la versione desktop di Blogger con casella di ricerca.

Visto le numerose richieste che ho ricevuto sul menù attualmente installato su questo sito ho pensato di pubblicare un post per condividerne la procedura di installazione. Innanzitutto bisogna ricordare che questo menù è multilivello e che si possono cioè creare fino a 4 livelli di voci di menù.

Un'altra caratteristica che me lo ha fatto preferire ad altri menù è quella che non utilizza javascript ma solo CSS3 e questo lo rende molto più rapido nell'apertura e non appesantisce la velocità del sito oltre a non aver bisogno di javascript o hosting esterni.

Il menù originale ha anche una sua casella di ricerca che però personalmente ho tolto preferendo il motore di ricerca di Adsense che è indubbiamente più performante. Nel codice ho anche inserito due tag di posizionamento in modo da settare la distanza del menù dal contenuto che gli sta al di sopra e da quello che gli sta al di sotto. Il menù può essere installato insieme a quello ufficiale delle Pagine Statiche. Quest'ultimo si può lasciare per esempio sotto l'Intestazione mentre il Menù multilivello può essere posizionato sopra all'Header.

Menù Responsive di Blogger per desktop e per mobile.

A partire dal prossimo 31 Agosto verrà presumibilmente disabilitato il servizio hosting di Google Drive e questo avrà come effetto che i widget e i menù che utilizzano dei file javascript caricati su Google Drive smetteranno di funzionare. Ho quindi pensato di riproporre alcune personalizzazioni importanti che escludano hosting esterni e che caricano i CSS e i javascript direttamente nel modello.

In questo post presenterò un menù Responsive. Ricordo che la Grafica Responsive altrimenti chiamata anche Responsiva permette al layout degli elementi di adattarsi alla risoluzione del dispositivo con cui viene aperta la pagina. Ricordo che si possono scaricare da internet Modelli Responsive per Blogger e Temi Responsive per Wordpress.

Come eliminare la sfumatura dal menù delle pagine di Blogger.

Giusto ieri mi è stata posta una domanda in un commento riguardo alla personalizzazione del Menù delle Pagine Statiche di Blogger. Visto che il tema potrebbe interessare altri lettori ho deciso di pubblicare un post esemplificativo della modifica che mi era stata richiesta nel commento.

In alcuni blog di Blogger il menù delle pagine statiche ha una sfumatura che a qualcuno sicuramente piacerà ma di cui altri ne farebbero a meno. Tale sfumatura non viene inserita con un tag HTML del gradiente di colore ma tramite l'URL di una immagine dei server di Blogger.

L'aspetto di un menù siffatto è simile a questo

Come installare in Blogger un menù su 2 livelli con casella di ricerca e pulsanti per i social.

Gli utenti di Blogger possono usare le pagine statiche per realizzare un menù orizzontale che però è solo su un livello. Questa soluzione non è sufficiente per siti che abbiano pubblicato molti post su diversi argomenti e che quindi hanno bisogno di menù su più livelli per aggiungere tutti gli elementi.

Il menù più completo che si possa realizzare è quello che oltre a un menù su più livelli abbia implementata anche la casella di ricerca e le icone con collegamento ai vari social network. Un altro tema importante è quello del posizionamento del menù. Le due posizioni preferite sono quella subito sopra alla Intestazione e quella subito sotto a quest'ultima. Si può però scegliere anche di mostrare un menù siffatto insieme a quello del menù delle pagine statiche.

Personalizzare il Menù di Avvio o Start Menù di Windows 10.

Il passaggio da Windows 7 e Windows 8.1 verso Windows 10 procede a ritmi serrati e in questo momento credo che la maggior parte di persone che usano un PC Windows tutti i giorni abbiano provveduto a installare Windows 10. Se non lo hanno ancora fatto dipende oltre che da una naturale prudenza sempre apprezzabile da componenti hardware non supportati dal nuovo sistema operativo.

Le novità più importanti di Windows 10 sono Cortana,  un software di assistenza e riconoscimento vocale, Microsoft Edge, il nuovo browser di casa Microsoft, la stampante Microsoft Print to PDF oltre a una grafica più semplice e personalizzabile.

In questo articolo vediamo appunto come personalizzare l'aspetto grafico di Windows 10. Cliccando sul pulsante Start in basso a sinistra si aprirà il menù di avvio che di default è piuttosto piccolo.

Come aprire i link del menù delle Pagine Statiche di Blogger in un'altra scheda.

Nel precedente post abbiamo visto come su Blogger si possa realizzare un menù orizzontale con il widget dell'Elenco di link in cui si possono aggiungere anche link a pagine esterne. Di default tale menù non permette di far aprire i link presenti in un'altra scheda del browser e questo può essere negativo specialmente se abbiamo aggiunto dei collegamenti ad altri siti come per esempio i nostri account nei vari social network.

Si può risolvere questo piccolo problema con una modifica al modello. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca con Ctrl+F la stringa PageList1 che è l'ID del widget delle Pagine. Ci potrebbero essere delle differenze tra modello e modello ma il codice non dovrebbe essere troppo diverso da quello del seguente screenshot dopo che si è cliccato sulle freccette nere a sinistra per visualizzarlo interamente

Come creare un menù orizzontale in Blogger senza codice.

Siete utenti di Blogger ma non amate molto operare con i codici? Sicuramente non siete una eccezione. Vi piacerebbe creare un menù orizzontale da mettere al posto di quello delle Pagine Statiche? Oppure volete metterlo insieme a quello magari sopra, oppure sotto?

Su Blogger è possibile operare un piccolo trucco per far diventare un orizzontale un elenco verticale. La ragione di questa modifica sta nei CSS specifici per le sezioni che stanno al di sopra dell'area del post e che vengono definite come Crosscol o Cross-Column. Queste sezioni sono presenti in tutti i modelli ufficiali di Blogger esclusi quelli del tipo a Visualizzazione Dinamica. Se avete un template scaricato da internet può capitare che questa sezione non ci sia.

Menù Laterale a scomparsa per Blogger.

Dopo un paio di mesi in cui ho parlato e scritto di altro passo a presentare un nuovo menù che credo possa essere utile a diverse tipologie di blog. Va detto che è un tipo di menù che sarà visibile solo nella versione desktop ma che è di facile installazione visto che non occorre neppure modificare il modello.

Insieme alle voci classiche del menù che possono essere scelte a piacere sono presenti anche i bottoni per seguire l'autore su Twitter, nella pagina fan di Facebook e nella pagina brand di Google+. Accanto a ciascuna voce del menù è presente una icona particolare generata dallo script Font Awesome.

Il menù viene visualizzato solo se si passa con il cursore sopra alla icona posta in alto a destra e quindi permette un grosso risparmio di spazio

Responsive Menù Multilivello per la versione mobile di Blogger con casella di ricerca.

Nel blog in cui è ospitato questo articolo al momento utilizzo due menù, uno per la versione desktop e uno per la versione mobile. Ci sono anche menù di tipo Responsive che si adattano automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina e che quindi possono servire per entrambe le versioni.

Personalmente però preferisco due menù distinti per desktop e mobile a meno che non si abbia un Modello Responsive di Blogger che spesso hanno anche un Menù Responsive già preinstallato. In questo articolo presenterò un menù che verrà visualizzato solo da mobile e segnatamente dai dispositivi che abbiano una risoluzione uguale o inferiore a 768 pixel che è poi quella dell'iPad. 

Come creare un Menù Responsive per Blogger.

Ricordo che il Responsive Design o Disegno Responsivo è quel tipo di grafica che si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina. Ci sono a disposizione degli webmaster dei Temi Responsive per Wordpress per creare un blog che sia visibile in modo adeguato da desktop come da smartphone o tablet. Inoltre una buona visualizzazione mobile friendly viene premiata da Google mentre vengono penalizzati i siti che non la abbiano.

Anche gli utenti di Blogger possono scaricare dalla rete modelli con il Responsive Design ma possono anche modificare un template ufficiale di Blogger per farlo diventare Responsive. Uno degli elementi più difficili da adattare è certamente il menù. Gli utenti della piattaforma Blogger possono risolvere con i tag condizionali e mostrare un dato menù per il mobile e un altro menù per il desktop.

Come diminuire o aumentare lo spazio tra gli elementi del layout di Blogger.

Qualche giorno fa ho ricevuto una richiesta di aiuto in un commento su come aumentare lo spazio tra il menù delle Pagine statiche di Blogger e l'area del post a cui ho risposto che ci avrei fatto un articolo di tipo generico per modificare gli spazi tra i vari elementi del layout attraverso i CSS.

Usiamo come esempio proprio quello del lettore e utilizziamo il browser Firefox con il suo strumento Analizza elemento che personalmente giudico migliore rispetto a Ispeziona elemento di Chrome. Sono entrambi dei tool che ci permettono di risalire al selettore univoco di un dato elemento del layout in modo da impostare dei nuovi margini. Mi limiterò all'esempio citato ma questo sistema può essere utilizzato sostanzialmente per tutti gli "oggetti" presenti nel layout di una pagina HTML, e non solo della piattaforma Blogger, come un titolo di un widget, l'immagine dell'Header, la scritta Aggiungi un commento o i bottoni per la condivisione sui social network.

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

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.