20 luglio 2009

Come creare un Menu espandibile da inserire in una sidebar di un blog situato su qualsiasi piattaforma.

Ormai mi sto specializzando in Menù Smile! Dopo aver presentato il Menù Laterale Scorrevole e il Menù verticale a tendina ecco che siamo arrivati al Menù espandibile da inserire in una sidebar.
Sono un appassionato di cucina e amo cucinare soprattutto piatti sperimentali quindi questa attrazione per i menù era oserei dire naturale. Quello che vado a presentare ovviamente non l’ho creato di sana pianta ma mi sono appoggiato ad una realizzazione trovata su Dynamic Drive. Credo che sia difficile trovarne uno più completo e al quale si possano automaticamente aggiungere delle voci semplicemente modificando un link di un gadget.
Per prima cosa personalizzate questo codice che vado di seguito ad incollare


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/ddaccordion.js' type='text/javascript'>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use

* Localized in italian by Parsifal32 - www.ideepercomputeredinternet.com
***********************************************/

</script>
<script type='text/javascript'>
ddaccordion.init({
    headerclass: &quot;expandable&quot;, //Shared CSS class name of headers group that are expandable
    contentclass: &quot;categoryitems&quot;, //Shared CSS class name of contents group
    revealtype: &quot;click&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
    mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: [&quot;&quot;, &quot;openheader&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
    togglehtml: [&quot;prefix&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively  [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
    animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

</script>
<noscript><a href='http://www.ideepercomputeredinternet.com' target='_blank'><span style='font-size: x-small;'>Ad Menu</span></a></noscript>
<style type='text/css'>
.arrowlistmenu{
width: 350px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background:#940F04 url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it&#39;s expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #940F04;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #800080;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #800080;
background-color: #FDBCB7;
}

</style>


La personalizzazione  riguarda soprattutto
  1. la larghezza, 350 pixel
  2. La dimensione dei caratteri, 14 pixel
  3. Il colore del menù #940F04
  4. Il colore del link visitato #800080
  5. Il colore di background del menù quando si punta con il mouse #FDBCB7
Volendo si potrebbero fare anche altre personalizzazioni che non posso elencare tutte che riguardano margini, colore del testo del menù principale (white), ecc.
Bisognava caricare un file di tipo Javascript nel web ed inserirne l’URL nella seconda riga del codice, ma questo l’ho già fatto io, quindi se volete adottare questo Menù avrete il lavoro semplificato.
Il file di testo con tutto il codice l’ho comunque caricato sul web in questa pagina, mentre il file ddaccordion.js volendo lo potete scaricare in formato txt, nel caso vogliate avere tutti i file caricati nelle vostre cartelle. Dopo averlo caricato inseritene l’URL al posto di http://is.gd/1Fb6J. Questo paragrafo in corsivo è da considerarsi come un inciso solo per i più smanettoni. Chi non lo è lo salti tranquillamente.
Andate su Layout > Modifica HTML e, dopo aver scaricato un modello completo e messo la spunta a espandi modelli widget, cercate la riga di codice </head> e, immediatamente sopra incollate tutto il codice personalizzato come in questo screenshot
CODICE-MENU 

Salvate il modello. Adesso dovete creare il menù vero e proprio cioè dovete inserire i vostri nomi principali, collegamenti secondari e URL. Ecco un esempio di come potrebbe essere un menù


<div class="arrowlistmenu">
<h3 class="menuheader expandable">RISORSE PER BLOGGER</h3>
<ul class="categoryitems">
<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" target="_blank">Creare un blog in 2 minuti</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/12/come-iniziare-un-blog-e-cosa-fare-nel.html" target="_blank">Cosa fare nel primo mese</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html" target="_blank">100 risorse per Blogger</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/07/altre-16-risorse-per-blog-su-blogger.html" target="_blank">Altre risorse per Blogger</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html" target="_blank">Collezione di modelli per Blogger</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html" target="_blank">Guadagnare con un blog</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/07/come-crearsi-una-rendita-mensile-di.html" target="_blank">Come crearsi una rendita di 1000€ al mese</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/03/le-migliori-estensioni-add-on-per.html" target="_blank">65 estensioni per Firefox</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/05/sprintrade-per-guadagnare-di-piu-con-il.html" target="_blank">Guadagnare con Sprintrade</a></li>
</ul>

<h3 class="menuheader expandable">EROS INCONTRI VIDEOCHAT GIOCHI</h3>
<ul class="categoryitems">
<li><a href="
http://videoblog32.blogspot.com/" target="_blank">VIDEOCHAT GRATIS</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/10/ciaoamigos-la-videochat-pi-frequentata.html" target="_blank">Ciao Amigos Videochat</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/search/label/videochat" target="_blank">Tutte le videochat del mondo</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/01/ecco-dove-puoi-trovare-amicizia-amore-e.html" target="_blank">INCONTRI & EROS</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/01/gioca-gratis-piu-di-dodicimila-giochi.html" target="_blank">12.000 giochi gratis online</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/04/friv-per-giocare-gratis-online-piu-di.html" target="_blank">FRIV per giochi gratis</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/search/label/giochi" target="_blank">Per giocare e scaricare videogames</a></li>

</ul>
<h3 class="menuheader expandable">TELEVISIONI FILM</h3>
<ul class="categoryitems">
        <li><a href="http://live-streamingtv.blogspot.com/" target="_blank">Tutte le televisioni in streaming</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">MYP2P per lo sport gratis</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/03/worldlive-tv-per-vedere-gratis-partite.html" target="_blank">WorldLive TV per TV P2P</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">Calcio gratis</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/search/label/televisione" target="_blank">Tutto sulle televisioni</a></li>
</ul>
<h3 class="menuheader expandable">DOVE PUOI TROVARMI - PRIVACY</h3>
<ul class="categoryitems">
<li><a href="
http://www.blogger.com/profile/03393759575661143644" target="_blank">PROFILO SU BLOGGER</a></li>
<li><a href="
http://it-it.facebook.com/parsifal32" target="_blank">Aggiungimi su FACEBOOK</a></li>
<li><a href="
http://twitter.com/parsifal32" target="_blank">Seguimi su TWITTER</a></li>
<li><a href="
http://friendfeed.com/parsifal32" target="_blank">Seguimi su FRIENDFEED</a></li>
<li><a href="
http://parsifal32.stumbleupon.com/" target="_blank">Aggiungimi su STUMBLEUPON</a></li>
<li><a href="
http://www.youtube.com/user/parsifal32" target="_blank">Il mio canale su YOUTUBE</a></li>
<li><a href="
http://parsifal32.tumblr.com/" target="_blank">Stupidaggini su TUMBLR</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2008/01/messaggi-dei-lettori.html" target="_blank">Modulo per contattarmi</a></li>
<li><a href="
http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html" target="_blank">Norme sulla PRIVACY</a></li>

</ul></div>


Questo è il menù che ho inserito al momento, non è detto che non lo modifichi con l’andare del tempo, anzi sicuramente lo farò. Ecco come personalizzarlo alle esigenze del proprio blog
  1. L’espressione target=”_blank” l’ho inserita in tutti i collegamenti escluso quello con la homepage e significa l’apertura del link in un’altra pagina
  2. Le espressioni colorate di viola sono le voci principali del menù e sono quelle che si visualizzano sempre. P.e. RISORSE PER BLOGGER
  3. Le espressioni colorate di azzurro sono le voci secondarie di ogni singola voce principale e sono messe sotto forma di elenco
  4. Ad ogni voce secondaria corrisponde l’URL di collegamento colorato di rosso
  5. Si possono aggiungere altre voci principali o altre voci secondarie mantenendo inalterata la sintassi.
Quando si è creato il nostro menù, si salva in un file di testo, quindi si va su Layout > Aggiungi un Gadget > HTML/Javascript e si incolla, quindi si Salva l’elemento senza inserire il Titolo, in quanto pleonastico.
Il Menù è concepito in modo tale che se si clicca su una Voce Principale, si aprono le Voci Secondarie che sono al suo interno con i vari collegamenti a sezioni o articoli del nostro blog
menù-espandibile
Se si clicca su un’altra voce principale automaticamente si apre e contemporaneamente si chiude quella che era aperta. Il sistema è tale da avere anche decine di collegamenti in uno spazio relativamente piccolo. La prima volta che si installerà il menù dovrà passare qualche secondo affinché gli script vengano caricati, quindi prima di cliccarci sopra per vedere se funziona aspettate un po’.
Se si ha un blog in un’altra piattaforma quello che cambia è solo il modo di inserimento del menù nella sidebar mentre il tag </head> per l’inserimento degli script e dei fogli di stile è ovviamente presente in tutte le pagine web. Un’aggiunta di questo tipo è indubbiamente un aiuto alla navigabilità del sito e un modo per catturare meglio l’attenzione dei visitatori occasionali.



83 commenti:

  1. Bellissimo questo!

    RispondiElimina
  2. ma e' proprio quello che mi serviva!?!!??!?! Non mi basta pù il meu sopra...
    Sei eccezionale Parsifal!!!
    p.s.
    Accidenti sono la 4 comentatrice del sito? Non avrei mai creduto!!! ;-)
    Ciao e grazie!

    RispondiElimina
  3. @Astasia
    Guarda che saresti la top commentatrice se non avessi cambiato nick inserendo la maiuscola :)

    RispondiElimina
  4. Caro persifal32
    Oltre ad essere un genio, sei anche un inesauribile maestro. Con te scusa se do per tu
    C’e sempre da imparare. Vorrei inserire un menu a tendina e mettere nel mio blog un codice di collegamento tipo come quello. Dov´e messo il tuo codice.
    L´antipixel c´e l´ho già, come posso fare?Grazie.

    RispondiElimina
  5. @Ignazio
    grazie della considerazione troppo buono! Purtroppo non riesco a capire a quale codice ti riferisci se quello per inserire l'antipixel, quello per il menù a tendina. Forse vorresti mettere una textarea perché altri potessero mettere il tuo antipixel nel loro blog. In questo caso ti potrebbe essere di aiuto questo articolo dove in testo da immettere inserisci l'URL dell'immagine del tuo antipixel con il collegamento al blog. Io posto con WLW e il tag textarea non funziona con questo sistema quindi mi è difficile farti un esempio.
    Non so se ho compreso bene la domanda.
    Ciao

    RispondiElimina
  6. Ciao
    Sì, infatti, mi riferivo a come mettere una textarea perché altri potessero inserire il mio antipixel nel loro blog. Ho già fatto e funziona.
    Caro amico ti ho scoperto per caso, e stanne certo che non ti lascerò più.
    Con te non si finisce mai di apprendere sei l´Einstein del Web.
    E non esagero grazie infinite alla prossima.

    RispondiElimina
  7. @Ignazio
    Paragonarmi ad Einstein è decisamente eccessivo :) anche se sono più esperto di fisica teorica che di informatica :)
    Sono contento di essere di aiuto ad altri che hanno iniziato a bloggare da poco. Magari avessi saputo a chi rivolgermi un anno e mezzo fa :((

    RispondiElimina
  8. ciao :)

    io vorrei chiederti aiuto su un'altra questione, sempre cmq correlata al menù...

    Il tuo menù è messo in alto affianco all'intestazione del blog.

    Come è possibile "allungare" la sidebar in modo che copra l'intero spazio disponibile verticalemnte... Come sempre spero di essermi spiaegato bene :)
    ciao e grazie di tutto

    RispondiElimina
  9. @Auto....
    di nulla...
    @L'altra Notizia
    Ho capito quello che intendi ma non credo esista un tutorial generale che possa andare bene per tutti i modelli. Anzi nei modelli in cui la sidebar arriva fino in cima manca una sezione dei CSS specifica per l'header. Prima di fare una personalizzazione di questo tipo mi sa che convenga di più cambiare template :)

    RispondiElimina
  10. capito, grazie mille :)

    allora mi sa che tengo quello che ho ^_^

    RispondiElimina
  11. Ciao, e complimenti per il sito. Navigando su internet ho trovato proprio quello che mi serviva per il mio blog su questo sito. Volevo solo farti una domanda. Quello che tu definisci "il menù vero e proprio" in quale parte di html lo devo inserire? Grazie risp

    RispondiElimina
  12. @Anonimo
    C'è scritto nel post. Devi andare su Layout > Aggiungi un Gadget > HML/Javascript e copiare il codice. Quindi salvare l'elemento. In un secondo tempo, con il mouse, lo trascini nella posizione che preferisci andando su Layout > Elementi pagina

    RispondiElimina
  13. Ah va bene grazie ;)

    RispondiElimina
  14. Fantastico, erano giorni che stavo cercando una cosa del genere!!! Avevo la necessità di poter aggiungere link all'occorrenza senza dover smanettare troppo, questo sistema pare perfetto! Grazie mille, ci metterò un po' per implementarlo ma lo farò di sicuro :D

    RispondiElimina
  15. @Azabel
    Felice di esserti di aiuto

    RispondiElimina
  16. parsifal sei sempre utilissimo, mi dispiace solo che è da un pezzo che non passo più di qua ... un salutone

    RispondiElimina
  17. Un saluto anche a te Alexandro :)

    RispondiElimina
  18. Ciao, perdonami se ti disturbo ma ormai le ho provate tutte:
    volevo rifare il layout al mio blog, ho preparato tutto in un blog di prova inserendo anche questo menu, che funziona perfettamente.

    Ora, finalmente ho deciso di inserire le modifiche anche nel blog "giusto"... non ho avuto nessun problema, ma questo menu non vuole saperne di funzionare! Ho ricaricato più volte il template, ho eliminato e reinserito il menu più volte (sia il codice della sidebar che dell'html) ma non c'è verso. Pensando ad un errore mio ho anche copiato e incollato pari pari il codice trovato in questo post, nulla da fare. Per caso, hai idea di cosa possa essere successo? Ti ringrazio infinitamente :)

    RispondiElimina
  19. @Azabel
    Se tu mi dici che nel blog di prova funziona perfettamente, escludendo errori di copiatura visto che hai rifatto la procedura più volte, non rimane che pensare ad un superamento dei limiti di banda.
    Prova a scaricare il file a questo indirizzo
    http://is.gd/1Fb6J
    rinominalo in javascript, vale a dire chiamalo ddaccordion.js
    caricalo su un hosting tipo MyDataNest, acquisiscine l'URL e sostituiscilo nella seconda riga del codice nell'URL attuale. Può essere che si sia superata la bandwidth permessa da Google Sites.
    Fammi sapere.
    Ciao

    RispondiElimina
  20. Ha funzionato!!!
    Giuro, mi stavo per mettere a piangere, era tutto bello pronto e non riuscivo a venirne fuori...
    Grazie, grazie, grazie :))

    RispondiElimina
  21. @Azabel
    Mi fa piacere, era la badwidth. Devo stare attento anche io perché ho lo stesso codice e se viene copiato da molti mi sa che mi trovo come te. Dovrò porre rimedio.
    Sono gli inconvenienti del "successo", troppe persone che copiano il tuo codice :D

    RispondiElimina
  22. Parsifal, perdonami se ti disturbo ancora... come ti dicevo ora il menu funziona ma... solo usando Firefox! Nel blog di prova invece funziona anche usando Explorer, di nuovo sono sicurissima che il codice è perfettamente identico su entrambi i blog. Come può essere? Ci capisco sempre meno...

    RispondiElimina
  23. @Azabel
    @Azabel
    in questo caso non ci capisco nulla neppure io. IE fa quello che gli pare .
    Prova a caricare lo script in un hosting diverso da MyDataNext. Gli script sono caricati in siti identici sia sul blog di prova che su quello che usi?
    Fai dei test di questo tipo. E' difficile aiutarti quando si tratta di problemi con IE...
    Comunque ho caricato lo script su un sito diverso da MyDataNext e ho ripubblicato l'articolo. Prova a ricopiare tutto il codice o solo il nuovo indirizzo dello script.
    P.S. Non trovo il tuo blog di prova per verificare che effettivamente non funziona con IE

    RispondiElimina
  24. Si, gli script sono caricati identici... ho appena provato a sostituire l'indirizzo dello script con quello che hai appena pubblicato ma ancora nulla... ora ho reso pubblico il blog di prova, lo trovi qui: http://ladyazabel.blogspot.com
    Comunque non ti preoccupare... se proprio non riesco a farlo funzionare pazienza, sei anche troppo gentile ad occupartene!

    RispondiElimina
  25. @Azabel
    Ho visto il blog di prova ma non vedo il menù. Sai perché te lo dico...
    mi sembra impossibile che il menù del mio blog si veda con IE, quello del tuo blog di prova pure e quello principale, no.
    Stranezze di IE

    RispondiElimina
  26. Oddio, come non lo vedi? che strano... ho pure svuotato la cache, e in questo momento lo vedo...
    E' inutile, odio Explorer sempre di più ^_^

    RispondiElimina
  27. Fantastico metodo per i menù! grazie per i tuoi consigli! mi sà tra poco lo inserirò nel mio blog!

    RispondiElimina
  28. @giorgy
    L'ho tenuto nel blog per moltissimi mesi. L'ho tolto solo pochi giorni fa ma non perché non funzionasse, solo per cambiare un po'
    Ciao

    RispondiElimina
  29. rieccomi..possibile che questo menu con il nuovo modello mi va in conflitto con il feautured animato che ho in testa alla pagina???
    E' possibile posizionare la parte di codice in un altra zona del template?
    Nel body per esempio? Le mie sidebar sono contenute lì...
    Thanks come sempre Parsifal!!!

    RispondiElimina
  30. @astasia
    Lo puoi spostare ovunque. L'importante è che le dimensioni siano corrette rispetto alla zona in cui lo inserisci. Se va in conflitto con delle immagini animate prova a allontanarli mettendo in mezzo un altro widget tipo la barra di ricerca...

    RispondiElimina
  31. Buongiorno Parsifal...
    Nada de nada...credo che il template nuovo che ho messo abbia qualche magagna...pensa che non mi funzionano nemmeno i quadrati immagine di adsense nella sidebar...
    Suggerimemti??? O_O
    Il template mi piace e credo che dopo tutta questa fatica lo terrò comunque...solo che dovrei risolvere questi piccoli problemi(chiamiamoli così!!).
    Gli adsense nel post e sotto il menu funzionano bene...

    RispondiElimina
  32. @astasia
    Sai che quando si sceglie un template fortemente personalizzato possono subentrare problemi di questo tipo. Personalmente ho sempre preferito i modelli di blogger per poi personalizzarli da me ma sono scelte opinabili.
    Ciao

    RispondiElimina
  33. Domanda:
    al posto della barra evidenziata con il titolo (nel tuo esempio:risorse x bloggher) non si può mettere un'immagine personalizzata... tipo bottone... come ho fatto x "continua a leggere"? kiss

    RispondiElimina
  34. No, sarebbe troppo complicato. E' all'interno di un tag h3 che presuppone l'inserimento di un testo

    RispondiElimina
  35. domanda: è possibile creare un menu espandibile che contenga i widget? Ossia, nel menu si dovrebbero vedere solo i titoli dei widget come "Archivio", "Etichette", "Newsletter", "Post più letti" ecc, e poi cliccando il menu si espande mostrando il widget per intero...sarebbe fantastico avere una cosa del genere, i widget estesi uno sotto l'altro mi danno un'idea di disordine...
    (ma quanto ti sto rompendo ultimamente? XD )

    RispondiElimina
  36. @filokalos
    Sarebbe fantastico! Se mi trovi quel genio di programmatore che ci riesce...
    Francamente non credo di aver mai visto niente di simile.
    Poi magari qualcuno lo ha fatto veramente e la personalizzazione non è compatibile con il nostro modello :-(((

    RispondiElimina
  37. Ernesto xché mi funziona su chrome e firefox e non su explorer? Era così bello! Ho provato a caricare il tuo :( x vedere se andasse sul mio blog di prova
    http://soffiodidea.blogspot.com/

    RispondiElimina
  38. Astasia utilizzava questo menù e forse lo fa ancora e le funzionava anche con IE. Prova a chiedere a lei

    RispondiElimina
  39. Ciao, innanzitutto ti vorrei ringraziare perchè appunto grazie a te il mio blog è diventato più carino, ho messo un menu a tendina e vorrei sapere per cambiare il colore, dove posso procurarmi i codici?

    RispondiElimina
  40. @affari nostri. Io uso questa tabella http://www.asciitable.it/colorihtml.asp

    RispondiElimina
  41. @Affari Nostri
    Ti consiglio Color Schemer Studio
    http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html
    che è un tool gratuito con lo strumento contagocce per conoscere tutti i codici dei colori di una immagine

    RispondiElimina
  42. Grazie mille, risolto anche questo problema:-)

    RispondiElimina
  43. Ciao Parsifal...ho apprezzato tanto i tuoi articoli ma sono alle prime armi e tante cose nn le capisco...vorrei realizzare un menu a tendina inserito nella sidebar laterale...del tipo:
    TITOLO GENERALE:NORMATIVA TECNICA
    voci secondarie:
    Normativa urbanistica, edilizia,risparmio energetico etc etc...vedi come esempio la sidebar laterale di questo sito...http://www.edilportale.com/normativa/...come devo fare???grazie tante

    RispondiElimina
  44. @Marina Maggiulli
    Il problema più grande è quello di trovare un menù che sia compatibile con il modello. In questo blog ce ne sono diversi. Prova con quelli che ti piacciono di più e, se funzionano, sostituisci i miei dati, quali l'URL e i Titoli con i tuoi.
    Ciao

    RispondiElimina
  45. grazie Parsifal per la tua risposta, ho inserito un menu' multilivello...mi sai dire come faccio a mettere in evidenza solo alcuni post e a nasconderne altri???grazie....

    RispondiElimina
  46. @Marina Maggiulli
    Mi sfugge il senso della tua domanda. Se vuoi nascondere delle voci semplicemente non le metti.

    RispondiElimina
  47. Scusa Parsifal, ma non essendo ferrata in materia non riesco ad esprimere bene quello che voglio dirti...allora io voglio creare sulla sidebar un menu espandibile dove voglio inserire come voce secondaria degli articoli che scrivo personalmente quindi collegati ad un URL interno al blog...ma non voglio che questi articoli compaiano nel corpo centrale del blog nel gadget dei post...ok???vorrei che fossero leggibili solo aprendo il menu espandibile e clikkando poi la voce secondaria..quindi dovrebbero comparire solo nella sidebar e non nella parte centrale...got it???
    grazie

    RispondiElimina
  48. @Marina Maggiulli
    Le voci secondarie sono visibili solo quando si clicca sulla corrispondente voce principale

    RispondiElimina
  49. @Marina Maggiulli
    Leggendo meglio la tua domanda mi pare di aver capito quello che chiedi. Vorresti che i post fossero raggiungibili solo dal menù ma non visibili insieme agli altri post.
    E' una richiesta anomala ma puoi usare due tecniche. Pubblicarli come pagine statiche (ne hai un massimo di dieci) in questo caso non andranno nei feed. Pubblicare i post con date vecchie di un anno in modo da non interferire con la cronologia degli ultimi post.
    Sperando che fosse proprio questo quello che chiedevi :)

    RispondiElimina
  50. Grazie parsifal,era proprio quello che volevo sapere...in realta' non so se e' una richiesta anomala perche' il mio obiettivo e' quello di realizzare un'altra gategoria di post che sono solo "news" e nn c'entrano nulla con le mie recenzioni...per cui volevo scrivere questi post "news" senza, come hai detto tu, interferire con quelli che sono i post principali delle recensioni..non so e' possibile inserire un'atro widget "post" sotto a quello principale???magari dedicando una finestra ai post "recensioni" e l'altro ai post???ti dico questo perche' retrodatare NEWS recenti come quella del Piano Casa (esemp.) nn mi piacerebbe...domanda sciocca???grazie come al solito della tua pazienza!!!:))))))

    RispondiElimina
  51. Salve!!Ho inserito questo menu nel mio blog..Però ho bisogno di un ultimo aiuto!.In pratica vorrei lasciare il pulsante Home page normale,non a tendina e inserire il link della pagina principale..come faccio???il mio blog è http://scaricagratuitamenteifilm.blogspot.com/

    RispondiElimina
  52. @solofilm
    Non so se sia fattibile perché non ho provato ma puoi procedere così. Considerato il codice che ho messo come esempio metti Home al posto di Risorse Blogger. Togli tutti gli elementi che inziano per li e finiscono per /li che sono sotto.
    Sostituisci la prima riga con
    < h3 class="menuheader expandable" >< a href="URL HOMEPAGE" >Home< /a >< /h3 >
    P.S. Ho dovuto inserire degli spazi perché altrimenti non avrebbe salvato il commento

    RispondiElimina
  53. @Ernesto T.Ottimo!Grazie ci sono riuscita!!!..ma sai come mai è diventato di colore Arancio???

    RispondiElimina
  54. @solofilm
    Forse ha preso il CSS del colore del link visitato o quello dello sfondo. Fai delle prove modificando i colori. C'è scritto tutto nel post.

    RispondiElimina
  55. Da quando ho fatto la transizione a .COM il mio menu a soffietto nn funziona piu,nemmeno togliendolo e rimettendolo..nn c'è nulla da fare,vero?

    RispondiElimina
  56. @solofilm Quando si passa a dominio personalizzato molti script caricati su Google Sites non funzionano. Credo che lo facciano apposta per non diventare un magazzino di file utilizzati per altri servizi. In questo caso bisogna caricare i vari file CSS e JS su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  57. @Ernesto T.ok!grazie!Oggi provo e ti faccio sapere.

    RispondiElimina
  58. @Ernesto T.Ah una domanda il CSS e JS devo incollarli su un foglio di testo?

    RispondiElimina
  59. @solofilm Usa Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    è più semplice e li puoi salvare direttamente con l'estensione giusta.

    RispondiElimina
  60. @Ernesto T.Ricapitolando un attimino,io devo scaricare i file 'ddaccordion' & 'script-menù-espandibile' ..Questi due li devo caricare su dropbox,e copiare i link dei file,giusto?..Anche se su Dropbox nn m appare il 'copy link'..Dopo aver copiato i link devo sostiturli nello script che hai scritto in questo post??
    Pardon se faccio tante domande..ma sono una principiante :)

    RispondiElimina
  61. ok tutto risolto!!adesso funziona!!!grandeeeee :D

    RispondiElimina
  62. Grazie trovi sempre buon i spunti da te^^.
    Sto cercando recentemente come poter postare attraverso le etichette nelle pagine statiche.Ho visto un paio di blog americani che adottano questa tecnica. E´ fattibbile?? Ciao e grazie acnora

    RispondiElimina
  63. @Wanesia
    Incollami il link in modo che possa dare una occhiata

    RispondiElimina
  64. Ciao parsifal praticamente ho constatato questo pomeriggio(quando mi metto qualcosa in testa e´ diffile che io ne esca senza arrivare al punto ) che si tratta di un link generato dalla casella di testo quindi per "etichette", non so se mi sono spiegata bene. Il link e´ questo clikka sulle pagine e vedi anche tu http://honeybeeinthecity.blogspot.com/
    danke!

    RispondiElimina
  65. scusa credo d´aver risolto se metti un disegno in HTLM puoi lincarlo a questo link http://il_tuo_sito//search/label/tua_etichetta" target=

    RispondiElimina
  66. @Wanesia
    Sono una serie di immagini inserite in una tabella di una riga con i link alle pagine di qualche etichetta

    RispondiElimina
  67. Salve,
    per prima cosa ringrazio per tutto il materiale che mette a disposizione.

    ho usato questo menù proprio ieri per il mio blog su blogger ma purtroppo non funziona la scomparsa, cioè il menù è perfetto con tutte le sue voci secondarie ma quando si va su una voce primaria non si chiude.
    come devo fare ???

    grazie

    RispondiElimina
  68. ah il blog nel caso volete dare un occhiata per capire è:

    www.dueingredienti.com

    RispondiElimina
    Risposte
    1. @Mirko+-+-+
      Tu hai un dominio personalizzato e allora i javascript caricati su Google Sites non ti funzionano. Devi scaricare questo file
      http://sites.google.com/site/ideepercomputeredinternet/script-menu/ddaccordion.js
      caricarlo sulla cartella Public di Dropbox
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
      e sostituire l'URL nel codice

      Elimina
    2. Scusa Ernesto,
      ma sono molto ignorante in materia

      i passaggi che devo fare sono solo quelli che mi hai detto?

      e non ho capito sostituire url nel codice...
      grazie

      Elimina
    3. @ Mirko
      Se guardi la seconda riga del codice ci troverai
      src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/ddaccordion.js'
      che è l'indirizzo del file che ti ho detto di scaricare. Quando avrai ottenuto il nuovo indirizzo su dropbox che sarà simile a questo
      http://dl.dropbox.com/u/2574553/ddaccordion.js
      lo sostituirai nel codice al posto dell'altro

      Elimina
    4. Quando apro questa pagina

      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

      mi dice siamo spiacenti la pagina del blog non esiste

      Elimina
    5. @Mirko+-+-+-+
      IO ho incollato l'URL adesso e la pagina si apre regolarmente. Puoi anche cercare Dropbox nella casella di ricerca se hai difficoltà a incollare gli URL nel browser. Comunque ti riposto l'indirizzo
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

      Elimina
  69. Ti ringrazio ancora Ernesto mi sei stato utilissimo ora funziona tutto perfettamente......
    sono sicure che seguendo le tue dritte mi verrà un blog bellissimo

    RispondiElimina
  70. Caro genio dell'informatica era proprio quello che cercavo peccato però che per me la procedura sia troppo difficile: rischierei di far esplodere il mio blog!
    Se un giorno qualche anima pia mi vorrà aiutare terrò in considerazione il tuo articolo!
    Grazie comunque.

    RispondiElimina
  71. @ savina
    Ma quale genio :) ho solo un po' esperienza in più di chi comincia solo adesso...

    @chiarodiluna
    Basta perseverare e si ottengono sempre dei risultati :)

    RispondiElimina
  72. ma come mai il mio non si chide?resta aperto...avrò sbagliato qualcosa???di sicuro.

    RispondiElimina
    Risposte
    1. @chiarodiluna
      Semplicemente molto spesso i menù sono compatibili solo con un numero limitato di modelli. Il difficile è trovare quello che ci piace e che sia installabile.

      Elimina
  73. Questo è molto carino e funziona proprio come hai scritto nell'articolo, ma c'è una cosa che mi lascia perplesso: se io clicco sulla sezione, lui me la apre, ma se aggiorno la pagina oppure apro il blog in incognito lui mantiene quella pagina aperta come se l'avesse memorizzata l'ultima apertura, è una cosa normale?

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.