blogger blogger tips

Blogger Tips: Menù orizzontale a tendina (sotto al banner)

domenica 5 ottobre 2014Elisha87

Rieccoci all'appuntamento con i blogger tips, ovvero i consigli e i suggerimenti inerenti la sfera del blog e in particolare di Blogger.



Ma andiamo al sodo.
Nel corso del tempo in tante mi hanno chiesto una mano con il menù orizzontale situato sotto i banner, ovvero la classica "barra" con le voci più importanti nel blog, tipo "Home" "Reviews" "Rubriche" e via dicendo.

Quello di cui vi parlo oggi è un semplice widget ma c'è anche un passaggio da eseguire tramite la modifica del codice HTML, cosa che spesso e volentieri spaventa e fa desistere anche solo dal provarci.
Non andate in panico, vi assicuro che se in questi casi si leggono bene le istruzioni, ci si impiega davvero pochissimo e forse forse ci si prende anche gusto.
Anzi, è più lungo da scrivere che da eseguire, quindi spero di spiegarmi bene XD

Il codice che vi mostro fra poco vi permetterà di avere il menù così come lo vedete qua sopra, nell'immagine di apertura del post, ma vi spiegherò anche cosa fare per cambiare qualcosina di base :)

Si inizia:

Andate su Blogger e cliccate su Modello e sul pulsantino "Modifica HTML"



Vi si aprirà una finestra piena zeppa di codici e quello che dovete fare è cercare la riga in cui è scritto <b:skin> ... </b:skin> e cliccare sulla freccina nera subito a sinistra

(clicca per ingrandire)
PRIMA PARTE

Ora copiate questo codice:

/* Menu ----------------------------------------------- */

#dropdownmenu{
width: 100%;
height: 35px;
background-color: #fff;
margin: 0 auto !important;
text-align:center!important;
padding:0 10px;
}

ul#nav {
margin: 0 auto !important;
text-transform: uppercase;
display:inline-block;
list-style: none;
overflow:visible;
text-align:center!important;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
border-right: 0px;
border-left: 0px;
}

#nav li {
text-align: left;
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
float: left;
}

#nav li a, #nav li a:link, #nav li a:visited {
border-right: 0px;
border-left: 0px;
font-family: 'Tahoma', Arial, Georgia;
font-size: 13px;
color: #222;
margin: 0;
padding: 10px 20px 10px 20px;
display: block;
}

#nav li a:hover, #nav li a:active {
background-color: #444;
color: #fff;
margin: 0;
padding: 10px 20px 10px 20px;
}

#nav li.down a:hover{
background-color: #444;
color: #fff;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background-color: #fff;
width: 200px;
color: #222;
float: none;
margin: 0;
padding: 7px 10px;
border-right: none;
border-left: none;
}

#nav li li a:hover, #nav li li a:active {
background-color: #444;
color: #fff;
padding: 7px 10px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}

#nav li ul a {
border-top: 1px solid #444;
width: 200px;
}

#nav li ul ul {
margin: -28px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

e incollatelo subito prima di  ]]></b:skin> (per trovarlo dovete cliccare in qualsiasi punto della finestrella con i codici e digitare CTRL+F. Vi si aprirà una casellina di ricerca in cui dovete inserire ]]></b:skin> e premere invio).

In rosso ho colorato gli elementi che potete cambiare senza fare pasticci :)




Una volta fatto, cliccate sul pulsantino arancione "Salva Modello".

SECONDA PARTE

Ora dovete andare su Layout (sempre tra i pulsantini sulla sinistra) e dovete cliccare su "Aggiungi un gadget", proprio sotto al gadget Intestazione (il banner).
Tra le tante proposte di gadget scegliete l'opzione HTML/Javascript.
Vi si aprirà una finestrella con la casellina "Titolo", da lasciare in bianco, e "Sezione", in cui invece dovete incollare questo codice:
<div id="dropdownmenu">
   <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="indirizzolink">Review</a>
      </li>
      <li class="down"><a href="#">Rubriche</a>
         <ul>
            <li><a href="indirizzolink">Rubrica 1</a></li>
            <li><a href="indirizzolink">Rubrica 2</a></li>
            <li><a href="indirizzolink">Rubrica 3</a></li>
            <li><a href="indirizzolink">Rubrica 4</a></li>
        </ul>
      </li>
      <li><a href="indirizzolink">Collaborazioni</a></li>
      <li><a href="indirizzolink">Contact Me</a></li>
   </ul>
</div>
Ovviamente al posto di indirizzolink dovete inserire l'indirizzo della pagina che volete far visualizzare al clic del mouse.
About Me, Preview, etc.. invece sono i "titoletti" del menù e potete sostituire anche quelli a piacimento.

Questo menù che vi ho mostrato è un "menù a tendina", ovvero alcuni titoletti possono mostrare altri sottotitoli quando ci passate sopra con il mouse, che altrimenti rimangono invisibili.
Per esempio -come vedete sempre nell'immaginetta ad inizio post- il titolo "Rubriche" ha 4 sottotitoli ("Rubrica 1", "Rubrica 2" e così via).

La parte di codice riguardante i titoli e i sottotitoli è questa:

 <li class="down"><a href="#">Rubriche</a> (TITOLO)
         <ul>
            <li><a href="indirizzolink">Rubrica 1</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 2</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 3</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 4</a></li> (SOTTOTITOLO)
        </ul>
</li>

Mi raccomando di cambiare solo gli elementi colorati in rosso e verde!

Come faccio a rimuovere titoli dal menù?

Per cancellare i titoli dovete rimuovere l'intera riga di codice.

Se si tratta dei titoli semplici la riga è questa:  <li><a href="indirizzolink">TITOLO</a></li>

Se volete cancellare uno dei titoli dotato di sottotitoli dovete cancellare l'intero "blocco" di codice, ovvero sempre questo:

 <li class="down"><a href="#">Rubriche</a> (TITOLO)
         <ul>
            <li><a href="indirizzolink">Rubrica 1</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 2</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 3</a></li> (SOTTOTITOLO)
            <li><a href="indirizzolink">Rubrica 4</a></li> (SOTTOTITOLO)
        </ul>
</li>

Se volete cancellare solo uno dei sottotili invece, la riga da cancellare è solo una, ed è la stessa dei titoli semplici (es: <li><a href="indirizzolink">Rubrica 4</a></li>).

Come faccio invece ad aggiungere titoli al menù?

Per aggiungere il ragionamento è lo stesso, ma invece di cancellare dovrete copiare l'intera riga o l'intero blocco e modificare poi a piacimento, avendo cura di incollare prima delle due righe finali (</ul> </div>).

Ok, se avete finito tutto, cliccate sul bottoncino arancione "Salva" e in questo modo dovreste ottenere il vostro menù!


Sono certa di essere stata almeno un po' super contorta, ma ho cercato di darvi più indicazioni possibili in modo che possiate essere un po' più autonome.
Per ogni dubbio o per eventuali insulti, mi raccomando di scrivermi qui nei commenti o di contattarmi per email/facebook/telepatia.

Spero vi sia di aiuto!
Un bacino contorto a tutte quante! XD

You Might Also Like

68 commenti

  1. Eli mi serviva proprio un post del genere, è da tanto che voglio azzardare con questo menù a tendina ma ho sempre paura di fare pasticci. Non appena ho un po' di tempo ci provo, sperando di non fare guai! Grazie Eliiii è un post utilissimo :)

    RispondiElimina
    Risposte
    1. uh spero ti riesca bene! fammi sapere poi :D

      Elimina
  2. Nonostante sia spiegato benissimo (il miglior post letto su questo tema fino ad ora) ma proprio non riesco a farlo! Sarò impedita io ma proprio non mi vieneee! T^T

    RispondiElimina
    Risposte
    1. ma no daiiiiiii non ci credo u_u se segui le istruzioni ti viene! neanche se copi incolli e basta? XD

      Elimina
  3. Con gli step passo passo sembra un gioco da ragazzi...ogni volta che clicco su modifica html mi gira la testa e scappo ^_^ Grazie per le tue preziosissime dritte!!!

    RispondiElimina
    Risposte
    1. e di che!! spero ti possano essere d'aiuto comunque :D

      Elimina
  4. Fortuna che per ora non ne ho bisogno, perché nonostante la tua chiarezza dubito che riuscirei a farlo XD

    RispondiElimina
    Risposte
    1. auahahah dì la verità, non si è capito niente?? T______T

      Elimina
  5. Wow, fantastico! Grazie mille cara, ottimo tutorial. :*

    RispondiElimina
  6. avere i codici html senza dover stare li a scriverli da zero è una manna dal cielo !! XD spero di riuscire pian piano a sistemare il blog e cambiare grafica e layout.... e di certo sfrutterò questo tutorial !! =P

    RispondiElimina
    Risposte
    1. per la grafica ci sono anche gli altri presenti nella sezione blogger tips! ♥

      Elimina
  7. utile e facile, almeno sembra! Lo userò presto :)
    Grazie Eli!

    RispondiElimina
  8. Utilissimi questi post! Io ho fatto amicizia da poco con le barre delle pagine indipendenti, devo ancora scoprire come togliere la righetta bianca tra un bottone e l'altro (perchè l'ultimo bottone non coincide con la fine della barra ed è un pò brutto così) e come regolare la larghezza della barra e dei bottoni in modo che siano uguali con tutti i browser (con lo smartphone l'ultimo bottone va a capo, argh!). Per fortuna non mi serve un menù a tendina, almeno per ora x_x

    RispondiElimina
    Risposte
    1. uh ma quello è il bordo :3 basta scrivere border-right: 0px; e border-left: 0px;
      praticamente nella stessa posizione in cui li trovi qui!

      Elimina
  9. E' già un po' che ci penso...devo tenermi questo post per quando avrò da perderci un po' di tempo...

    RispondiElimina
  10. ohhhhhhhh Eli!!!tu sei la mia salvezza!*________*..davverto interessante..lo terrò in considerazione!Bacioni!

    RispondiElimina
  11. Un tutorial utilissimo! Lo metto tra i preferiti! Lo userò presto, grazie mille! *-*

    RispondiElimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  13. Grazie *_* sono riuscita a creare il menù e a cambiare i colori, però non riesco a fare ''scendere'' i sottotitoli.. :/ metto il link degli articoli però il menù non scende! :(

    RispondiElimina
    Risposte
    1. mmm è strano perché se hai fatto tutto giusto dovrebbe funzionare :( hai ricontrollato bene?

      Elimina
    2. si :( se clicco su, dice ''siamo spiacenti, la pagina del blog che cerchi non esiste'' :/

      Elimina
    3. mmm non dovrebbe dare questo errore, sei sicura che tu non abbia tolto per sbaglio qualche cosa?

      Elimina
    4. sono venuta a vedere e in effetti non sembra che sia stato tralasciato nulla, a parte che in alcuni hai lasciato "indirizzolink", ma comunque non è quello il problema.
      mi viene da pensare che ci sia qualcosa che entra in conflitto ma non saprei dirti cosa con esattezza :(
      l'unica sarebbe tentare su un blog di prova ad utilizzare un template semplice (senza gadget e senza niente) e a mano a mano aggiungere i gadget per capire quale da fastidio :(

      Elimina
  14. ciao ottimo post! Molto utile! Ho una domanda, nel primo passaggio quando bisogna copiare tutto il codice che hai messo, io clicco sulla freccina a sinistra come dici tu e mi esce tutta una parte di testo in blu se non ricordo male, beh il codice che devo copiare che hai messo qua lo devo mettere dopo o prima di tutta quella stringa che c'è già? spero di essermi spiegata...grazie per la risposta in anticipo :)

    RispondiElimina
    Risposte
    1. grazie!
      comunque l'ho scritto ^_^ "incollatelo subito prima di ]]>"
      verso la fine di tutte quelle scritte blu dovresti trovare questo codice (in verde) :)

      Elimina
  15. Utilissimo! Come capisco che codice devo usare per gli altri colori lo faccio :))

    RispondiElimina
  16. anche se già hai mille commenti positivi su questo tutorial...te lo volevo comunicare anche io...grazie mille è stato un gioco da ragazzi con questo tutorial ;)

    RispondiElimina
    Risposte
    1. hai fatto bene perché mi hai resa super contenta!
      In questi casi ho sempre un po' paura che per qualsiasi motivo il tutorial non "funzioni" e quindi i commenti come il tuo sono graditissimi! Grazie mille :)

      Elimina
  17. post davvero utilissimo, sto cercando di rendere il mio blog guardabile ma ho paura di fare mille pasticci ahahah

    RispondiElimina
    Risposte
    1. engi magari prova a creare un blog di prova, giusto per evitare di fare pasticci su quello già presente! vedrai :)
      (comunque non è un cambiamento radicale, nel caso puoi rimuoverlo facilmente togliendo il widget stesso!)

      Elimina
  18. grazie a te e a questo post ce l'ho fattaaaa *-* grazie grazie grazie!!! =*

    RispondiElimina
  19. sto cercando di cambiare template al blog, creandone da sola uno personalizzato. Grazie mille per i tuoi consigli, sono davvero utilissimi. :) forse ce la farò :)

    RispondiElimina
  20. Ci sto provando giusto ora e credo di avercela fatta *___* alla fine non è difficilissimo, ma c'è una cosa che non ho capito: come faccio a far comparire più link sotto una voce?? Grazie mille cara, buon anno!

    RispondiElimina
    Risposte
    1. scusa Rosellina ma leggo solo ora, che disastro che sono!! Comunque basta che aggiungi un'altra riga così < li >< a href="indirizzolink"> Rubrica 1< /a >< / li> (ho dovuto mettere degli spazi per riuscire a scrivere il commento, ma tu copialo da sopra!) però cambiando ovviamente Rubrica 1 con quello che vuoi scrivere tu :)

      Elimina
  21. Grazie per il post ed i suggerimenti! =D io ho solo un problema però..per quanto riguarda l'unica lista con "otto titoli" che ho provato a creare...non mi appaiono tutte le categorie che ho messo ma solo una..eppure ho controllato più volte ed i codici sono giusti..sapresti dirmi il perchè?

    RispondiElimina
    Risposte
    1. ciao Rose, non saprei proprio come mai :( sei sicura che non ci sia neanche una virgola fuori posto??

      Elimina
  22. ciao, guida utilissima, l'ho già fatto ed è stato facile crearlo, ti ringrazio tanto. Però non l'ho modificato, l'ho lasciato così com'è per paura di combinare guai, ma vorrei tanto migliorare la grafica del mio nuovissimo blog, devo apllicarmi un attimo :) penso che ci vorrà un po' di tempo eheh per il momento mi accontento così.

    RispondiElimina
    Risposte
    1. va beh dai aggiungere qualcosa è già n passo avanti! Grazie a te :)))

      Elimina
  23. Ciao!! I tuoi consigli mi sono stati utilissimi per migliorare il mio blog...però, da imbranatissima quale sono, ho una domanda da farti: come si fa a raggruppare i vari post secondo la categoria? Mi spiego io vorrei raggruppare tutti i miei post di make up in modo che quando si clicca sul bottone del menù a tendina si vedono solo quelli (un po' come il tuo insomma).
    Spero che tu mi risponda...ciao!!!

    RispondiElimina
    Risposte
    1. per poter fare questo devi aver aggiunto un'etichetta comune a tutti quei post, per esempio "review". A quel punto ti basta prendere il link dell'etichetta, per esempio http://tuolink.blogspot.it/search/label/review ^_^

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

    RispondiElimina
  25. Sono giorni che cerco una guida decente...ti assicuro che la tua mi ha aiutato sul serio...grazie mille...:)

    RispondiElimina
  26. Il tutorial mi è stato utilissimo, ma riscontro ora un problemino, magari mi sai aiutare :)
    Quando punto il cursore sui titoli che aprono il menù a tendina, quello il più delle volte non rimane bloccato ma si richiude quando cerco di cliccarci sopra :/ idee su come risolvere?

    RispondiElimina
    Risposte
    1. Ciao, la stessa cosa succede anche a me, non so da cosa dipenda.

      Elimina
    2. Ciao ragazze, scusate la risposta tardissima ._.'''
      purtroppo spesso ci sono script all'interno del template che danno fastidio al menu che comincia a dare problemi, però non saprei proprio dirvi nello specifico quale sia in questo caso :(

      Elimina
  27. Ciao, succede anche a me!!! pensavo di essere io un'impedita e di aver sbagliato qualcosa nel codice!!:(

    RispondiElimina
  28. ciao! ho seguito passo a passo tutte le tue spiegazioni (rispetto a tante altre, semplici e ben fatte per fortuna!) però ho un problema..il menù non ha il classico effetto ad apertura tendina. mi spiego meglio: i sottotitoli della mia sezione viaggi (l'equivalente del tuo rubrica nell'esempio), non compaiono a tendina ma sono fissi sotto la scritta viaggi. che posso fare?

    RispondiElimina
    Risposte
    1. anche in questo caso ho paura si tratti di qualche conflitto creato da altri script presenti nel blog :( ne hai molti che tu sappia?

      Elimina
  29. Ciao intanto devo dirti che ti dovrebbero fare un monumento.. Questa guida è utilissima! Domandina:non riesco a far apparire il colore di sfondo delle schede bianco, credo perché in conflitto con qualcosa.. Sai mica darmi qualche indicazione..? Grazie mille in anticipo

    RispondiElimina
    Risposte
    1. grazie mille! purtroppo non saprei dirti quale potrebbe essere il problema :( questo menu ha il contro di andare in conflitto se nel blog sono presenti troppi script

      Elimina
  30. grazie!chiarissima e utilissima!spiegato passo per passo e risolto molti dubbi!
    grazie ancora!

    RispondiElimina
  31. io avrei bisogno di sapere questo: inserire più post in una pagina statica, si può?

    RispondiElimina
  32. Grazie mille per questo tutorial! Sei stata superchiara e utilissima! Diciamo che me la cavo con i codici html ma una cosa non capisco.. Quando vado a modificare il font del Menù in "Indie Flower" il menù a tendina compare, ma quando sposto il cursore verso il primo sottotitolo scompare! Cosa che non succede con altri font, invece! Come mai questa cosa? Sarà che il font non viene "supportato"? Eppure mi sembra strano! Spero che tu possa risolvere questo mio problema!
    Grazie ancora per il tutorial

    RispondiElimina
    Risposte
    1. Ciao Chiara, purtroppo nel tempo ho notato che questo script ha parecchi bug, non saprei dirti perché con indie flower dia questo problema, mi spiace :(

      Elimina
    2. Grazie comunque Elisha <3 Ho lasciato indie flower e, dopo un po', il menù va! Grazie ancora per lo script, è stato utilissimo! Finalmente il nostro blog ha il menù che volevamo da sempre:D

      Elimina
  33. Grazie mille per questo tutorial, finalmente sono riuscita a mettere il menù a tendina. Volevo chiederti, come faccio per centrarlo? Uso lo stesso codice html che uso per centrare le pagine oppure devo fare in qualche altro modo?

    RispondiElimina

I vostri commenti mi danno sempre enorme soddisfazione e sarò ben lieta di passare a curiosare nel vostro spazio, ma non chiedetemi sub4sub.. suvvia, non è carino così, sembra uno scambio di figurine!
E tutti i commenti contenenti link verranno considerati come SPAM e quindi cancellati.
Thanks for your comments ♥

Ultimi commenti

Disclaimer

Questo blog non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità . Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n° 62 del 7.03.2001. Verranno cancellati i commenti ritenuti offensivi o lesivi dell’immagine o dell’onorabilità di terzi, di genere spam, razzisti o che contengano dati personali non conformi al rispetto delle norme sulla Privacy. Alcuni testi o immagini inseriti in questo blog sono tratti da internet, da siti che non ne riportano la fonte; qualora la loro pubblicazione violasse eventuali diritti d'autore, vi chiedo la gentilezza di comunicarmelo via email e provvederò immediatamente a citarne la provenienza o a rimuoverle. Tutti i prodotti che vedete sul sito sono acquistati da me, tranne dove diversamente specificato. Ad ogni modo non sono pagata per scrivere le mie opinioni che sono del tutto personali e trasparenti.

Ebuzzing - Top dei blog - Bellezza

Modulo di contatto