Widget a menu verticale, senza modificare il Codice del modello HTML

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

Con questo articolo viene presentato un Widget con menù completamente personalizzabile e che, si può essere inserito in una sidebar semplicemente incollando il codice del widget in un elemento HTML/Javascript. Inoltre, e non è poco, sono completamente personalizzabili i colori e i caratteri.

Questo è il codice del Widget

<style type="text/css"> /* Work by: http://weblifeonline.blogspot.com */ #ddblueblockmenu{ border: 1px solid #191919; /*Colore principale 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:  margin e  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  padding*/ } #ddblueblockmenu a:hover { background-color: #388ed6; /*Colore di sfondo passaggio mouse*/ border-left-color: #2e6ed0; /*Bordo sinistro passaggio 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 titolo*/ font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } </style> <div id="ddblueblockmenu"> <div class="menutitle">Collegamenti del blog</div> <ul> <a href="http://weblifeonline.blogspot.com/">Home</a> <a href="http:// tuo link">Guide software</a> <a href="http:// tuo link">guide file sharing</a> <a href="http:// tuo link">Risorse Blogger</a> <a href="http://tuo link">photoshop</a> <a href="#">Presto Attivo</a> </ul></div>

Sono stati evidenziati in altri colori le cose principali che è possibile personalizzare:

1. Accanto ad ogni singolo codice dei colori viene indicato a cosa si riferisce e possono essere variati in funzione di quelli presenti nei blog in cui viene inserito il menù, in modo da avere un layout del tutto simile.
2. 96% rappresenta la larghezza delle voci del menù. Data la differenza che esiste 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, (per fare esempio nel caso nostro questa percentuale è stata portata a 130%)
3. Nella parte bassa del codice trovate indicato il Titolo del Widget menù "Collegamenti del blog" e delle singole voci che lo compongono che sono evidenziate di Blu, mentre i collegamenti sono evidenziati di rosso. Dovete inserire le voci che vi 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.

Una volta che è stata terminata la personalizzazione del widget 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 basta andare nel nostro Blog  pagine demo dei widget e menu per Blogger, cercare  “widget menù verticale da sidebar”. Si trova in alto sulla destra ed ha l’aspetto come da foto. Cliccare questo indirizzo: weblifeonlinewidget.blogspot.com per accedere al blog.

Sulla sinistra di ogni voce è visibile 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.