Menù orizzontale personalizzabile da inserire sopra l'header di un blog su Blogger.

Menù orizzontale da mostrare sopra l'Intestazione del blog sbloccando Aggiungi un gadget sopra l'header.

Questo menù credo che sia l'ideale per siti con una grafica semplice e pulita ma potrebbe anche essere usato insieme a un altro menù basato su javascript. Il solo script che viene utilizzato per la sua installazione è open source e serve unicamente per visualizzare il menù in modo accettabile anche con Internet Explorer. Prima di procedere all'installazione vera e propria è opportuno inserire un elemento Aggiungi un gadget nella parte alta del template.
Nella fattispecie si va su Design > Modifica HTML e si espandono i modelli widget. Dopo aver salvato il modello completo, si cerca la riga

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ce ne potrebbe essere una leggermente diversa. Per individuarla si può pigiare su F3 e cercare showaddelement. La riga va modificata in questo modo

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Questo ci consentirà di visualizzare Aggiungi un gadget anche nella parte alta e si potrà inserire anche un altro widget nell'header. Invece che 2 può essere messo anche un numero maggiore. Adesso cercate questa riga
<b:include data='blog' name='all-head-content'/>

e, immediatamente sotto, incollate questo codice

<!--[if IE]>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/blogger-IE.js"></script>
<![endif]-->

che serve appunto per Internet Explorer. Nel caso non lo incolliate, il menù funzionerà comunque lo stesso con gli altri browser. Salvate il modello. Andate su Design > Aggiungi un gadget > Elenco di link

Inserite nel widget tutti i link del vostro menù con gli URL e i nomi da visualizzare

Non dobbiamo inserire il titolo del widget, si anche può tralasciare di inserire il numero di link da mostrare e l'ordinamento da seguire. E' sufficiente incollare l'URL delle pagine che vogliamo linkare nel menù insieme al testo da visualizzare. Per ogni voce inserita ci sono delle freccette per modificarne l'ordine. Quest'ultimo adesso appare in verticale ma sarà identico a quello che poi vedremo in orizzontale. Quando abbiamo inserito tutte le voci, clicchiamo su Salva. Ricordo che si potrà sempre modificare il widget in un secondo momento, aggiungendo altre voci con altri link o cambiando il testo degli elementi del menù.

Con il mouse si trascina questo elemento pagina nella zona dell'header e andiamo ancora su Salva. Se adesso date uno sguardo al blog rimarrete delusi perché l'aspetto del menù è quello di un semplice elenco verticale. Per renderlo adatto alle nostre esigenze, dobbiamo creare delle classi apposite. Il widget che avete inserito sarà denotato da LinkList1. Sarebbe LinkList2 solo nel caso in cui non fosse il primo widget Elenco di link che inserite nel template. Nella prima ipotesi, tornate in Design > Modifica HTML e cercate la riga  ]]></b:skin>. Immediatamente sopra incollate queste nuove classi

/* Menù Header Inizio */
#LinkList1 li {border-right:1px solid #FFFFFF; float:left; font-size: 13px; font-family:Arial,Helvetica,sans-serif, Trebuchet MS; font-weight:bold; height:22px;letter-spacing:0; list-style:none outside none; padding-left:8px; padding-right:8px; padding-top:8px; text-align:center;}
#LinkList1 li:hover {background: #FDBCB7;
color:#000000;}
#LinkList1 a{color: white;} #LinkList1 a:hover{
color: white; text-decoration: none;}
#LinkList1 {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-goog-ms-border-radius:7px;
border-radius: 7px; background:#940F04; height:32px; margin-bottom:12px;
}
/* Menù Header Fine - www.ideepercomputeredinternet.com */

Salvate il modello e visualizzate il menù.

I bordi del menù saranno arrotondati alle estremità. L'ampiezza della rotondità viene determinata dal numero indicato accanto a border-radius. Si possono configurare le dimensioni del menù e le sue distanze esterne (margin) e interne (padding). Le modifiche più importanti riguardano i colori del menù secondo questo schema

• #FFFFFF; è il colore del bordo che divide gli elementi
• #940F04; è il colore di sfondo del menù in condizioni normali
• #FDBCB7; è il colore di sfondo che prende un singolo elemento se viene puntato con il mouse. Per modificarli, se non sapete come fare, vi consiglio di dare uno sguardo all'articolo che ho pubblicato sui codici dei colori.

Il menù occuperà automaticamente tutto lo spazio dell'header quindi si potranno aggiungere voci o calibrare la lunghezza del testo per occupare tutto lo spazio a disposizione in modo ottimale. I bordi arrotondati potrebbero non essere visibili in alcuni modelli di Blogger se si utilizza Internet Explorer mentre non sussistono problemi di sorta con gli altri browser.

• Demo del Menù orizzontale con bordi arrotondati -