2 aprile 2009

Menu orizzontale per Blogger

Per prima cosa dobbiamo fare una piccola modifica nel codice del nostro blog. Vi ricordo che dovremo inserire un nuovo “elemento pagina” al nostro layout (HTLM/Java Script) sotto la Navbar. Perché questo sia possibile dobbiamo fare la seguente operazione: dalla pagina Layout apriamo Modifica HTLM. Nella schermata Modifica modello cercate la riga di codice:



Sostituite 1 con 3 . Solo in questo modo sarà possibile inserire i nuovi elementi pagina anche nell’header e non solo lateralmente. Fatta la modifica salvate il modello e tornate su Layout. Potete verificare la nuova impostazione provando a trascinare uno qualunque dei vostri elementi pagina sotto la Navbar.
Per il momento possiamo uscire dal nostro blog e andiamo a costruire la parte “grafica” del nostro nuovo menu. Per questo abbiamo bisogno del programma CSS Tab Designer che possiamo scaricare gratuitamente da questo sito (solo 1.35 MB). Sul menù di sinistra (Item) creeremo le nostre tab, con i nomi che vogliamo e naturalmente con i loro relativi link . Ad esempio se dentro Tab Text scriviamo “Link” dentro Tab Url scriveremo qualcosa come http://mioblog/mieilink ovvero l’indirizzo di riferimento alla pagina che vogliamo associare al pulsante che stiamo creando. Per fare questo clicchiamo sul bottoncino ‘+’ in verde, e continuiamo così per quante tab vogliamo creare. A questo punto premiamo il tasto Generate HTLM salvando il tutto in una cartella creata per l’occasione. Ora dal menu alla destra del programma selezioniamo il tasto Code. Con il tasto destro del mouse copiamo (copy code) il codice in un elemento pagina (HTLM/Java Script) del nostro blog (che nel frattempo abbiamo riaperto) posizionato appena sotto la Navbar.

Le immagini create dal programma che abbiamo salvato nella cartella del nostro pc non vengono lette dal nostro blog,. Per questo motivo dobbiamo caricare le immagini presso un hosting “amichevole”. Una volta caricate ne dovrete inserire l’indirizzo all’interno dell’elemento pagina che abbiamo inserito sotto la navbar. Gli indirizzi delle immagini andranno a sostituire voci come background:url(”tabrightF.gif”) diventando qualcosa come background:url(”http://NOME HOST/tabright.gif”).
Articolo preso da blumannaro

Nessun commento:

Posta un commento