Benvenuti su Postarelibero.com

giovedì 27 maggio 2010

Menu orizzontale per blogspot (blogger) blog. Ecco come inserire un menu sul proprio blog.


Menu orizzontale per blogspot (blogger) blog con sottomenu (sottocategorie). In pochissimi, semplici, passaggi potrete implementare un menu nel vostro blog: copiate il codice ed incollatelo.... Fatto! :)
I menu in CSS, orizzontali, o verticali, funzionano con i maggiori browser.
Un es. del menu già funzionante lo trovate qui.
Loggatevi in blogger.
https://www.blogger.com/start?hl=it

Cliccate l'etichetta "Layout"->"Modifica Html"
Dopo i metatag, comunque prima del codice <title>, incollate quanto segue:
<link href='http://www.ecocorsa.it/postarelibero/css/menu1horizzontal.css' rel='stylesheet' type='text/css'/>

Sempre nella sezione "Layout", spostatevi sull'etichetta "Elementi pagina":
Sotto la "Navbar", pigiate su "Aggiungi gadget", preferibilmente sotto il riquadro "Header".
Si aprirà una nuova finestra "Configura HTML/JavaScript", cliccate sul gaget:
HTML/JavaScrip

In "Titolo" non scrivete nulla.
In "Sezioni del sito" copiate, ed incollate:
<div id="menu">
<ul>
<li>
<a href="http://www.postarelibero.com">HOME</a>
</li>
<li>
<a href="http://www.postarelibero.com">Etichetta G.</a>
<ul>
<li><a href="http://www.postarelibero.com">Etichetta S.</a></li>
<li><a href="hhttp://www.postarelibero.com">Etichette S.</a></li>
</ul>
</li>
<li>
<a href="http://www.postarelibero.com">Etichetta G.2</a>
<ul>
<li><a href="http://www.postarelibero.com">Etichetta S.</a></li>
<li><a href="http://www.postarelibero.com">Etichetta S.</a></li>
<li>
</li></ul>
</li>
<li>
<a href="http://www.postarelibero.com">Contattaci</a>
</li>
</ul>
</div>

Cliccate sul bottone arancione con dicitura "Salva".

Ricaricate (aggiornate F5) il vostro blog per un test.
Se tutto è andato per il verso giusto, sarà visualizzato il menu.

Come personalizzare il vostro menu:
<li>
<a href="http://www.postarelibero.com">HOME</a>
</li>
Sostituite il link della HOME del mio blog (testo in blu), con un l'indirizzo del vostro sito.
Per aggiungere altri bottoni al menu (senza le sottocategorie), vi basterà copiare, ed incollare, questa sezione di codice, nella posizione che desiderate nel menu stesso. Se si è a digiuno di programmazione, vi basterà incollarlo alla fine dello script, prima dei tag di chiusura:
</ul>
</div>
Sostituirete l'indirizzo con uno vostro, e cambierete l'intestazione"HOME" con una dicitura a vostro piacimento.
<li>
<a href="http://www.postarelibero.com">Etichetta G.</a>
<ul>
<li><a href="http://www.postarelibero.com">Etichetta S.</a></li>
<li><a href="hhttp://www.postarelibero.com">Etichette S.</a></li>
</ul>

In questa sezione, andrete a sostituire i link www.postarelibero, con i quelli relativi alle etichette del vostro blog.
In ogni post, che create, sotto ci sta una dicitura "Etichette", quando ne inserite una, si crea una categoria, nella quale andranno a finire tutti i post con quell'etichetta.
Sotto i post pubblicati, cliccate una etichetta, e vi ritroverete con nella pagina della relativa categoria, copiate il link, ed incollatelo al posto dell' indirizzo.
Solitamente creo due etichette, una onnicomprensiva, il cui link andrà a sostituire il primo indirizzo collegato ad Etichetta G., ed etichette più specifiche, i cui indirizzi saranno inseriti nel codice relativo alle sottocategorie, indicate con la dicitura Etichette.
Ovviamente, la dicitura Etichetta G, ed Etichetta S., vanno sostituite con le vostre voci preferite (es. Notizie, Ambiente, Chat.....)
Per aggiungere un altro bottone con sottocategorie, al vostro menu, copiate questa parte di codice, e incollatela sempre nello script, per evitare errori, incollatelo sempre alla fine dello script, prima dei tag di chiusura:

</ul>
</div>

Se al bottone principale (quello con le relative sottocategorie), non volete collegare un indirizzo, vi basta inserire #none, al posto dell'indirizzo.


Resto a vostra disposizione per eventuali chiarimenti.
Forse, alcuni passaggi sono poco chiari, confido nel vostro contributo per rendere il tutto più semplice.


3 commenti:

Alessandro ha detto... [Rispondi]

Salve, ho seguito molto bene la guida ma il menù non è posizionato bene. Mi spiego, è visualizzato a metà. Questo è il blog. ---> http://informaticaetecnologia803.blogspot.com/

Come si può risolvere il problema?

Grazie per l'aiuto, Alessandro.

Ermes ha detto... [Rispondi]

@Alessandro

Sembra che non venga letto il file css

Sicuro di aver inserito in link, che lo richiama, nella sezione title?

but2 ha detto... [Rispondi]

Ciao,
vorrei chiederti un 'informazione in quanto a pie pagina il menu si vede correttamente,
se sposto il gadget in alto sotto il titolo, il menu si visualizza solo a metà.

Come posso fare,
Grazie
Pierpaolo

Post Correlati

Archivio blog

Blogitalia

Feed XML offerto da BlogItalia.it BlogItalia.it - La directory italiana dei blog http://www.wikio.it