Creare un menu spry per blog

Finalmente sono arrivato a presentarvi l'attesissimo tutorial per inserire un menù spry all'interno del blog. Prima di iniziare la guida, un pò più impegnativa delle altre, preferisco mostrarvi il risultato finale:




L'inserimento di tale menù è leggermente complicato ma tenterò di essere molto chiaro.

Per iniziare dovrete inserire queste due righe subito dopo la sezione <head> del vostro blog:

<link rel="stylesheet" type="text/css" href="http://j.mp/4grNoP" />
<script type="text/javascript" src="http://j.mp/aRI2w">
</script>



Salvate il tutto ed aprite un documento di testo o meglio un editor html per modificare la struttura del menu


grazie al codice fornito qui in basso:

<table align="center" cellspacing="0" cellpadding="0" id="menu1" class="ddmx">
<tr>
<td>
<a class="item1" href="javascript:void(0)">Categoria</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Categoria2</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Categoria3</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Categoria4</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Categoria5</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Categoria6</a>
<div class="section">
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
<a class="item2" href="#">Prova spry</a>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var ddmx = new DropDownMenuX('menu1');
ddmx.delay.show = 0;
ddmx.delay.hide = 400;
ddmx.position.levelX.left = 2;
ddmx.init();
</script>



Tale codice può essere facilmente modificato. Al posto del testo Categoria, Categoria2, Categoria3 ... potrete inserire le vostre categorie mentre al posto dei vari Prova spry, potrete inserire le vostre sottocategorie.

Ovviamente per creare un menu, serve creare anche dei collegamenti. Questo è possibile sostituendo la stringa href="#" presente in ogni riga, con il link del collegamento es:

href="http://kamy22-blog.blogspot.com"

Terminate le operazioni di modifica, non vi resterà altro che salvare il codice in un gadget html/javascript, sopra la struttura dei post.


Avrete cosi creato un menu spry con 6 categorie e varie sottocategorie.

Tuttavia sembra inutile dirvi che modificando il codice è possibile stabilire il numero delle varie categorie, sottocategorie o magari creare delle sottocategorie delle sottocategorie stesse.

Se siete interessati a queste informazioni non dovrete far altro che visitare questa pagina.

36 commenti:

vicio ha detto...

wow forte spero di riuscirci a inserirlo

Iro ha detto...

ciao!è la soluzione alla mail che ti ho mandato?...non sono sicura :) in vari blog ho visto categorie messe in elenco come l'archivio post...e come si fa a mettere i post già scritti nelle categorie?

oscar ha detto...

Scusa ma tutto quel codice dove va inserito? grazie

novalis ha detto...

Scusa me tutto quel codice dove va inserito? grazie

Kamy22 ha detto...

"Terminate le operazioni di modifica, non vi resterà altro che salvare il codice in un gadget html/javascript, sopra la struttura dei post."

novalis ha detto...

Scusa la mia ignoranza!

E' tutto a posto, funziona e ti ringrazio.
Per caso dopo spiegherai anche come cambiare dimensione e colore?
Grazie dinuovo
Ciao

el Pocho ha detto...

anche a me interessa cambiare colore, quando me lo spiegherai lo metto in pratica, mi piace un sacco :D

Den ha detto...

Quale codice html usi per scrivere del codice html nel post. Conosco già la casella di testo, ma mi servirebbe un modo per farlo leggere ai visitatori, evitando che Blogger pensi di doverlo "tradurre". Grazie in anticipo!

Kamy22 ha detto...

Le soluzioni sono diverse: puoi usare un editor come dreamweaver, oppure affidarti a blogger draft che permette quest'operazione!

☆DeianiraLane☆ ha detto...

Ho appena utilizzato il tuo codice, utilissimo, ed anche io sarei interessata a cambiarne i colori. Oddio.. a dire il vero con dreamweaver il colore del testo l'ho cambiato.. mi manca il bg.. ci sto provando. Ma se ci fai un tutorialino in ogni caso, è graditissimo :*

el Pocho ha detto...

un'altra domanda, prima di iniziare, aspettando il modo per cambiare colore... che tu sappia è una cosa che si può usare anche con piattaforma myblog o solo con blogger?

grazie :D

C'èSolol'Inter ha detto...

kamy22 i miei complimenti per il tuo lavoro che permette al mio di essere più completo.
Da tempo seguo il tuo blog ma oggi desidero soffermarmi un istante in questo commento per ringraziarti delle info importanti che pubblichi, insegnamenti che sono estremamente utili.
Complimenti ancora e se in futuro pubblicherai altre delucidazioni in particolar modo su i menu te ne sarò sempre grato.
Sergio di C'èSolol'Inter!

Kamy22 ha detto...

@ ☆DeianiraLane☆: complimenti vedo che anche senza tutorial sei riuscita a cambiare i vari colori!

Cmq in questi giorni provvederò a fornire ulteriori delucidazione siccome vedo che l'argomento è di vostro interesse e gradimento.

novalis ha detto...

Diciamo che, stiamo contando i minuti... per leggere il tutorial e cambiare i colori :-)

Kamy22 ha detto...

:) Vi assicuro che in settimana uscirà.

Vorrei pubblicarlo stesso oggi ma dato che voglio essere molto chiaro, mi ci vuole un pò di tempo.

Un saluto a tutti i lettori :)

el Pocho ha detto...

vorrei sapere che stringa usare al posto di quella del menù a tendina per far si di crearne una come la tua ad esempio della homepage, dove cliccandoci appunto non scende il menù a tendina ma si va subito al link...

grazie mille ;-)

F3d3 ha detto...

Ciao kamy, prima di tutto vorrei dirti che sei mitico!! poi che mi interesserebbe molto sapere come creare delle sottocategorie delle sottocategorie stesse e poi come si fa a metterlo nella parte del blog in alto? senza creare dei gadget html/javascript? Grazie spero di nn averti fatto troppe domande xD ciau spero che risponderai presto!
Grazie

Kamy22 ha detto...

@ el pocho: Ciao basta che modifichi la stringa <a class="item1" href="javascript:void(0)">Categoria3</a> in questo modo:
<a class="item1" href="link del sito">Nome categoria</a>

Kamy22 ha detto...

F3d3: Ciao, risponderò ai tuoi interrogativi con il post che varrà pubblicato oggi pomeriggio.

AD. GIANLUCA TOZZI ha detto...

se volessi arrivare fino al terzo livello" item3" come faccio non mi viene ovvero non si attiva il link del terzo livello.

Kamy22 ha detto...

@ Ad. Gianluca Tozzi:

Eccoti un codice di esempio...

<a class="item1" href="javascript:void(0)">Categoria</a>

<div class="section">

<a class="item2" href="#">Spry1</a>

<a class="item2 arrow" href="javascript:void(0)">Spry1 con inizzializzazione dello Spry2</a>

<div class="section">

<a class="item2" href="#">Spry2</a>

<a class="item2" href="#">Spry2</a>

<a class="item2" href="#">Spry2</a>

</div>

<a class="item2 arrow" href="javascript:void(0)">Spry1 con inizzializzazione dello Spry2</a>

<div class="section">

<a class="item2" href="#">Spry2</a>

</div>

</div>

Fammi sapere se trovi qualcosa che non ti è chiaro :)

AD. GIANLUCA TOZZI ha detto...

Non so come ringraziarti.mancava solo il tag td che ho aggiunto

Kamy22 ha detto...

E' stato un piacere!

dendi ha detto...

come faccio ad aggungere nel mio blog una sottocategori. esempio sotto film mettere i vari generi.

Kamy22 ha detto...

@ dendi: ti basta visitare questa pagina: http://kamy22-blog.blogspot.com/2009/01/modificare-un-menu-spry.html

Ciao!

lucarus ha detto...

Ciao Kamy, ti seguo da un pò e sei veramente un grande!
Vorrei chiederti se potresti aiutarmi nel modificare il menù che già ho di default del template, per farlo con la tendina. (il blog è quello che indirizza il nome) Te ne sarei grato ;) Grazie

paomablog ha detto...

Ciao Kamy ho utilizzato il menu spry da te consigliato, vorrei sapere se era possibile cambiare i colori di sfondo e del carattere.
Ringrazio in anticipo.

Alberto ha detto...

Ciao!! Ho inserito questo menu nel mio blog e sono ruscito a personalizzarlo. Ho solo un problema: con mozilla firefox si riesce a vedere senza problemi, mentre con explorer si vede un "lampo" e poi il menu sparisce, spazio vuoto... Qualche idea su come risolvere il problema? Thanks

Alex ha detto...

Grandeeeee!

ILMONTES ha detto...

ciao.. Come tanti sono uno che usava il tuo script del menu spry.. ma ha esattametne un paio di ore.. che non funziona più.. guarda tu stesso nel tuo risultato finale!! la grafica nn c'è più... ci sono solo i link... era andato bene fino adesso... non capisco il perchè!! uso explorer 7 per visualizzare le pagine web.. ma nn credo sia questo il problema... fammi sapere se lo rimetti in sesto. juanmagan1@hotmail.it aspetto tue notizie ciao!

Kamy22 ha detto...

@ ILMONTES: Sto riscontrando dei problemi con il servizio hosting dei files xchè risulta sovraccarico. Dammi il tempo di acquistare un pacchetto più potente e tutto tornerà come prima. Ciao e mi scuso per l'inconveniente.

Ferrari Florence Adviser ha detto...

ciao, lo script del menu spry ha funzionato benissimo fino a 2 gg fa, ma ad oggi rimane scoppiato...io uso mozzilla firefox..se hai soluzioni da darmi fammi sapere..ciao
www.ferrariflorence.com

Ferrari Florence Adviser ha detto...

adesso è tutto perfetto :D!!!
ps: complimenti per le tante indicazioni che ci sono nel blog..
ciao

Alberto ha detto...
Questo post è stato eliminato dall'autore.
4 torri ha detto...

come mai appena entro nella pagina rimangono aperte tutte le tendine del menù???? si chiudono solo dopo esserci passati sopra?

4 torri ha detto...

risolto grazie

Posta un commento

Related Posts with Thumbnails