Anche se sono passato a WordPress il mio vecchio blog in ambiente blogspot si porta dietro ancora un pizzico di curiosità. In particolare la costruzione del menu orizzontale che, vi ricordo, NON è una funzione di default di blogspot. In questo post vi spiegherò come realizzare un menu uguale a quello del mio vecchio blog.
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 (HTML/Java Script) sotto la Navbar. Perché questo sia possibile dobbiamo fare la seguente operazione: dalla pagina Layout apriamo Modifica HTML. Nella schermata Modifica modello cercate la riga di codice:
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
(la trovate quasi alla fine della pagina). 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 HTML 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 (HTML/Java Script) del nostro blog (che nel frattempo abbiamo riaperto) posizionato appena sotto la Navbar.
Un’ultima cosa: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, ad esempio le mie sono caricate nello spazio free offerto da GeoCities . 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://it.geocities.com/miapaginageocities/tabright.gif”).
Un ultimo consiglio: l’operazione non è particolarmente complicata ma con tutte queste operazioni è possibile fare qualche piccolo errore di percorso. Il mio suggerimento è di creare un blog di prova (con blogger è questione di un minuto) dove sperimentare il tutto. Una volta presa padronanza della procedura potrete ripetere il tutto sul blog principale. Buon lavoro. 