Come aggiungere un Menù orizzontale nella parte alta di un blog su Blogger.

Menù orizzontale molto semplice per Blogger da inserire sopra all'header del blog.

Ho già presentato diversi tipi di Menù nei seguenti articoli e oramai mi sono specializzato in questo settore 

Come inserire artigianalmente un menù orizzontale -

Come inserire un menù laterale scorrevole -

Come inserire tre menù scorrevoli -

Come inserire un menù espandibile -

Attualmente in questo blog uso il menù espandibile ma non escludo di cambiare in un prossimo futuro. Come cavia per la realizzazione ho usato il blog di prova, che prima delle modifiche aveva questo aspetto
 
Andare su Layout > Modifica HTML e dopo aver salvato il modello completo cercate la seguente riga di codice

]]></b:skin>

Immediatamente sopra incollate quest’altro codice

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 14px Arial;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #ffffff;
color: #191919;
}

.basictab li a:visited{
color: #800080;
}

.basictab li a:hover{
background-color: #FFD2CF;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #FFD2CF;
color: black;
}

Dove i dati scritti in rosso possono essere personalizzati e sono la famiglia di caratteri (Arial), la dimensione del testo delle voci del menù - bold14px (grassetto), il colore di sfondo del menù, il colore del testo, quello del link visitato, il colore di sfondo del link puntato con il mouse. Adesso Salvate il modello e andate su Layout > Aggiungi un Gadget > HTML/Javascript. Non inserite il Titolo e nel corpo dell’elemento incollate un codice di questo tipo

<ul class="basictab">

<li><a href="http://www.ideepercomputeredinternet.com/">HOME</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">CREA BLOG</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">RISORSE BLOG</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-emoticon-animate.html">ANIMOTICON</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">GUADAGNARE</a></li>


<li><a href="http://www.blogger.com/profile/03393759575661143644">PROFILO</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">PRIVACY</a></li>


</ul>

dove al posto dei collegamenti in rosso inserite i vostri link e al posto dei Titoli dei Menù colorati di viola inserite i titoli che credete. Ovviamente potete aggiungere anche altre voci al menù inserendo delle righe della forma

<li><a href="URL_Collegamento">VOCE MENU</a></li>

Cliccate su Salva e con il mouse posizionate l’elemento nella parte alta del blog, anche sopra all’header se lo ritenete opportuno


      

  

Cliccate nuovamente su Salva, quindi su Visualizza Blog per vedere come è venuta la vostra realizzazione. Ecco come si presenta il mio blog di prova




Veramente un gran bell’aspetto, forse anche migliore di questo blog; bisogna però dire che nel Menù espandibile si possono inserire molte più voci che in questo che può comunque essere utile per quei blogger che hanno un modello senza menù e che non hanno esigenze di mettere molti link in Homepage.