12 febbraio 2011

Menù orizzontale su più livelli per Blogger personalizzabile e funzionante anche con i template del Designer Modelli.

Ho presentato diversi menù per la precedente generazione di template di Blogger. Con l'avvento del Designer Modelli, alcuni di questi non sono più visualizzati correttamente. Mi ripropongo di ripresentarli in una versione universalmente funzionante in un prossimo futuro.

Adesso illustro il procedimento per l'installazione di un menù a beneficio di blogger che hanno l'esigenza di collegare molte pagine in home page. E' molto simile al menù multilivello e ne ricalca in qualche modo la struttura. Ci sono una serie di titoli principali al di sotto dei quali possono essere inserite delle voci secondarie su più livelli


Se si interagisce con il mouse ecco come si presenta il menù

menù orizzontale mattblackmenù
Ho inserito quattro livelli ma se ne possono mettere di meno o anche di più. Andate su Design > Modifica HTML e cercate la riga </head>. Subito sopra incollate questo codice


<!--MattBlackMenù Inizio-->
<link href=' .... /ddlevelsmenu-base.css' rel='stylesheet' type='text/css'/>
<link href='  .... /ddlevelsmenu-topbar.css' rel='stylesheet' type='text/css'/>
<script src='  .... /ddlevelsmenu.js' type='text/javascript'>
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<noscript><a href='http://goo.gl/QaxXO' target='_blank'>Inserisci Menù</a></noscript>
<!--MattBlackMenù Fine - www.ideepercomputeredinternet.com-->
Al posto dei tre file con estensione CSS e del file javascript inserite l'URL dei file di questo archivio che ho caricato su SugarSync. Tale file ZIP va scompattato e occorre caricare ciascun file della cartella su DropBox o SugarSync per ottenerne il link diretto.
Se si vogliono personalizzare i colori, si possono scaricare i file di estensione CSS, aprirli con Notepad++ e modificare il codice dei colori o altri parametri. Successivamente potranno essere caricati nuovamente su un servizio di hosting che li supporti come DropBox. Se non lo avete ancora fatto ecco il modulo di iscrizione a DropBox. I colori da cambiare sono #FDBCB7, #FFEAE9, #003366, white e black. Come è noto i colori possono essere indicati con il loro nome in inglese oppure con un codice esadecimale (vedi i codici dei colori).
Dopo aver salvato il modello si passa alla realizzazione del menù vero e proprio. Ho pubblicato in rete un
La prima sezione è relativa alle voci principali che possono essere in un numero indefinito. Se vogliamo che abbiano dei collegamenti secondari, dobbiamo inserire nel collegamento rel="ddsubmenuX" dove X è il numero progressivo del sottomenù. A seguire incolleremo il codice dei collegamenti per ciascun sottomenù. Saranno del tipo seguente con un numero di voci indefinito
<ul id="ddsubmenuX" class="ddsubmenustyle">
<li><a href="URL COLLEGAMENTO">Titolo 1</a></li>
<li><a href="URL COLLEGAMENTO">Titolo 2
</a></li> </ul>
Quando si vuole inserire un nuovo livello bisogna incollare un nuovo elenco in mezzo ai due tag evidenziati di viola. Ecco un esempio
<ul id="ddsubmenuX" class="ddsubmenustyle">
<li><a href="URL COLLEGAMENTO">Titolo 1</a></li>
<li><a href="URL COLLEGAMENTO">Titolo 2</a></li>
<li><a href="#">Titolo 3
</a> <ul>
<li><a href="URL COLLEGAMENTO">Titolo 3.1</a></li>
<li><a href="URL COLLEGAMENTO">Titolo 3.2</a></li>
<li><a href="URL COLLEGAMENTO">Titolo 3.3</a></li>
<li><a href="URL COLLEGAMENTO">Titolo 3.4</a></li>
</ul>
</li> </ul>
Sono stati evidenziati di viola i due tag in mezzo ai quali è stato inserito il nuovo livello che ha il codice colorato di blu. Il titolo del nuovo livello può anche essere lasciato senza collegamento inserendo un cancelletto (#) al posto dell'URL. Dopo aver terminato l'operazione si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito. Quindi si posiziona con il mouse nel punto desiderato.
Il codice funziona benissimo con Firefox e Chrome ma ha delle lentezze con Internet Explorer, la cosa non è del resto una novità.
Aggiornamento: Dato il troppo successo di questo menù, è stato superato il limite di banda di DropBox. Coloro che lo desiderano possono reinstallare il menù seguendo le nuove istruzioni.
Fonte | Dynamic Drive -


117 commenti:

  1. Hai scelto questo poi? Con IE lascia un po' a desiderare...

    RispondiElimina
  2. Parsifal grazie, ci provo e ti faccio sapere ^-^

    RispondiElimina
  3. Inserito devo solo personalizzarlo ora!in ogni caso funziona!grazie!!

    RispondiElimina
  4. Ciao,
    mi interessa questo menu, ma non riesco a personalizzare la barra di navigazione superiore, i menu a discesa invece si.
    Ho modificato nel file CSS i colori di sfondo e del testo e le dimensioni del testo, ma con risultati insoddisfacenti. Bisogna modificare anche il file .js?
    Grazie per aver indicato Notepad++, è utilissimo.

    RispondiElimina
  5. @sonia
    Adesso non mi ricordo dove si deve operare. Ma se non hai avuto risultati con il file CSS prova con il javascript. Mi fa piacere che anche tu apprezzi Notepad++

    RispondiElimina
  6. Ciao Parsifal,
    sto lavorando per mettere sul mio blog questo tipo di menù: sto già iniziando a modificare i colori a mio piacimento; vorrei solo sapere che "1px" devo eliminare (e dove sopratutto :P) per poter eliminare il bordino grigio sottostante e lungo tutta la barra del menù (non mi piace).
    Credo di averci capito qualcosa, però non sono sicuro che "1px" eliminare; ti incollo qui i 2 codicini(ottenuti dal terzo link "css"), se mi aiuti mi faresti un gran favore:

    .markermenu ul{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
    }

    .markermenu ul li a{
    background: #FFEAE9 url(bulletlist.gif) no-repeat 3px center; /*light gray background*/
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #00014e;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
    }

    Ovvio, le mie sono solo congetture di un dilettante, magari il mio ragionamento non è giusto :P: a te la parola :)!

    P.S.
    Ovviamente prima di mettermi al lavoro, ho provato a salvare i codici del tuo menù insieme al codice da inserire nel modello HTML: così da poter vedere come sarebbe stato il menù e sopratutto se si sarebbe visto all'interno del mio blog :P (mi è già capitato di mettermi a smanettare con HTML vari e poi alla fine aver lavorato per nulla perchè non si vedeva una cippa -.-!Come si dice: impara l'arte e mettila da parte :))

    Un caro saluto e grazie in anticipo
    Marco Michele C.MI

    RispondiElimina
  7. @Marco Michele C.MI
    Se non ti piacciono i bordi elimini questa riga
    border: 1px solid #9A9A9A;
    e poi quest'altra
    border-bottom: 1px solid #B5B5B5;
    Poi eventualmente le puoi reinserire

    RispondiElimina
  8. @Ernesto T.
    Grazieeee mille Parsifal :), sei stato celerissimo!!!
    Comunque i tuoi lavori sono molto belli e ben fatti: peccato che alcune cose a me non si vedono (come le etichette a nuvola, le ho provate in tutte le salse ma nulla, non ce nè una che si veda: ti inventerai presto qualche modifica a proposito :P!)
    Un caro saluto
    Marco Michele C.MI

    RispondiElimina
  9. ciao, scusa se forse sembro (e forse lo sono) assolutamente spaesata ma dove posso scaricare il css di questo menù in modo da modificarlo per il mio blog? grazie e compliementi per il tuo lavoro!

    RispondiElimina
  10. @Annarita Gargiulo
    Ci sono tre CSS che riguardano il menù in modo generico, messo in orizzontale e nella sidebar. Puoi incollare questi URL nel browser e cliccare su Invio
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu-base.css
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu-topbar.css
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu-sidebar.css

    RispondiElimina
  11. @Ernesto T.

    GRAZIE! riprovando con tenacia sono riuscita a fare un menu semplice che mi soddisfacesse...ora è tempo di pensare al "contenuto"! grazie ancora per la tua disponibilità!

    RispondiElimina
  12. Ciao Parsifal, finalmente sono riuscita a concludere qualcosa, i tuoi consigli sono preziosi..ma il problema è la mia incapacità col pc..ti chiedo un consiglio ho istallato questo menù sul mio blog, ti chiederei di dare un occhio se puoi, perchè sotto al menù (precisamente sotto a home)compare questa cosa qua: > (scusa ma non ricordo come si chiama..che ignoranza la mia!!!)
    come posso eliminarla? Forse ho sbagliato qualcosa nel comporre il mio codice menù.il mio blog: /http://fattidicarte.blogspot.com

    Altra cosa, riguardo alla modifica dei colori (questa operazione la vedo per me parecchio complicata)
    Nel codice che tu hai dato da inserire in html del blog, qual'è la riga che corrisponde al colore dei caratteri, e quale a quella del fondo. Così com'è non va bene per il mio blog. C'è un'operazione più semplificata per poter modificare i colori? grazie mille!Sei il mio angelo del web!! ;)

    RispondiElimina
  13. @FattiDiC'Arte Hai lasciato il simbolo del maggiore > subito sopra a
    Top Drop Down Menu 2
    nel gadget HTML, devi toglierlo, meno male che ti funziona lo stesso.
    Per i colori lo so che è complicato ma non c'è un modo più semplice
    #FDBCB7; è il colore dello sfondo delle voci del menù
    940F04; è il colore quando ci si passa sopra con il mouse.
    Devi scaricare i file
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu-base.css
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu-topbar.css
    aprirli con Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    modificarli e ricaricarli su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    Acquisire il link diretto e sostituirlo a quelli del codice.

    RispondiElimina
  14. @Ernesto T. Grazie Ernesto!!! Sei stato velocissimo! Ho già risolto il problema, da sola non l'avrei mai capito..mi ci è voluta una vita per comporre quel menù! Per i colori mi rendo conto che mi ci vorrà un'altra vita..passo ad un'altro giorno. Grazie ancora e buona giornata! ;)

    RispondiElimina
  15. Ci sono riuscita...questo è il mio menù...funzionerà con gli altri brouser?

    RispondiElimina
  16. @Petra
    Non ti resta che provare comunque nell'articolo c'è scritto di sì quindi vuol dire che l'ho già provato io anche se ogni modello fa storia a sé.

    RispondiElimina
  17. Ciao Ernesto, e scusami già dall'inizio la grande ignoranza, ma i codici CSS dove vanno inseriti? Cioè, dopo aver cambiato colori ecc. ai codici, dove vanno messi?

    RispondiElimina
  18. @Nintendo
    I file con estensione CSS e JS, dopo che sono stati modificati vanno caricati su Google Sites
    http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
    oppure su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    I nuovi URL vanno sostituiti a quelli vecchi nei codici di installazione.

    RispondiElimina
  19. Grazi Ernesto.... finalmente ho capito qualcosa! xD

    RispondiElimina
  20. @Nintendo
    Con questo menù è meglio usare DropBox.

    RispondiElimina
  21. Si, infatti sto proprio utilizzando DropBox.... è ottimo! Grazie come sempre!

    RispondiElimina
  22. Ultimo commento che faccio: ma su questo tipo di menù si può utilizzare il tatget="_blank?

    RispondiElimina
  23. Ernesto, solo tu mi puoi aiutare! Il menù mi esce, dopo un bel pò di tempo che c'è l'ho, verticale e senza il multi livello. è successo tutto oggi! Come devo fare?

    RispondiElimina
  24. @Nintendo
    Non ho potuto guardare il tuo blog quindi non ho capito di cosa parli.

    RispondiElimina
  25. Ernesto, ti chiedo perdono, ma io sono un neofita nel vero senso della parola. Veniamo al problema. Ho realizzato, un blog con i nuovi modelli e la barra degli strumenti come è in questo tutorial. La barra funziona perfettamente, pur avendo molti più etichette (con argomenti e sottoargomenti) più complessa e articolata di quella che ci mostri tu in questo tutorial. Ora il mio problema e che quanto scrivo un nuovo post, esso va a finire sulla home page, e non riesco a collocarlo nell'etichetta o nell'argomento che mi interessa... lo so che queste cose le hai spiegate, e io le ho lette, ma io non riesco a venirne a capo... tant'è che sto pensando di rinunciare a tutto...puoi darmi qualche consiglio?
    Ti ringrazio

    RispondiElimina
  26. @Emilio
    Temo di non aver capito. Per inserire un post in una etichetta basta mettere l'etichetta in basso dell'editor prima di pubblicarlo. Se ne possono inserire fino a 20 (mi pare) separandole con delle virgole. Non so se avevi chiesto proprio questo :)

    RispondiElimina
  27. Ernesto, scusami se ti rispondo in ritardo, ma ho avuto qualche contrattempo familiare...
    Dunque, ho seguito il tuo consiglio, ma ancora non va bene...
    o meglio non è come speravo...
    Cercherò di spiegarmi meglio con parole semplici senza terminologia informatica in quanto non ne sono capace.
    Come scritto in precedenza, ho creato una barra di navigazione (il menù) come da tutorial, con sette pulsanti principali; quest'ultimi hanno dei sottopulsanti (sottoargomenti) che a loro volta ne contengono altri: proprio come il menù che porti ad esempio nel tuo tutorial. Ora, questo menù, che ha vari argomenti, annidati gli uni negli altri, in pratica io li chiamo pulsanti, o come ho detto nella prima missiva, ''etichette''. E' forse lì che è nata la confusione, ovvero, io mi riferivo al fatto che mi interessa, una volta creato un post, mettere il collegamento nella voce apposita del menu, ovvero collegarlo a un pulsante-argomento, quello che io chiamavo ''etichetta'' ,forse impropriamente...quindi le classiche ''etichette'' che si trovano nella home pege non mi interessano, altrimenti che senso avrebbe creare una barra di menù?
    Ma forse ce la, ma ciò che io intendo realizzare e il collegamento post-pulsante menù. In effetti proprio come funziona il tuo blog con gli innumerevoli argomenti che tratti cliccandoci sulla tua barra dei menù.
    A proposito, il mio blog non è in rete ma potrei farti accedere come amministratore se vuoi dargli un'occhiata...
    Ciao a presto

    RispondiElimina
  28. @Emilio
    Per mettere il collegamento tra un pulsante e un articolo basta che tu acquisisca l'URL del post dalla barra degli indirizzi del browser e lo incolli nel Menù. In questo menù si chiama URL del collegamento

    RispondiElimina
  29. Grazie Ernesto, è quello che io sospettavo. Quindi nella voce del pulsante che mi interessa dovrò fare copia e incolla del'indirizzo (l'url per l'appunto) e scrivere a fianco ''collegamento''. Quanto prima ti farò sapere...
    Grazie tantissimo

    RispondiElimina
  30. Ernesto, sei MITICO!!!
    Ci sono riuscito, grazie a te!
    Ho pubblicato due post fittizi per prova collegati ad un argomento attraverso un pulsante ''annidato'' nella barra del menù. Però questi due post fittizi compaiono anche nella home page, e chiaramente vorrei eliminarli. Tra l'altro nella home page vorrei scrivere un post di benvenuto e gli argomenti che verranno trattati nello stesso blog. Ti prego se puoi darmi questa dritta. Grazie di cuore.

    RispondiElimina
  31. @Emilio
    I due post non li puoi eliminare ma li puoi retrodatare andando su Opzioni post e scegliendo come data di pubblicazione per esempio il primo di Gennaio 2011. Puoi farlo con tutti i post che vuoi.

    RispondiElimina
  32. Ernesto, ho fatto come mi hai consigliato, ma niente da fare: i due post fittizi rimangono sempre sulla home page. Cosicchè li ho eliminati, ho cancellato anche la cache del blog. Poi ho di nuovo realizzato due post fittizi con la data retrodata al 2010 sin dall'inizio, e funzionano benissimo attraverso il pulsante menù da me scelto. Purtroppo questi due nuovi post fasulli continuano anche in questo caso a comparire sulla home page, oltre naturalmente nella sua pagina di collegamento da me scelto. Accidenti, le sto provando tutte, ma niente... a pensare che questo è uno dei motivi che mi sta impedendo per andare in rete...

    RispondiElimina
  33. @Emilio
    Francamente non capisco. Non è che dopo non hai pubblicato altri post? Perché spariscono dalla home proprio perché sostituiti da altri articoli più recenti. Certo che se hai postato solo quelli ...

    RispondiElimina
  34. Caro Ernesto, quello che intendevo io, e che pur pubblicando 5- 10- 15 post, e così via, la home page rimanesse sempre libera,invece contiene sempre gli ultimi cinque post pubblicati in ordine cronologico; nel mio caso l'ho impostato a cinque post per pagina, mi sembra di capire che così è anche per il tuo blog... se non si può fare niente, non fa nulla, non è un grande danno. Sono molto soddisfatto grazie a te. Non mi resta che studiare gli altri trucchi e sistemi che presenti nel tuo blog...intanto, mano mano che procedo, mi faccio delle copie di sicurezza del mio blog, perchè non credo di andare in rete per il 31 luglio, e non vorrei che google me lo cancelli...
    Ciao

    RispondiElimina
  35. @Emilio
    I blog sono come dei diari, funzionano così. Se volevi fare un sito con la home fissa dovevi sceglierti un altro CMS e comprarti un dominio. Comunque ci sono molti trucchi per diverse esigenze

    RispondiElimina
  36. Imparare un altro cms? Nooo...
    Ormai mi sono affezionato a blogger e sto diventando un esperto grazie a te! Per il dominio penso che lo comprerò a fine anno quando tutto ''girerà'' a meraviglia.
    A proposito, quando finirò questo mastodontico progetto, dedicherò una pagina intera alla tua persona con una recensione al tuo blog. Mi sembra il minimo, visto che stai lontano e non posso avere il piacere di offrirti una cena.
    Ciao

    RispondiElimina
  37. ciao ernesto, sono felicissima, sono riuscita ad installare correttamente questo menu! unico problema: il colore della freccetta. è possibile modificarlo? grazie mille :)

    RispondiElimina
  38. @sara b
    Puoi editare nuovamente questo file
    http://dl.dropbox.com/u/2574553/MattBlackMenu/ddlevelsmenu.js
    con Notepad++
    http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html
    devi sostituire l'immagine della freccia che punta in basso (downarrow) che ha questo URL
    https://lh3.googleusercontent.com/_nT13UtBmmiU/TVVXSrlLe_I/AAAAAAAAR2k/iLKLTNUFehQ/arrow-down.gif
    con un altra a tua scelta. Dopo aver salvaqto il file. Lo carichi su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    nella cartella Public e ne acquisisci l'URL che poi sostituisci nel codice a quello originario.

    RispondiElimina
  39. speriamo che almeno questo mi funzioni...

    RispondiElimina
  40. F U N Z I O N A missione compiuta :)

    RispondiElimina
  41. @bizzo
    Alla faccia del pessimismo ;)

    RispondiElimina
  42. Ciao Parsifal, ho installato questo menù sul mio blog personalizzandolo! Funziona perfettamente ma ho il problema della freccetta rossa: con firefox se ne visualizza una, con explorer due! Per par condicio ma anche per questioni estetiche vorrei eliminarla! Ho provato a eliminare l'indirizzo dell'icona nel file js ma rimane il quadratino dell'immagine mancante! Mi puoi aiutare? Ciao e grazie

    RispondiElimina
  43. @Giuliana
    In altri modelli è stato notato questo stesso tuo problema. Anche nella Demo se la apri con IE vedrai due frecce. Onestamente non so come si potrebbe ovviare.

    RispondiElimina
  44. In compenso, se può servire a qualcuno, sono riuscita a eliminare definitivamente la freccetta! Basta sostituire nel file js dopo il link del downarrow i numeri 11 e 7 con 0 e 0. E la freccetta sparisce. Grazie ancora

    RispondiElimina
  45. @Giuliana
    Ottima idea quella di mettere le dimensioni della immagine uguali a zero.

    RispondiElimina
  46. Cavolo, ho fatto una prova con il tuo codice esempio per vedere se questo tipo di menù funziona sul mio blog e FUNZIONA! Quanto ti voglio bene :)
    Ti chiedo ancora un paio di cose e poi ti giuro che non ti rompo più le scatole per un po' (anche perchè mi ci vorranno ore, giorni, forse decenni per mettere in pratica quanto sopra; come ti sarai accorto, sono un po' dura di comprendonio).
    - Che articolo devo andare a leggermi per imparare a personalizzare i colori scaricando i file di estensione CSS? Non ho idea di come si faccia :p
    - E' possibile modificare anche la lunghezza della barra? Perchè quella del codice che hai riportato come esempio risulta un p' cortina per il mio blog. Devo farlo sempre tramite Notepad ++?
    - Una volta pronta e installata, la barra si posizionerà automaticamente dove dovrebbe o sono io che devo assegnare dei margini in base a quello che ho nell'header?
    Grazie, grazie mille, grazie di cuore!
    Giuliana

    RispondiElimina
  47. @Dieta e Dintorni
    Le tue non sono domande sono richieste enciclopediche!!!
    Per personalizzare i colori leggi questo
    http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html
    e questo
    http://www.ideepercomputeredinternet.com/2010/02/tabella-interattiva-in-italiano-dei.html
    La lunghezza del menù dipende da quante voci ci inserisci (e dalla lunghezza del testo). Io per brevità ne ho messe solo qualcuna.
    Il menù lo devi inserire in Layout > Aggiungi un gadget e posizionarlo sotto l'header. Il menù si posizionerà sulla sinistra e arriverà fino a dove gli serve in funzione delle voci che hai inserito. Per modificare i file devi usare Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    quindi caricarli nuovamente su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    e sostituire l'URL nel codice.

    RispondiElimina
  48. Grazie Ernesto, grazie davvero! Stasera mi metto all'opera, ci sentiremo nel 2013 quando forse avrò terminato (sperando che il mondo non finisca prima, se no sai che gran lavoro per niente!).
    Mi sa che quell'antipixelino così piccino che ho messo nel mio blog per ringraziarti non basta a ripagarti di tutto l'aiuto che mi hai dato, ci vorrebbe un mega banner, altro che! Per fortuna che con la parte grafica ho quasi finito, anche se scommetto che quando uno si addentra nel misterioso mondo dell'html difficilmente riesce a venirne fuori...
    Un caro saluto, e ancora grazie di cuore
    Giuliana

    RispondiElimina
  49. @Giuliana
    Quando ci si prende un po' di pratica queste cose sono molto più semplici e rapide di come si crede all'inizio

    RispondiElimina
  50. Ernesto, è successa una cosa strana: quando provo ad entrare negli indirizzi css per modificare i colori, mi compare un messaggio che dice:
    Error (509) This account's public links are generating too much traffic and have been temporarily disabled!
    E guardando nel mio blog, dove avevo inserito il tuo esempio per poter visualizzare i colori da modificare, la barra si è disgregata e adesso appare come un elenco di link.
    Inoltre, se guardi sopra, nel riquadro rosa dove hai messo il codice da inserire sopra alla voce "head", è sparita una parte degli indirizzi!
    A quanto ho capito c'è un qualche tipo di sovraccarico o qualcosa del genere, e quindi gli indirizzi sono stati bloccati. C'è modo di risolvere la cosa?
    (A questo punto mi viene da pensare che se riuscirò in qualche modo ad entrare nei link, mi conviene comunque modificarli e salvarli per conto mio da qualche altra parte, in modo da evitare in futuro questo genere di problemi; sbaglio?)

    RispondiElimina
  51. @Dieta e Dintorni
    Sei stata la goccia che ha fatto traboccare il vaso ;) Leggi qui
    http://www.ideepercomputeredinternet.com/2012/01/problemi-con-i-widget-effetti-e-menu.html
    e aspetta tre giorni per riprovare

    RispondiElimina
  52. Ernesto... Ci ho messo ore e ore (un po' per seguire bene le istruzioni, un po' per capire come funzionano DropBox e Notepad ++, un po' per capire dove metter mano per personalizzare i colori, un po' per correggere gli errori che facevo), ma alla fine ce l'ho fatta!!!! Grazie mille, sono proprio contenta: tutto funziona perfettamente e ho risolto il problema delle due righe di menù. Vieni a vederlo, se vuoi :)
    Ora provo a inserire una freccetta di mia scelta, come da tue istruzioni a Sara.
    Ti chiedo solo una cosa:
    - E' possibile cambiare il colore della barra lunga, quella che compare sotto le varie voci? Non ci sono riuscita, la trovo forse nel file .js? Perchè provando a modificare tutti colori degli altri 3 file non è cambiata.
    Grazie ancora, un caro saluto
    Giuliana
    P.s. Belli i programmi Dropbox e Notepad ++, proprio utili!

    RispondiElimina
  53. Per la freccina niente da fare, come dicevano anche altri utenti se ne visualizzano due ed è brutto esteticamente.
    Vedrò se riesco a risolvere la, altrimenti non la metto proprio :(

    RispondiElimina
  54. @Dieta e Dintorni
    Si può risolvere facilmente il problema della freccia verticale. Leggiti il commento numero 46 di Giuliana. Nel javascript metti dimensioni 0 per la freccia downarrow e salvi il file. Si vede quindi solo quella orizzontale che non raddoppia. Per i colori onestamente in questo momento non mi ricordo il codice ma dovrebbero esserci tutti e quindi essere modificabili.

    RispondiElimina
  55. a me non compaiono le sottosezioni dopo aver fatto tutto neanche copiando il tuo codice.
    E' già è il secondo su due dei tuoi che non va.

    RispondiElimina
  56. Scusa io, apposta del colore di sfondo "rosa" dei bottoni principali posso mettere un immagine?

    RispondiElimina
    Risposte
    1. @Manager
      Puoi mettere il colore che ti pare modificando il file CSS. Se vuoi mettere una immagine al posto di
      background:#FDBCB7; o background:#FFEAE9; metti
      background:url(URL_IMMAGINE);
      dove al posto di URL_IMMAGINE incolli l'indirizzo dell'immagine che avrai precedentemente caricato su Picasa.

      Elimina
  57. Ciao Ernesto,
    a proposito dello splendido Matt Black menù, avrei una domanda specifica.
    Ho inserito due sottomenù sotto una delle voci, e com'è giusto che sia spuntano lateralmente, alla destra della voce cui si riferiscono. Ho visto però che con Explorer non si può cliccarci sopra, perchè come si sposta il mouse a destra si chiudono. Se non sbaglio per risolvere il problema basta modificare il bordo o i margini delle caselle del sottomenù, ma non ricordo esattamente a quale file dei tre file CSS bisogna mettere mano e quale voce bisogna andare a modificare. Un aiutino? ^^

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      I problemi con IE sono noti. Non so a che livello siano i tuoi ma in genere la freccia verticale viene mostrata doppia e quindi provoca delle difficoltà. Per ovviare a questo problema si può usare il sistema adottato da Giuliana nel commento numero 46 che ha messo uguale a zero le dimensioni della freccia verticale che quindi non si visualizza. Alternativamente si può inserire la riga display:none; nel CSS relativo a detta icona ma è meno immediato.

      Elimina
    2. No, allora non mi sono spiegata bene ^^
      Il problema delle frecce l'avevo già risolto.
      Intendevo che se uno fa scendere la tendina di un menù e poi prova a cliccare su una delle finestrelle secondarie che spuntano a destra, questa si chiude prima di riuscire a cliccarci sopra col mouse.

      Elimina
    3. @GiulianaMosetti
      Con IE bisogna essere veloci e precisi :) in altre parole non c'è nulla da fare

      Elimina
  58. Ciao Ernesto!
    Volevo chiederti ancora due cose per quanto riguarda il Matt Black menù, che funziona benissimo (tranne le rare volte in cui Dropbox impazzisce, non so se ci hai fatto caso ultimamente ;)

    1) Pensavo di allungare la striscia del menù fino a coprire tutto lo schermo del pc. Mi chiedevo se devo impostare la lunghezza in pixel (quanti, per essere sicura di soddisfare anche il più largo dei monitor?) oppure se è meglio utilizzare una lunghezza in percentuale che si adatti automaticamente al monitor (del tipo 100%), e in questo secondo caso se sai che stringa di codice devo inserire nel file .js.

    2) Se allungo la striscia del menù, come posso impostare i margini affinchè le varie voci del menù rimangano al centro così come sono ora?

    Ti ringrazio tanto :)
    Giuliana

    RispondiElimina
    Risposte
    1. @Giuliana
      Il menù prende naturalmente tutto lo spazio disponibile nel layout, non devi fare assolutamente nulla. Devi solo stare attenta a inserire un numero adeguato di voci e di calibrare al meglio la lunghezza dei caratteri.
      P.S. Dropbox ha dei problemi, d'altra parte fin che non c'è nulla di meglio :(

      Elimina
    2. Capisco. Però io ho la larghezza del layout impostata a 980px, e infatti la striscia del menù è proprio di quella lunghezza. Allora ti chiedo:
      - A quanti pixel dovrei impostare la larghezza perchè il layout prenda tutto lo schermo (per essere sicura di accontentare anche i monitor più grandi).
      - Dopo aver effettuato l'operazione di cui sopra, mi si allargherà anche tutto il contenuto sotto il menù (area post, widgets, ecc.)?

      Elimina
    3. Infatti, se allargo il layout è vero che la striscia del menù si allunga e adatta, ma si allarga anche tutto il contenuto sotto al menù, mentre io vorrei che rimanesse al centro della pagina. Non c'è modo di allargare il layout e di impostare dei margini affinchè tutto il contenuto del blog al di sotto del menù rimanga al centro?...

      Elimina
    4. @DietaEDintorni
      Adesso non ho sottomano i codici dei javascript e dei CSS del menù ma mi pare che non ci siano parametri su cui operare per diminuire la larghezza del menù che occupa in modo naturale il 100% dell'elemento pagina

      Elimina
    5. @Giuliana
      Ti avevi risposto dal cellulare. Adesso ho aperto il file ddlevelsmenu-base.css . C'è questo codice
      .ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
      font: normal 13px Verdana;
      margin: 0;
      padding: 0;
      position: absolute;
      left: 0;
      top: 0;
      list-style-type: none;
      background: white;
      border: 1px solid black;
      border-bottom-width: 0;
      visibility: hidden;
      z-index: 100;
      }

      Potresti provare a modificarlo in questo modo
      .ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
      font: normal 13px Verdana;
      margin-left:80px;
      margin-right:80px;
      padding: 0;
      position: absolute;
      top: 0;
      list-style-type: none;
      background: white;
      border: 1px solid black;
      border-bottom-width: 0;
      visibility: hidden;
      z-index: 100;
      }
      dove al posto di 80px potresti mettere il valore più adatto.

      Elimina
    6. No, questa volta si vede che non mi sono spiegata bene.
      Io vorrei che il menù occupasse in larghezza tutta la pagina, ma che il contenuto del blog (cioè l'area post e il footer) rimanesse centrato in mezzo, senza allargarsi.
      Come se tu allungassi al massimo la tua barra rossa del menù, ma lasciassi invariata la larghezza di tutto quello che c'è sotto.

      Elimina
    7. @Giuliana
      Prova a metterlo in un gadget più largo, sotto l'header
      http://www.ideepercomputeredinternet.com/2011/01/come-visualizzare-aggiungi-un-gadget-in.html
      Ma temo di non aver capito neppure stavolta :) Il fatto è che voi donne non siete mai contente :D

      Elimina
  59. Hai ragione Ernesto, noi donne siamo proprio così! Ma è questo il bello, altrimenti voi uomini vi annoiereste ;)
    Ho trovato un paio di esempi da mostrarti:
    http://www.medscape.com/
    http://www.triworks.it/category/news/medical-news/
    Vedi che la parte dell'header e del menù occupa tutta la pagina ma quella sotto invece no?
    Forse che si tratta di impostare del margini al corpo del blog?...

    RispondiElimina
    Risposte
    1. @Giuliana
      Appunto dovresti inserire il codice del menù in un elemento pagina largo come l'header. Se in Layout non lo trovi prova a vedere se ti riesce di crearlo con il metodo linkato nel commento 60.g. Non si può però inserire un elemento pagina più largo del "content" del blog.

      Elimina
    2. Il codice del menù l'aveno già inserito nello stesso elemento pagina dell'header.
      Quello che ho capito è che se il mio blog è lungo 980px anche il menù, l'header e il content sono di questa lunghezza, e quando allungo il layout a 1600px si allargano tutte le aree del blog, e non solo l'header e il menù.

      Io pensavo che fosse possibile fare una cosa di questo tipo: allungare il layout ad esempio a 1600px, e poi impostare al corpo del blog (quindi all'area dei post, alla sidebar e al footer) dei margini, affinchè menù e header rimangano larghi al massimo e il resto del contenuto invece si centri e distanzi dal bordo. Ma forse non si può.

      Elimina
    3. Non credo, sarebbe troppo complicato ammesso si possa fare.

      Elimina
    4. Ok, Ernesto, ti ringrazio e ti auguro una buona domenica! ^^

      Elimina
  60. Ciao Ernesto,
    ho un problemino con il matt black menù: è da qualche ora che con Firefox non funziona più, mentre con Google Chrome e Internet Explorer le tendine scendono regolarmente.
    Ho fatto delle modifiche ad alcuni gadgets nella sidebar sinistra e al font delle voci nel menù, perciò pensavo fosse dovuto a quello, pensavo magari di aver cancellato per sbaglio qualche pezzo di codice. Però il fatto che funzioni con gli altri browser mi fa credere che non sia quello, e inoltre ho anche provato a fare il backup del template prima di fare le modifiche, e ugualmente non funziona.
    Hai un'idea di cosa potrebbe essere?... Grazie.

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Il tuo menù funziona perfettamente anche con Firefox, guarda qui
      http://i.minus.com/ibdbIT91BZhb8D.png
      Se non funziona con il tuo browser dipende da un problema passeggero di cookie. In genere capita che per esempio non si visualizzino gli annunci per qualche ora o qualche giorno. Si sono create delle "contraddizioni" tra i cookie. La cosa si dovrebbe risolvere da sola comunque basta che tu con quel browser navighi un po' a caso o in alternativa tolga i dati di navigazione compresi i cookie però in quel caso devi accedere nuovamente a tutti gli account.

      Elimina
  61. Ernesto, ne sai sempre una più del diavolo! ;)
    Avevi proprio ragione, cancellando i cookie e la cronologia ho risolto il problema con il mio browser. Se penso che ci stavo impazzendo, pensando che fosse colpa mia! Che poi, questo genere di cose mi capita sempre mentre sto facendo delle modifiche, così ogni volta penso "O no, cosa avrò combinato?..." ^^
    Grazie mille, un bacione!

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Esperienza. Lo sai le volte che queste cose sono capitate anche a me, mi ci sono arrovellato e poi era una ca****a di questo tipo :D

      Elimina
  62. Ciao Ernesto, quando inserisco il codice nella sezione del sito, al posto del menù mi viene fuori la scritta: Contatti ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar"). Sono tornato all'interno del codice e la parte iniziale non riportava più la prima parte del codice da me inserita, ma una sua trasformazione con diverse parti sparite e cioè: (minore)div id="ddtopmenubar" class="mattblackmenu">
    (minore)ul>
    (minore)li>Contatti(minore)/li>
    (minore)li>
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar"),

    Per favore hai idea di cosa possa aver sbagliato, visto che lo guardo e lo riguardo e mi sembra tutto ok? i 4 file sono caricati su google sities

    RispondiElimina
    Risposte
    1. @ViviTaranto
      Hai probabilmente incollato male gli URL dei file. La modifica del codice da parte di Blogger è normale perché viene convertito in XML quindi per esempio le virgolette diventano "
      Prova a ripetere l'installazione

      Elimina
  63. Ernesto grazie, sei sempre preziosissimo, finalmente ho capito di cosa si trattava, credo fossero gli httpS...ci ho sbattuto la testa ma alla fine è andata! C'è un modo per aprire le pagine del menù in altre schede?

    RispondiElimina
  64. A proposito, ho allineato l'inizio del menù dal css della topbar modificando il margine left, però notavo che è variabile a seconda dello schermo, ho sbagliato a cercare di centrare le scritte del menù da lì?

    RispondiElimina
    Risposte
    1. @ViviTaranto
      Per aprire i link in un altra scheda devi aggiungere al collegamento questo tag target=_blank" in questo modo "URL COLLEGAMENTO" target=_blank">

      Elimina
    2. Non è venuto bene è target='_blank' con le doppie virgolette "

      Elimina
    3. fatto è perfetto, grazie come sempre

      Elimina
  65. ho il menù a tutta pagina e va benissimo, ma le scritte sono allineate a sinistra, è possibile centrarle? con l'allineamento dei margini dal file css della topbar si allineano sia sfondo che scritte, ma cmq slittano a seconda della grandezza dello schermo e del browser..c'è un modo per centrarlo per bene? ho cercato fra le risp date a Giuliana ma temo di non aver capito

    RispondiElimina
    Risposte
    1. @ViviTaranto
      Non lo so se sia possibile. Prova a usare Firebug o Firebug lite
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
  66. Ciao Ernesto, come sempre mi hai risolto la vita! ho inserito il menu nel mio blog, sono riuscita a personalizzarlo senza problemi ma... quando ci si passa con il mouse sopra le voci secondarie del primo titolo ("lo que hago/lo que soy"), compare a sinistra il submenu della secondo titolo... proprio strano.. per il resto funziona benissimo, se riesci a farmi capire dov'è il problema ti faccio erigere un monumento..

    RispondiElimina
    Risposte
    1. @marivitrombeta
      Questo menù è uno di quelli che hanno minori problemi di adattabilità con i vari modelli masi vede che con il tuo non va. Il problema non è di facile soluzione perché si potrebbe agire su tutto l'insieme dei submenù ma non su un singolo submenu.

      Elimina
  67. grazie Ernesto, ho risolto, era semplicemente un errore nel codice (tutti le chiusure "ul" erano alla fine del codice)Grazie per la tua disponibilità e la risposta sempre pronta!

    RispondiElimina
  68. Fico finalmente un menù come lo cercavo,GRAZIE!
    l'ho messo oggi e intravedo la luce,
    mi fa un gioc strano dropbox, nel senso che se metto il link diretto a dropbox accessibile a chiuque non funziona, se invece metto il link al documento in dropbox quando lo apro con il mio account funziona, ma ovviamente solo sul mio PC!!!
    Come posso fare?
    Grazie ciao
    D

    RispondiElimina
    Risposte
    1. @DavideFacheris
      Hai un vecchio account di Dropbox o uno recente? Se hai uno vecchio devi caricare i file js e css nella cartella Public. Se invece hai un nuovo account, tale cartella non c'è più per questioni di politica della Privacy. Allora va creata dall'utente e i file vanno caricati lì. Poi si clicca sul destro del mouse e si sceglie Get Public link. Sarà il link diretto e permetterà a tutti di vedere il menù. Se hai dubbi incolla l'URL in una scheda del browser per la navigazione in incognito per controllare che si veda la pagina con il file, in sostanza si deve vedere del testo.

      Elimina
  69. Perfetto risolto grazie. Immaginavo fosse una questione di accesso pubblico al link ma avendo clikkato su "condividi linK" pensavo fosse già una condivisione pubblica, invece no.
    Funziona tutto a meraviglia, mi rimane un problema con i colori
    perchè nel designer modelli, personalizza, avanzato,
    dove solitamente si possono cambiare i vari colori del blog, i link, il titolo, etc...
    succede che io cambio i colori e salvo ma non non funziona più!!!
    Ne sai qualcosa?

    Altra domanda, visto la tua esperienza e la tua disponibilità che mi pare costante, tu sei disposto anche a fare modifiche e impostazioni ai blog a livello professionale, pagato?
    Rispondimi pure in privato a capramagra@yahoo.it
    ciao grazie
    Davide
    D

    RispondiElimina
    Risposte
    1. @DavideFacheris
      Non faccio consulenze provate. Il Designer Modelli va usato solo la prima volta poi le modifiche è bene farle dal codice del template perché altrimenti si possono perdere le altre.

      Elimina
  70. OK mi limiterò a godere delle tue consulenze gratuite:)
    Per le modifiche del codice intendi andare nell'HTML del modello?
    Bene, sono sì uno "smanettone" d'indole e di solito me la cavo,
    ma sono molto apprendista e questo codice è pieno di righe con un sacco di diciture e codici colore.
    Dove posso trovare i riferimenti almeno delle voci principali indicate nel designer modelli? (titoli, link ...)
    Oppure puoi indicarmele tu???
    Grazie grazie ciao ciao
    D

    RispondiElimina
    Risposte
    1. La mia domanda è: come riconoscere le linee da modificare e a cosa fanno riferimento??? Grazie
      D

      Elimina
    2. @DavideFacheris
      Su Modello > Modifica > HTML ci puoi andare quando vuoi invece su Modello > Personalizza si rischia di perdere le modifiche già fatte. Il codice da modificare ovviamente dipende dal tipo di modifica :)

      Elimina
    3. Sì ho capito grazie mille!
      Per ora avanzo un attimo con i contenuti e poi per ora i colori sono riuscito ad intonarli,
      poi se avrò bisogno mi farò vivo.
      Grazie mille di nuovo ciao ciao.

      P.S. mi spieghi cos'è l'antipixel? E' un link o qualcosa del genere al tuo sito ? non capisco bene il nome


      Elimina
    4. @DavideFacheris
      L'antipixel andava di moda qualche tempo fa. Ora un po' di meno
      http://www.ideepercomputeredinternet.com/2008/09/strumenti-per-creare-antipixel.html
      http://www.ideepercomputeredinternet.com/2009/08/creare-e-mostrare-nel-blog-il-codice-di.html

      Elimina
  71. ciao Ernesto, ti seguo da quando ho aperto il mio blog: http://homemade-ideas.blogspot.it/
    Vorrei inserire un menu orizzontale a tendina ed ho letto decine di tuoi post a riguardo e provato codici su codici senza trovarne uno compatibile.
    In questo caso, ad esempio, compare una lista semplice di menu e sottomenu.
    E' veramente una missione così impossibile??
    Help

    RispondiElimina
    Risposte
    1. @ Home Ma.Id
      E' veramente difficile trovarne uno che funziona. Lo è tanto di più quando si parte da un modello non ufficiale di Blogger che si scarica da internet. In questo caso molte personalizzazioni sono pressoché impossibili.

      Elimina
    2. il modello è di blogger...ma non credo possa risolvere cambiando modello, giusto?
      uffff dovrò rinunciare all'idea di avere un menù a tendina, vero?

      Elimina
    3. @ HomeMa.Id
      Se il modello è di Blogger allora dovresti prendere in considerazione l'ipotesi che tu abbia sbagliato qualche passaggio. Sarebbe la prima volta che questo menù non funziona in un modello di Blogger senza altri javascript

      Elimina
  72. Ernesto,
    ho notato che la tua barra menù non sballa più in concomitanza con i tilt di "Dropbox", a differenza di tutti i miei javascript: è perché l'hai caricata su qualche altro host? Posso chiederti di quale si tratta? Grazie,
    Giuliana

    RispondiElimina
    Risposte
    1. @# Uso Google Code
      http://www.ideepercomputeredinternet.com/2011/01/come-caricare-i-file-javascript-su.html

      Elimina
  73. Ciao Ernesto, voglio modificare l'altezza delmenù, cioè delle schede, come posso fare?

    Pier

    RispondiElimina
    Risposte
    1. @# Prova a editare il CSS ddlevelsmenu-base.css
      Dovresti trovare delle righe del tipo
      width: 160px; /*width of menu (not including side paddings)*/
      sotto metti una riga del tipo
      height:80px;
      salva il file,caricalo su Dropbox e sostituisci l'URL. Al posto di 80px puoi mettere un altro valore

      Elimina
  74. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  75. Ciao Ernesto,
    c'è una cosa che non capisco: ho un blog che è identico al mio come modello, layout, widgets e misure; ho installato il Matt Black menù mantenendolo invariato, eppure risulta troppo corto e spostato verso sinistra. Però dovrebbe essere ben compatibile, visto che il modello Blogger è esattamente lo stesso. Tu hai idea del perché succeda questo?
    Ti ringrazio,
    Giuliana

    RispondiElimina
  76. Ciao, sai se è possibile integrare una casella di ricerca all'interno del primo menù orizzontale?

    RispondiElimina
    Risposte
    1. In teroria tutto è possibile però si tratterebbe di un lavoro lungo. Dovresti analizzzare i due file CSS per poi aggiungerci un altro elemento magari con il sistema usato in quest'altro menù
      http://www.ideepercomputeredinternet.com/2014/07/drop-down-menu-blogger-search-social-network-icons.html
      @#

      Elimina
    2. Grazie, vedo un pò che riesco a fare basandomi su quel menù. Nel caso ti faccio sapere :)

      Elimina
    3. Ci sono riuscito, è stato più facile del previsto: è bastato aggiungere un elemento div alla topbar come se fosse un'ulteriore voce del menù, incollandoci dentro il codice della barra di ricerca presente nel css dell'altro menù al link che mi hai fornito ;)

      Elimina

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.