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.

Con questo articolo voglio presentare un menù completamente personalizzabile che si possa inserire in una sidebar esclusivamente incollando il codice in un elemento HTML/Javascript. Inoltre sono completamente personalizzabili i colori e i caratteri. Comincio presentando il codice

<style type="text/css">

/* Creato da http://parsifal32.blogspot.com */

#ddblueblockmenu{
border: 1px solid #191919; /*Colore principale del bordo */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 96%; /*96% larghezza tolti i margin e i padding*/
text-decoration: none;
color: #ffffff; /* Colore caratteri menu */
background-color: #2c79ba; /*Colore sfondo menu */
border-bottom: 1px solid #a0c0dc; /*Colore bordo in basso */
border-left: 7px solid #2861b5; /*Colore bordo sinistra */
list-style-type:none;
}

* html #ddblueblockmenu a{ /*IE only */
width: 96%; /*IE 5*/
width: 96%; /*96% tolti i margini e i padding*/
}

#ddblueblockmenu a:hover {
background-color: #388ed6; /*Colore di sfondo puntato con il mouse*/
border-left-color: #2e6ed0; /*Bordo sinistro puntato con il mouse*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Colore carattere Titolo */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #0e385b;  /*Colore di sfondo del titolo*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

<div id="ddblueblockmenu">

<div class="menutitle">Link del blog</div>
<ul>
<a href="http://parsifal32.blogspot.com/">Home</a>
<a href="http://parsifal32.blogspot.com/2008/01/invia-sms-gratis-in-tutta-italia.html">Invia SMS Gratis</a>
<a href="http://parsifal32.blogspot.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea blog</a>
<a href="http://parsifal32.blogspot.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">Risorse Blogger</a>
<a href="http://videoblog32.blogspot.com">Videochat gratis</a>
<a href="#">Aggiungi voci</a>
</ul></div>

Ho evidenziato in altri colori le cose principali che è possibile personalizzare

1. Accanto ai singoli codici dei colori è indicato a cosa si riferiscono e possono essere variati in funzione di quelli del blog in cui viene inserito il menù.
2. 96% rappresenta la larghezza delle voci del menù. Data la differenza tra modello e modello, nel caso fossero presenti degli spazi bianchi dovuti a dei margin e padding diversi, si può variare questa percentuale per rendere il menù perfettamente allineato
3. Nella parte bassa del codice è indicato il Titolo del menù "Link del blog" e le singole voci che lo compongono evidenziate di viola, mentre i collegamenti sono evidenziati di rosso. Basta inserire le voci che ci interessano con i relativi link
4. L'ultimo elemento è "Aggiungi voci" ed è un modo per evidenziare che si possono aggiungere altri termini al menù utilizzando la stessa sintassi e sostituendo al cancelletto (#) il relativo URL.

Quando si è terminata la personalizzazione si va su Layout > Aggiungi un gadget > HML/Javascript e si incolla il codice in "Sezioni del sito" senza inserire alcun Titolo. Si clicca su Salva e, con il mouse, si posiziona nel punto desiderato.

Per vederlo all'opera andate alla demo del menù verticale da sidebar. Si trova in alto sulla destra ed ha questo aspetto

 

Sulla sinistra di ogni voce vedete un bordo leggermente più scuro (#2e6ed0). Nel momento in cui si punta una voce con il mouse si modifica i colori del testo e del background.

Se volete personalizzare i colori vi conviene utilizzare uno strumento particolarmente efficace come Color Schemer Studio.