Menù Verticale per Blogger senza javascript.

Si sa che inserire javascript nel modello implica una diminuzione della velocità di caricamento, parametro che da circa un anno è entrato a far parte del "paniere" di Google per determinare il posizionamento di una pagina. I dati presi in considerazione sono comunque più di 200 e non si sa che peso sia stato dato alla rapidità con cui il sito si carica. Tra poco anche in Italia sarà introdotto il cosiddetto Panda Update e, quando accadrà, l'algoritmo diventerò ancora più complesso con risultanze tutte da verificare.

E' comunque sempre buona norma quella di cercare di mettere nel sito solo gadget utili e evitare quelli troppo pesanti. Vado a illustrare l'inserimento di un menù verticale che fa completamente a meno del javascript e che può essere inserito in una sidebar come menù di supporto a quello principale. Sono stati usati solo i CSS e gli attributi di transizione. Ecco uno screenshot

Tiny Dropdown per Menu su più livelli con inserimento di testo.

Riprendo la presentazione di menù da installare in blog su Blogger. Tiny Dropdown è stato realizzato da Scriptiny ed ha il pregio di essere personalizzabile come colori, numero di voci principali e secondarie, velocità, opacità e dissolvenza. Ma andiamo per gradi e andate a guardarvi la

• Demo del Menù Tiny Dropdown -

I colori di default sono sul grigio ma come detto si possono personalizzare e renderli compatibili con quelli del nostro sito

 

Menù a tendina con tutti i titoli dei post che sono stati pubblicati.

Avere la possibilità di accedere a tutti i post del blog dalla homepage o comunque da una pagina appositamente creata, è certamente l'obiettivo di molti blogger. La cosa è importante anche ai fini del posizionamento nei risultati di Google perché linkare un articolo gli dà certamente una spinta in questa ottica. Facendo delle opportune modifiche al widget dell'elenco dei titoli dei post sono riuscito nell'intento di mostrare appunto questi titoli non in un elenco ma in un menù a tendina con eventuale cursore per lo scorrimento.

• Demo menù a tendina dei titoli dei post -

Ho inserito due menù. Il primo in un elemento HTML con i post in ordine alfabetico e il secondo in una pagina statica con i titoli in ordine cronologico

Menù orizzontale o verticale con immagini e effetto slide (Accordion JQuery).

Vado a presentare un nuovo menù un po' diverso dal solito che ha nella grafica la sua maggiore attrattiva. Per avere quindi un buon effetto occorre che le immagini inserite nel menù siano particolarmente curate. Occorre anche avere un modello che non inserisca in modo automatico dei bordi intorno alle stesse immagini, altrimenti l'estetica ne potrebbe risentire. Ho messo in rete un esempio di come potrebbe essere l'aspetto di questo menù. Ho utilizzato immagini in formato PNG con sfondo trasparente ma forse sono da preferire le immagini in JPG senza trasparenze.

• Demo Menù Orizzontale e Verticale Accordion -

Menù JQuery Accordion per nuovi modelli di Blogger.

JQuery è uno software framework in javascipt che permette una grande personalizzazione dal lato client. Uno degli effetti più comuni è quello della dissolvenza che permette di far scomparire l'elemento con un effetto slide. Il menù che vado a presentarvi si basa in particolare sulla libreria Accordion e lo avevo già presentato qualche tempo fa. L'obiettivo è stato quello di renderlo compatibile anche con i nuovi template di Blogger ottenuti con il Designer Modelli.

Demo del Menù Accordion -

Il menù è situato nella sidebar di sinistra ma può essere messo anche a destra e personalizzato come dimensioni, colori e font. Ciascuna voce principale può nascondere un indefinito numero di voci secondarie che verranno aperte cliccandoci sopra con il mouse

Menu verticale grigio da inserire in una sidebar di Blogger.

Avere un menù molto ricco risponde alle esigenze di migliorare la navigabilità del sito ma anche a precisi vantaggi in ambito SEO. E' dimostrato che linkare i propri articoli in homepage ne migliora la SERP nei motori di ricerca. Con queste premesse è quindi auspicabile cercare di avere in Home più collegamenti possibili alle pagine interne del sito o comunque a quelle che riteniamo più rilevanti.

Un buon menù orizzontale potrebbe non essere essere sufficiente a contenere tutte le voci che ci interessano. In alcuni modelli può risultare utile aggiungere anche un menù verticale da inserire in una sidebar per tutte quelle voci che non siamo riusciti a inserire in quello principale. Quello che vado a presentarvi è di colore grigio ma, se avete anche solo una modesta pratica di programmi di grafica, può essere modificato in qualsiasi colore. Passo subito a mostrarne l'aspetto

 

Come inserire un menù verticale in una sidebar senza modificare il modello di Blogger.

Ho presentato parecchi menù da utilizzare in un blog su Blogger, ne ricordo qualcuno

• Menù orizzontale 
• Menù laterale scorrevole 
• Tre menù scorrevoli
• Menù espandibile

Tutte queste realizzazioni partivano però dal presupposto di inserire i fogli di stile nel modello per determinarne l'aspetto. Molto spesso gli script e i CSS erano caricati su file esterni con ovvie problematiche circa l'affidabilità degli stessi.