Da qualche tempo volevo cambiare la forma dell'elenco di link su Raggio di sole con qualcosa di più carino e stiloso e finalmente ci sono riuscita!!
Visto che può essere utile a qualcuno che ha come me voglia di cambiare , vi scriverò come ho fatto.
- Innanzitutto dovete scaricare i file del menù che volete inserire. Il mio l'ho preso qui.
- Prendiamo in considerazione il file css_menù_13.html
- Selezioniamo la prima parte del codice che andrà poi hostata su un sito esterno con estensione .css (per esempio io l'ho chiamata menuorizzontale.css e l'ho hostata su google site)
Ecco codice che ho utilizzato io:
#css_menu_13{
padding-bottom:20px;
background-color:white;
}
#css_menu_13 ul{
list-style:none;
overflow:hidden;
height:110px;
margin:0;
padding:20px 0px 0 80px;
border-bottom:5px solid white;
}
#css_menu_13 li{
display:inline;
}
#css_menu_13 li a{
display:block;
float:left;
width:105px;
height:50px;
margin:60px 2px 0 2px;
border-top:5px solid white;
border-right:5px solid white;
border-left:5px solid white;
text-decoration:none;
text-align:center;
text-transform:uppercase;
font-family:arial;
font-size:11px;
font-weight:bold;
color:white;
}
#css_menu_13 li a span{
display:block;
margin-top:5px;
padding:5px;
}
#css_menu_13 li a b{
display:block;
margin-top:10px;
font-family:"Arial Narrow";
font-size:60px;
}
#css_menu_13 li a:hover{
height:110px;
margin-top:0;
}
#css_menu_13 li a.item1{
background-color:#FF0099;
}
#css_menu_13 li a.item2{
background-color:#99CC00;
}
#css_menu_13 li a.item3{
background-color:#FF3300;
}
#css_menu_13 li a.item4{
background-color:#3399FF;
}
#css_menu_13 li a.item5{
background-color:#FFB300;
}
#css_menu_13 li a.item1 span{
background-color:#CC007A;
}
#css_menu_13 li a.item2 span{
background-color:#7AA300;
}
#css_menu_13 li a.item3 span{
background-color:#CC2900;
}
#css_menu_13 li a.item4 span{
background-color:#297ACC;
}
#css_menu_13 li a.item5 span{
background-color:#CC8F00;
}
In rosso ho messo il colore dello sfondo che potete customizzarvi come più vi piace (integrandolo poi eventualmente anche con la funzione sfondo del servizio design.
In verde ho evidenziato il valore che dovete utilizzare per centrare le immagini.
In viola infine il valore da utilizzare per modificare la larghezza delle "alette" del menù.
Una volta finito di personalizzare il codice ed inserito con estensione .css su Google site per esempio, ora dobbiamo andare in Bacheca > Elementi pagina > Aggiungi un gadget > Html/JavaScript ed incollare questo codice:
<ul>
<li><a href="http://www.paginadelmioblog.html" class="item1"><span>Pagina1</span><b>01</b></a></li>
<li><a href="http://www.paginadelmioblog2.html" class="item2"><span>Pagina2</span><b>02</b></a></li>
<li><a href="http://www.paginadelmioblog3.html" class="item3"><span>Pagina3</span><b>03</b></a></li>
<li><a href="http://www.paginadelmioblog4.html" class="item4"><span>Pagina4</span><b>04</b></a></li>
<li><a href="http://www.paginadelmioblog5.html" class="item5"><span>Pagina5</span><b>05</b></a></li>
</ul>
</div>
Ovviamente la parti in blu vanno personalizzate. Salviamo, facciamo ancora un passaggio ed avremo finito.
Andiamo in Bacheca > Modifica HTML e mettiamo il visto su espandi i modelli widget e dopo i vari tag <meta ....> ma comunque prima di title inseriamo questo:
<link href='http://sitodovehohostatoilmiofogliodistile.css' rel='stylesheet' type='text/css'/>
Se avete svolto tutti i passaggi correttamente dovreste vedere il vostro menù funzionante.
