MENU' CON BOTTONCINI CON EFFETTO HOVER

bottoncino base

bottoncino hover

Per realizzare dei simpatici bottoncini
per i vostri menù principali  con
effetto HOVER non è difficile, potete
vederne l'esempio nel mio blog.
Sono molto carini  e se vi piace la
grafica potrete divertivi creandone
a vostro gusto e piacere.
Per sistemarli nella pagina si dovranno
scrivere delle classi CSS per le celle
che contengono i bottoncini che poi si
dovranno richiamare tramite tag Javascript.

Vediamone i passaggi

1 - prepariamo i bottoncini che devono
essere 2 , uno per la base ed il secondo
per l'effetto. Dovranno essere della stessa
misura sia in altezza ( height ) sia in
larghezza ( width)
i miei sono  heigth  68 px , width 139 px
e salvateli in PNG

2 - ora si devono inserire nel blog
attraverso lo Style CSS, vediamo qui di seguito
come:
Cliccate su Design - Modello-Personalizza -Avanzato-
Aggiungi CSS

Questo è ciò che si dovrà scrivere  nello
style css  (Copiate ed incollate)

<style type="text/css">
/*<![CDATA[*/
/* Bottoncini hover Army  http://www.dreamworldgraphicblog.blogspot.com */
table.bottoni menu{
border:0px;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.link{
text-align:center;
border:0px none;
background-image: url('url immagine bottoncino base');
width: 139px;
height: 68px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}
td.out{
text-align:center;
border:0px none;
background-image: url('url immagine bottoncino base');
width: 139px;
height: 68px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}
td.hover{
text-align:center;
border:0px none;
background-image: url('url immagine bottoncino hover');
width: 139px;
height: 68px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}
/*]]>*/ 
</style>


Ciò che ho evidenziato  in giallo dovrà essere sostituito 
con i vostri dati , immagini e misure. 
Per avere l'url dell'immagine basta hostare il primo
bottoncino in un sito Free Image Hosting come TinyPic
(vedi pagine utili del blog)
esempio:

dove si vede la scritta File cercare ed aprire l'immagine
cliccare su Upload Now
Vi apparirà l'immagine hostata

copiare ed incollare  il codice che apparirà
dove io ho evidenziato il mio esempio
ed incollarlo nelle parti dello Style togliendo
[IMG] all'inizio e alla fine e ripetere per il
bottoncino con l'effetto


3 -Adesso  dovete richiamare i link delle pagine
del vostro menù principale:

Design-Layout-Aggiungi un gadget 
(nella posizione in cui volete che appaiano i bottoncini)
vi si aprirà la pagina dei gadget e scorrete fino a trovare
HTML/JAVASCRIPT

cliccate sulla scritta blu o sul simbolo +
nella finestra che si aprirà inserite questo codice

<!-- Inizio Link Bottoni -->
  <table class="base" cellpadding="0" cellspacing="0">
<tr>
  <td class="link" onmouseover="this.className = 'hover'"
 onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
  <td class="link" onmouseover="this.className = 'hover'"
 onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
  <td class="link" onmouseover="this.className = 'hover'"
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
  <td class="link" onmouseover="this.className = 'hover'"
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
<td class="link" onmouseover="this.className = 'hover'"
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
 <td class="link" onmouseover="this.className = 'hover'"
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
<td class="link" onmouseover="this.className = 'hover'"
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>
  </tr>
</table>
<!-- Fine Link Bottoni -->

verde da sostituire

Per Url pagina intendiamo

URL PAGINA (che corrisponde alla mia pagine utili)
da copiare ed incollare nel codice

 e nome link = il nome della vostra
pagina o etichetta come preferite
nel mio caso appunto Pagine Utili

Se volete avere più  pagine  con i bottoncini
non dovete fare altro che  aggiungere per ogni
pagina in più questa dicitura

<td class="link" onmouseover="this.className = 'hover'" 
onmouseout="this.className = 'out'"><a href="http://url pagina">Nome Link</a>
</td>

prima di </tr>
              <table>
              <!--Fine Link Bottoni -->

Spero di essere stata chiara in ogni passaggio
eventualmente lasciatemi un messaggio
Buon divertimento
Ciao