30 luglio, 2008

Creare un menu' orizzontale in blogger

Ti piacerebbe avere un menù orizzontale come il mio? Come ben sai, blogger non dà la possibilità di creare pagine statiche, le classiche "chi sono", ma con qualche piccola modifica al codice, un tocco di CSS e un pizzico di elasticità mentale è possibile crearsi la propria barra orizzontale!!

Avvertenze, si tratta di un tutorial un po' ostico per chi ha poca confidenza con il linguaggio html/css, quindi prima di effettuare qualche modifica, ti consiglio di fare una copia di backup del modello, oppure di fare un po' di pratica con un blog di prova.

Come modello di partenza io ho usato un "minima", ma anche con gli altri template preimpostati non ci dovrebbero essere particolari difficoltà!!

Allora iniziamo, spostiamoci in layout/modifica html, il codice css da aggiungere è questo:

/*-- (Menú) --*/

#navmenu ul {
margin: 0px;
padding: 0px 400px 0px 0px;
font-size: 115%;
font-weight: bold;
list-style-type: none;
list-style-image: none;
}

#navmenu li {
display: inline;
padding: 5px 5px 5px 3px;
}

#navmenu a {
text-decoration:none;
}

Per posizionare la barra a vostro piacimento, dovere "giocare" con i valori che ti ho segnato in blu.

Domanda, dove posiziono il codice?
Il codice va posizionato sopra al "commento":

/* Content
----------------------------------------------- */

O qualcosa del genere. In genere, questo commento può variare da template a template.


Bene blogger, adesso è giunto il momento di costruire materialmente il tuo menù orizzontale!!

Copia questo codice:

<div id='navmenu'>
<ul>
<li><a href='Url_sito_pagina'>Anchor Text </a></li>
<li><a href='http://risorse-blogger.blogspot.com/'>HOME</a></li>
<li><a href='http://risorse-blogger.blogspot.com/2007/10/scambio-link.html'>SCAMBIO LINK</a></li>

</ul>
</div>

Dove al post di Url_sito_pagina dovrai inserire il link di una pagina che ritieni particolarmente importante.
E al posto di Anchor Text dovrai inserire la parola chiave da linkare.
Sotto puoi vedere i miei esempi.

Domanda, e dove incollo quel codice html?
Il codice và incollato sopra a:

<div id='content-wrapper'>

oppure, sopra a:

<div id='main-wrapper'>

Fate delle prove per verificare il risultato che vi piace di più!!



Bene, adesso sai come creare il tuo menù orizzontale in blogger con i css, puoi creare le pagine "chi sono", "foto", "risorse uliti", "Scambio link", e via con la fantasia!! Dopotutto si tratta di semplici post messi in rilievo!! ;)

ps. questo è solo uno dei tanti metodi!! :)
vac 468x60.gif

19 commenti:

Unknown on 31 luglio 2008 alle ore 16:29 ha detto...

Ciao yuri, ti seguo quando posso ma ancora non mi sono messo all'opera per dare il meglio. Per il momento sto lavorando ad un progetto radiofonico su http://radiopazza.blogspot.com passaci a trovare se ti va e magari se hai dei consigli o dei suggerimenti sono tutto dita occhi e orecchie ok?
Buon lavoro

O<-<

alexandroap on 31 luglio 2008 alle ore 20:50 ha detto...

Ottimo post, anche se devo dire che io sono stato più furbo, e ho utilizzato un template che conteneva già un menu orizzontale :)
Comunque, a parte tutto, avrei una curiosità: vorrei sapere come hai fatto a inserire nel tuo post un testo con menu a comparsa. Non so come chiamarlo, ma mi riferisco al testo "continua" che, cliccandolo, faceva comparire altro testo. Mi piacerebbe sapere come hai fatto perchè ho un blog di giochi ed in questo modo potrei nascondere la soluzione direttamente nel post senza doverla lasciare nei commenti.
Ti ringrazio in anticipo
Ciao

GG on 3 agosto 2008 alle ore 12:26 ha detto...

Post molto utile. :)

Io per fare la stessa cosa ho creato dei bottoncini con Photoshop e li ho messi sotto l'header, creando di fatto un menù.

Il risultatonon mi dispiace affatto!

yurj on 4 agosto 2008 alle ore 18:20 ha detto...

@bak: in bocca al lupo per il vostro progetto allora!! :)

@alexandro: Parli del post espandibile??
http://risorse-blogger.blogspot.com/2008/01/post-espandibili-in-blogger.html

occhio,però, sul permalink il post e visibile tutto

@gg: grazie... la tua barra è molto bella, e poi si intona perfettamente con il template del tuo blog!

Crème Brulée on 19 agosto 2008 alle ore 18:52 ha detto...

Utilissimo!!
Ho già messo in pratica i tuoi consigli! Grazie :)

6nervoso on 31 agosto 2008 alle ore 06:35 ha detto...

salve,ho inserito il codice come hai suggerito,ma mi compare con i collegamenti disposti verticalmente uno sopra l'altro e non orizzontalmente come il tuo...
scusami ma sono ai primi passi.
puoi aiutarmi?

yurj on 7 settembre 2008 alle ore 12:04 ha detto...

6 nervoso: prova a ripetere il tutorial da capo, evidentemente hai "perso" qualche pezzo per strada!.

Il tutorial è stato scritto e testato proprio per avere il menù in orizzontale

Associazione Culturale Castionese on 13 ottobre 2008 alle ore 23:25 ha detto...

Ciao, cercavo proprio questo per migliorare il layout del nostro sito! Un'informazione: a cosa corrispondono i 4 valori per i quali dici di provare? evidentemente c'è una logica fissa, ma non sono riuscito a capire bene... sia per il primo gruppo che per il secondo. Complimenti, tornerò a leggerti!

yurj on 2 novembre 2008 alle ore 18:19 ha detto...

Quei valori posizionano il menù più in alto, in basso, più a destra, più a sinistra... insomma dove vogliamo noi!! ;)

Ikira on 20 dicembre 2008 alle ore 23:48 ha detto...

Grazie yurj di tutto, ho una richiesta da farti:
Come facci a far si che quando passo sopra i vari link del menu, a far compaire un colore ad esso?, o meglio se s potrebbe far si che lo sfondo del link del menu abbia un colore di sfondo?...scusa se mi sono spiegato male...

Ikira on 20 dicembre 2008 alle ore 23:50 ha detto...

scusa per gli errori, è che data l'ora(23.50) sono stanchino ^_^...

yurj on 1 gennaio 2009 alle ore 17:51 ha detto...

@ikira: è un semplice effetto che puoi ottenere grazie ai css, si chiama effetto hover.

Prima o poi ci farò un tutorial!! :)

Anonimo ha detto...

ma non ce un menu verticare, che poi si puo personalizzare, fino ad ora trovo solo quelli orizzontali ma a me serve un verticate, grazie, www.adessofilm.com

yurj on 23 marzo 2009 alle ore 23:27 ha detto...

@mauro: in questo caso basta scegliere un gadget "html" e costruirselo con dei semplici collegamenti ipertesuali o con banner. Oppure puoi scegliere il gadger "elenco link".

jenzo on 8 maggio 2009 alle ore 20:28 ha detto...

Ciao ho seguito la tua guida,però fatta tutta l'operazione quando vado a cliccare sui pulsanti del menu appena creati non mi porta al link che gli ho impostato nella stringa,come mai? come faccio a creare una nuova pagina interna al blog stesso?

Leonardo Colombi on 9 maggio 2009 alle ore 08:58 ha detto...

Ciao!
Grazie per questa guida: davvero utile, semplice e chiara ^_^

yurj on 25 maggio 2009 alle ore 23:18 ha detto...

@jenzo: evidentemente hai sbagliato ad inserire l'url o il codice del collegamento ipertestuale.

Una pagina interna è semplicemente una normale pagina del tuo blog, solo che la metti in risalto e in evidenza con il menù!!

claudia on 29 gennaio 2012 alle ore 20:20 ha detto...

ciao!!
grazie per il tuo aiuto, mi sa che ti hanno copiato la pagina...
c'è anche il tuo url..boh
comunque grazie e buon lavoro!

Paulina on 31 gennaio 2012 alle ore 23:30 ha detto...

Ciao! Forse sono l'unica che non riesce ad apportare modifiche. Il primo passaggio mi riesce, mentre per il secondo ho un problema: non trovo la scritta divid ecc :) come posso fare? grazie!!

 
Ti sono stato utile? Ti ho aiutato? Ho risolto qualche tuo problema? Allora che ne dici di offrirmi un caffe?;)

Lettori fissi

Risorse per blogger Copyright © 2009 FreshBrown is Designed by Simran