Dopo aver finalmente trovato un codice semplice da personalizzare, ecco che Blogger come al solito mette i bastoni fra le ruote.
Come?
Il codice inserito nel gadget HTML/Javascript nell'area 'adibita' alle pagine, sforma tutto il menu! Probabilmente è anche per questo motivo che inserendolo nel post di presentazione il menu si vedeva corretamente, mentre una volta inserito nel gadget si deformava, senza nessuna possibilità di modificarlo in modo semplice ed immediato.
Premesso ciò, vi dico che il seguente codice, davvero facilissimo da personalizzare, è da inserire all'interno del codice HTML del vostro template!
Nessuna paura!!!
Ormai siete diventate bravissime ;)
Intanto vi presento il nuovo menu!
L'ho inserito nel blog demo dello slideshow per questione di comodità, soprattutto nel farvi vedere come effettivamente vien fuori inseirto nel modo corretto.... è il menu sotto il titolo del blog.
Arriviamo al codice.
Dopo essere entrate in Modifica HTML, cliccate all'interno del frame in cui si vedono i codici e premete CTRL+F per far apparire la finestrella di ricerca veloce.
All'interno del campo scrivete main-outer e cliccate invio.
Il risultato della ricerca evidenzierà in giallo il div main-outer, appunto.
Subito sopra incollate questo codice:
<div id='sct'>
<ul id='sct-nav'><li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li>
Social
<ul class='sct-sub-nav'>
<li><a href='#'>facebook</a></li>
<li><a href='#'>Instagram</a></li>
</ul>
</li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<ul id='sct-nav'><li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li>
Social
<ul class='sct-sub-nav'>
<li><a href='#'>facebook</a></li>
<li><a href='#'>Instagram</a></li>
</ul>
</li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
Passiamo ora agli stili, il CSS.
Andate in Personalizza > Avanzato > Aggiungi CSS. Nel campo vuoto inserisci il codice qui sotto:
#sct {
font-family: verdana;
padding: 20px 50px 50px;
font-size: 13px;
text-align: center;
background: transparent;
text-transform:uppercase;
}
ul#sct-nav {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul#sct-nav li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 7px 10px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul#sct-nav li:hover {
background: #B2E0E0;
color: #fff;
}
ul#sct-nav li a:hover, ul#sct-nav li ul li a {
color:#fff;
text-decoration:none;
}
ul#sct-nav li ul {
padding: 0;
position: absolute;
top: 32px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;z-index:10000;
}
ul#sct-nav li ul li {
background: #B2E0E0;
display: block;
color: #fff;
}
ul#sct-nav li ul li:hover {
background: #A0CACA;
}
ul#sct-nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
font-family: verdana;
padding: 20px 50px 50px;
font-size: 13px;
text-align: center;
background: transparent;
text-transform:uppercase;
}
ul#sct-nav {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul#sct-nav li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 7px 10px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul#sct-nav li:hover {
background: #B2E0E0;
color: #fff;
}
ul#sct-nav li a:hover, ul#sct-nav li ul li a {
color:#fff;
text-decoration:none;
}
ul#sct-nav li ul {
padding: 0;
position: absolute;
top: 32px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;z-index:10000;
}
ul#sct-nav li ul li {
background: #B2E0E0;
display: block;
color: #fff;
}
ul#sct-nav li ul li:hover {
background: #A0CACA;
}
ul#sct-nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Ricordate che, quando un giorno vorrete modificarlo, lo troverete in Modifica HTML, alla fine di tutti i codici degli stili.
Se avete bisogno di saperne di più guardate questo mio tutorial!
Vediamo ora come personalizzare i colori, ma prima è importante che voi sappiate che per deformazione professionale, in quanto mamma, sento davvero il bisogno di svezzarvi, quindi prendete appunti perchè:
- Il menu, in HTML, si definisce ul
- Gli elementi della lista, si definiscono li
- Il link è definito dal tag a, e quando il mouse passa sopra il link in HTML si difenisce :hover
- Il colore dello sfondo si modifica cambiando il valore corrispondente alla voce background:
- Un menu, ul, inserito all'interno del tag della lista, li, indica che siamo in presenza di un sottomenu
- Sostituisci il simbolo # con l'URL della pagina che vuoi linkare
- Il tipo di font si è dato dal nome della sua famiglia, ovvero font-family:
- Il colore del font si modifica cambiando il codice del colore alla voce color:
- width = larghezza ... height = altezza
Detto ciò, non vi sembra più chiaro il codice che vi ho fornito?
Allora, adesso sapete dove andare a mettere mano per modificare il menu.
Non sapete dove prendere il codice del colore????
Eccoti un paio di links ;)
Se doveste avere problemi, dubbi o gridare semplicemente 'Yeeeeeeeeee ce l'ho fatta!!!!'.... lasciate pure un commento ;)
.jpg)
io ho un problema, ho fatto così come hai detto ma non viene :( mi rimane tipo elenco.. di lato :(
RispondiEliminaAccidenti... -.-
EliminaIl codice è esattamente quello che ho inserito io nel blog demo... riesci a farmi vedere ciò che hai fatto?
sono andata nell'html, appena sopra il "div class='main-outer'" ho messo il codice che hai messo su, poi sono andata in css e ho copiato l'altro modificando solo lo sfondo. Ma non va uhmm
Eliminanon riesci a farmi vedere? perchè così non riesco a capire....
EliminaOk ho smanettato un attimo e ora VA!! ^_^ Grazie mille per il codice ^_^
EliminaMi fa piacere ^_^ Ti è venuto proprio bella la grafica del blog :D
EliminaBravissima!!!
Io in questi mesi ho fatto solo danni al mio blog, quindi per il momento non me la sento di metterci mano :D
RispondiEliminaPerò ecco, il menù a discesa è l'unica modifica che vorrei apportare prima di incatenarmi le mani. Non ho capito però se: il menù viene generato da zero, oppure va a modificare il menù pagine già esistente. Parlo arabo, I know ._.
questo proposto è un menu che viene generato da noi...il menu delle pagine di Blogger ancora non è ai livelli di sottomenu e compagnia bella :)
EliminaIn effetti sarebbe comodo che Blogger implementasse la possibilità dei sottomenu... ma per fortuna c'è Simo! :D
EliminaSei troppo buona *_* :*
EliminaCi capisco ben poco, però grazie!
RispondiEliminaPost assolutamente utile, me lo segno e me lo studio con calma.
RispondiEliminaGrazie per le spiegazioni!!
Daniela
Questo commento è stato eliminato dall'autore.
RispondiEliminaCiao! Grazie per le dritte, incredibilmente sono riuscita a installare anche io, frana in informatica, il menu e a personalizzarlo. :-) Non ho capito solo una cosa: come faccio a collegare le varie voci/categorie a determinati post?
RispondiEliminaGrazie mille ancora e complimenti per il tuo utilissimo blog!
Chiara
Mi spiego meglio: vorrei inserire il link a una serie di pagine.
EliminaHo visto che sostituendo # nel codice html mi crea un link che rimanda a una sola pagina. Come faccio a far sì che mi rimandi a una serie di pagine (per esempio che trattano dello stesso argomento)?
Ri-grazie :-)
Ciao Chiara, sì ho capito, intendi dire collegare il link ad una categoria che racchiude una serie di post.
EliminaAllora segui questo mio tutorial, ovviamente seguilo per capire come prendere l'URL edlla categoria, e poi inserirsci il link al post del cancelletto ;)
Creare una pagina per categoria
Grazie!!! Hai fatto il miracolo :3
EliminaTroppo gentile *_*
EliminaI tuoi codici sono sempre interessanti e li spieghi sempre in maniera sempplice :)
RispondiEliminaE io finalmente mi sono iscritta alla tua mailing list così non perderò più un post ;)
Un abbraccio.
Nicoletta
thewhitepeppermint.blogspot.it
Grazie mille Nicoletta!!!
EliminaSpero di riprendere a pieno ritmo al più presto...anche per la mailing list!!! :(
Ciao Simona, abbiamo appena scoperto il tuo blog e sicuramente torneremo per studiare questi preziosi consigli "tecnici" ma soprattutto per vedere tutte le tue meravigliose creazioni! Complimenti!
RispondiEliminaGrazie mille :D
EliminaA presto :)
ma il tuo blog oltre che essere meraviglioso è un'officina di idee meravigliose*-* grazie per aituare noi poveri mortali di internet come me che sono un po' ciompi con queste cose :* mi sono unita i tuoi follower, se ti fa piacere iscriviti al mio blog :* http://tersicoreinbeautyland.blogspot.it/
RispondiEliminaGrazie ^_^
EliminaPasso molto volentieri ;)
Grazie, funziona perfettamente e lo adoro :)
RispondiEliminaciao... il codice è fantastico come sempre... ma vorrei aumentare la grandezza del font, solo che se modifico font-size non mi cambia la grandezza del carattere ma aumenta lo spazio tra il logo e la riga con tutte le pagine (menu) .. come posso fare per aumentare solo il font ????
RispondiEliminaCiao Consuelo! Hai provato ad aumentare il font-size del primo blocco #sct?
EliminaMa perché nemmeno con la tua guida molto semplice e spiegata così bene non riesco a modificare il colore del mio menù!!!! Che rabbia!!!!
RispondiEliminaciao! Se vuoi cambiare colore all'intera barra del tuo menu devi modificare il background di #navigation....ad esempio...
Eliminase vuoi farlo dello stesso colore di sfondo del simbolo di ricerca devi cambiare:
background:#fff ....con.... background:#FD707A
Presto risponderò anche alla tua email!!!!
:*
Ciao Simona!
RispondiEliminaInnanzitutto complimenti, il tuo blog è meraviglioso :)
Sono immersa nella creazione del mio primo blog e questo menu mi sembra perfetto, vorrei chiederti però due cose:
1) Come faccio a cambiare il colore delle scritte del menu? Ho provato a sostituirlo in tutti i codici sia di background che di color ma le scritte "home", "about", "blog" e "contact" rimangono sempre azzurre...
2) Il codice "background: #A0CACA;" da colore sia alle scritte del menu al passaggio del mouse che a quelle del menu a tendina.. è possibile dividere le due cose avendo così la libertà di farli diversi?
Grazie in anticipo per la tua pazienza! :)
Ciao!
EliminaGrazie per i tuoi complimenti ♥
Dunque, ti rispondo per ordine:
1. Per cambiare colore ai links del menu principale devi aggiungere:
ul#sct-nav li a {color: # ..... ;}
al posto dei puntini inserisci il codice del colore.
2. Per cambiare colore al background che si attiva al passaggio del mouse devi modificare:
ul#sct-nav li:hover e ul#sct-nav li ul li:hover
Il primo per il menu principale, il secondo per il sottomenu.
Quello che dici cambia solo il sottomenu...
mentre #B2E0E0 è l'azzurrino...
Se hai altri problemi scrivi pure qui ^_^
Grazie mille!!!!
EliminaHo sbagliato il codice della seconda domanda, mi riferivo al "color" di questa parte:
ul#sct-nav li a:hover, ul#sct-nav li ul li a {
color:#fff;
text-decoration:none;
}
che fa cambiare colore alla scritta del menu al passaggio del mouse e alle scritte del menu a tendina (senza il passaggio del mouse), è possibile mettere due colori diversi?
Sì certo! Ti basta dividere i due codici:
Eliminaul#sct-nav li a:hover {
color:#fff;
text-decoration:none;
}
ul#sct-nav li ul li a {
color:#fff;
text-decoration:none;
}
Grazie ancora! :)
EliminaCiao Simona, come sempre mi affido al tuo blog per fare modifiche al mio blog! ^_^
RispondiEliminaHo inserito questo menu, ma tra il menu e la slide sotto mi si crea molto spazio bianco. Come posso diminuirlo?
Grazie mille!
Ciao Marika, grazie ^_^!!!
EliminaNon riesco a visualizzare il blog...se lo stai lasciando in privato per apportare delle modifiche, potresti rimetterlo per un po' pubblico? giusto il tempo di dirti come fare...
Ciao Simona, ti seguo da un po' e trovo i tuoi tutorial una figata pazzesca.
RispondiEliminaHo già usato i tuoi suggerimenti in diverse occasioni e stavo provando a creare il famoso menù a tendina.
Seguendo questo tutorial alla lettera però non mi piace dove si vanno a posizionare le pagine. Se volessi farle salire e posizionarle sotto la descrizione del blog? Invece di main-aouter dove dovrei incollare i codici?
Grazie mille!
Ho provato di nuovo ed ora le pagine sono in verticale invece che in orizzontale
EliminaCiao fabiola, scusasmi l'immenso ritardo... Se tu riuscissi a darmi il link al tuo blog, magari riusco a capire come mai succede questo ;)
EliminaEcco qua!
Eliminahttp://lananapatch.blogspot.it/
Allora devi incollare il primo codice subito sotto il tag di chiusura dell'header, ovvero </header> ...
EliminaProva e poi fammi sapere ;)
Inizio settimana ci provo e ti farò sapere ;)
EliminaQuesto commento è stato eliminato dall'autore.
RispondiElimina