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

 

Nel momento in cui si passa con il mouse sopra a una voce del menù, se ne modifica leggermente il colore. Passo a illustrare la semplice installazione. Andate su Design > Modifica HTML e salvate il modello completo. Dopo aver messo la spunta su "espandi modelli widget" (opzionale), cercate la riga

 ]]></b:skin>

e immediatamente sopra incollate questo codice

/* --Menù Grigio Inizio-- */
#GrigioMenu a, #GrigioMenu a:visited {
text-align:center;
position:relative;
text-decoration:none;
display:block;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyPfPewX49vdYqgtk51mRwAfai8_QQunvmYmjN2HSzNWkuN9O43jcK6dXvymoxCAPYwXZohCHC3hygaISnKlQ1dEORN8ZPvxU6WL9bp2Y5aSpXP81Wh0Vw_RhrvjkZcNWJhp4SyiRzEKn6/) repeat-x scroll 0 0;
color:#ffffff;
font-weight: bold;
width:10em;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
border:2px solid #fff;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
padding:0.25em;
margin:0.5em auto;
}
#GrigioMenu a:hover {
top:1px;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
Font-weight: bold;
color:#ffffff;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5uvWJie6IuHy9pmdybUbyLi_uJB9XJjABdqz7LC9TGvTJo3u7NkKIGbmHCcs6Z73BO4efAJUFllyv_NyqZW7hyfFT8BNcd0EnBQWn-1_h7j77tdGsdRF5b4C5jvzm8hTDWWMzZKC9bDk/) repeat-x scroll 0 0;
}
/* --Menù Grigio Fine - www.ideepercomputeredinternet.com-- */

Salvate il modello. Gli URL evidenziati di rosso si riferiscono alle due immagini di sfondo che determinano il colore del menù in condizioni normali e quando viene puntato con il mouse. Incollando questi URL nel browser si possono scaricare attraverso il menù contestuale del destro del mouse. Aprendo le immagini con un programma di grafica si possono modificare i colori come più ci piace. Successivamente possono essere nuovamente caricate su Picasa per ottenerne i nuovi URL da sostituire ai due presenti in questo codice. In questo caso dovranno anche essere modificati i colori dei bordi e del testo visualizzato nel menù.

Adesso dovrete creare la struttura del vostro menù che sarà simile a questa

<div id="GrigioMenu">
<a href="http://www.ideepercomputeredinternet.com/">HOME</a>
<a href="http://www.blogger.com/profile/03393759575661143644" target="_blank">PROFILO</a>
<a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">DISCLAIMER</a>
<a href="http://www.facebook.com/ideepercomputeredinternet">PAGINA FAN</a>
<a href="http://twitter.com/parsifal32" target="_blank">TWITTER</a>
</div>

Ricordo che per personalizzare questo codice occorre:

1. Sostituire agli URL in rosso i collegamenti alle pagine del vostro blog o anche esterne al vostro sito
2. I Titoli del Menù in viola devono essere cambiati con i vostri
3. L'espressione target="_blank" può essere aggiunta ai collegamenti esterni per far aprire la pagina in un'altra scheda
4. Possono essere aggiunte tutte le voci che si vogliono mantenendo la sintassi
   <a href="URL_COLLEGAMENTO">TITOLO</a>. Si possono anche eliminare righe se queste sono sovrabbondanti.

Andate su Design > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito. Salvate l'elemento e posizionatelo con il mouse.

• Demo Menù Verticale Grigio -