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. 😉
Ciao. sei bravissimo hai veramente un bel blog !!! sn disperato allora: tu prima avevi un blogspot allora avevi sopra dove c’e l’avatar (Home , Presentazione, Cronologia, Gaigo & ……., ) io volevo sapere come si metteva quella specie di MENU !! X FAVORE MI SEVERE !!! TI PREGO AGGIUNGIMI A QUESTO CONTATTO MSN ( antonellothe_best@hotmail.it ) XFAVORE !! AIUTAMI !!! GRZ 1000 e ancora COMPLIMENTI X IL BELLISIMO BLOG !!! XFAVORE!!!! CIAOOoOoOoOoOo
interessante ^_^
eccomi eccomi!!!! puff!..puff!
chiedo perdono….. è un momento un po così… poco tempo.. tanti pensieri.. non negativi… solo.. pensieri..
vedo il tuo nuovo blog.. ho appena letto questo ultimo post..
ora con calma.. leggerò il resto.. (Benni!!!!!)….
un saluto miagolante… per farmi perdonare… :))
Salve,ho seguito le mosse da te suggerite,ma il risultato grafico non è fedele all’anteprima del programma e influenza anche lo sfondo del mio blog…cosa succede?
Ho dato uno sguardo al tuo blog (lemayala). E’ ben costruito.
In questo post ho consigliato di creare un blog per fare delle prove. Aggiungo che sarebbe bene fare le prove su di un modello classico. Il mio vecchio blog era costruito su “Sand Dollar”.
Sfondo influenzato: intendi dire che che la pagina s’allarga? Questo può accadere se metti “troppi link”…potresti essere costretto a modificare le dimensioni della pagina html. Il mio consiglio è quello di riprovare partendo da pochissimi elementi ed aggiungerne degli altri poco per volta in modo da riuscire a identificare le modifiche indesiderate.
In bocca al lupo 🙂
Grazie,provvederò secondo le tue indicazioni.
Ci ri sono…non riesco a caricare in hosting l’immagine dalla cartella creata appositamente: non mi accetta il formato.Dove sto sbagliando?
Grazie
❓
Beh…sono rientrato (dopo una vita) nel mio spazio geocities ed ho visto che il sito è molto cambiato.
Comunque le impostazioni non cambiano.
Nella pagina COSTRUISCI PAGINA WEB si trova il FILE MANAGER dove ho salvato i file/immagine in formato GIF. (ad esempio “tabrigth.gif”).
Alla destra del nome del file trovi il tasto “Vedi”… selezionandolo ti appare la pagina con l’anteprima dell’immagine e l’indirizzo che dovrai copiare nel codice del tuo blog (nel mio esempio “http://it.geocities.com/blumannaro/tabright.gif”.
Altro non di dovrebbe essere.
Se non ne vieni a capo contattami pure via email dove magari è più semplice scrivere codici e indirizzi web come esempi.
In bocca al lupo! 😉
Scusami se insisto,ma non riesco neanche più a postare.
Ho provato a incollare un post scritto su word e non lo pubblica e appare l’errore:
“Non è possibile accettare il codice Tag is not allowed: specificato.”
Ho provato a scriverlo direttamente sul post e il risultato è stato analogo.
Pauuura…che sta succedendo?
Aiutatemi per favore
Grazie
Mi sa che hai involontariamente toccato qualche parte del codice che non dovevi….
Mi auguro tu stia facendo le prove in un blog “sperimentale come suggerivo e non su quello “vero”….
Ti conviene “azzerare” il modello e ricominciare.
Seleziona LAYOUT quindi MODIFICA HTML. In fondo alla pagina trovi RIPRISTINA MODELLO CLASSICO. e se necessario anche RIPRISTINA MODELLI WIDGET….
Sono riuscito a pubblicare il post,cancellando gli errori che vengono evidenziati al momento della pubblicazione.Sono quattro le righe che si evidenziano via,via che elimino la precedente.
Vorrei eliminare questo inconveniente ed evitare di ripristinare tutto(se posso…),saresti così gentile da dare un’occhiata al codice html del mio blog per individuare il “danno” e intervenire “chirurgicamente”?
Sono tremendamente sfacciato…ma è il tuo blog è utilissimo,
Grazie a prescindere dalla tua risposta.
Se mi dai le “coordinate” posso fare un confronto in parallelo con il mio vecchio blog e vedere se trovo la “magagna”. Non ti garantisco nulla ma un’occhiatina la posso dare e farti sapere il risultato appena ho un po’ di tempo.
Ciao 🙂
Ho provato a inviarti l’html per e-mail ma all’indirizzo del link “scrivimi”,mi da l’indirizzo non valido…
Grazie della disponibilità!!!
Figurati…per così poco 🙂
Funziona,peccato che mi dia lo stesso problema di 6 nervoso.Ovvero modifica l’intera pagina web.Consigli su come modificare il codice html per evitare il problema.Grazie
Replico,ottima guida,ho risolto il problema eliminado lo sfondo del menu.Grazie per questa guida che cercavo da parecchio tempo.Ho messo il tuo blog tra i prefertiti.Complimenti
😉
ciao, sul mio blog non sono riuscito a trovare l’ elemento da te descritto, potresti darmi una mano?
Ciao Giuseppe.
L’elemento che non trovi è quello evidenziato in blu all’inizio del post?
Ho dato uno sguardo al tuo blog ed ho visto che usi un template piuttosto celebre nato per wordpress. presumo che anche il codice per blogger sia piuttosto pesante e renda difficile la ” caccia”.
Come è stato detto nei precedenti interventi è consigliabile fare queste operazioni in un blog tutto nuovo creato per l’occasione.
Di fronte ad un codice semplice è più facile lavorare. Solo in seguito passerei all’uso del template “complesso”.
Attenzione! Non è escluso nascano problemi d’incompatibilità…ecco una buona ragione per partire da qualcosa di semplice.
Buon lavoro 🙂
Ciao, sto impazzendo nel fare questo menù, ora che ci son riuscito, come lo riempio? http://ilblogdeglistudenti.blogspot.com/ va bene cosi?
@ arrgianf: I link funzionano..e questo è quello che conta 😉
Potresti forse inserire dei pulsanti più “bellini” (le modalità le trovo spiegata tra post e commenti) ma puoi anche lasciare così se ti va. Il tuo blog ha un aspetto “minimalista e dei pulsanti troppo vistosi potrebbero quasi stonare.
Vedi te…a questo punto è solo una scelta estetica, quindi personale.
Ciao
si i link funzionano, ma se ci clicchi sopra non ce nulla. Cmq li ho tolti e ho lasciato le categorie. Ma li vorrei orizzontali e non verticali 🙁
@ arrgianf: ti mando un file di testo con un codice che forse ti potrà essere utile
ciao caigo, ho visto un link tuo riflettointensamente, dove c’era una prova di come avrei voluto organizzare io il mio blog 🙂
adesso ho letto che mi hai mandato un email dettagliatissima! Ti ringrazio tantissimo :):):):) spero di riuscirci adesso 🙂
Non ho avuto ancora tempo per provare a farlo, ma se ci fosse un modo per mettere le categorie in orizzontale anzichè verticale, sarebbe perfetto. Hai presente che tu le hai messe a sinistra: 100 righe, answers, attualità uno sopra l’altro? E’ possibile su blogger metterli orizzontali tipo i bottoni in alto a destra: home, presentazione, cronologia, ecc?
Le categorie su blogger si chiamano etichette. Ovviamente le puoi rinominare come ti pare o lasciarle senza nome (come puoi vedere nel blog di esempio http://riflettolentamente.blogspot.com/ ).
Nei blog “tradizionalmente” le categorie sono verticali. Su WP in orizzontale possono starci le pagine.
Su blogger non credo si possano modificare la disposizione delle etichette salvo intervenire sul codice ma i questo caso stiamo già parlando dell’etichetta html/java 🙂
va be Caigo, alla fine ho lasciato le etichette, mi sono abituato a queste e vedo inoltre che i miei timori erano infondati, cioè i visitatori capiscono subito gli argomenti che ci sono vedendo le etichette. Anche se sono brutti esteticamente, ma rendono facilmente l’idea! Grazie a presto 🙂
Ciao, ottima guida, ma non c’è un modo per inserire un sottomenù ad ogni “tab”?
Fammi sapere, se vuoi contattami tramite e-mail dal mio blog. Fammi sapere è urgentissimo 😥
Ciao Hogash: questo mio post su blogger ormai è un po’ datato per l’argomento (vista anche l’evoluzione della piattaforma).
Prova a guardare questa DEMO, se come penso corrisponde alle tue esigenze puoi andare a leggere le istruzione sul blog di parsifal32 🙂
Si è proprio lui, solo che non riesco ad inserirlo. Ho già adottato il metodo di Parsifal32, lo frequento da parecchio. Solo che mi funziona male, i menù a discesa sono spostati e non ho ben capito il passaggio per modificare l’aspetto e le distanze delle tab.
Credo che sto commento lo copio e incollo sul blog di parsi.
Grazie per l’attenzione 😉
Passami a trovare 😀
Grazie a te. Passerò a vedere il tuo blog 😉
SI CHIAMA HTML non HTLM
@ soccerbetter: Un post “preistorico” e nessuno si era ancora accorto di questo errore figlio del “copia-incolla”! Grazie dell’intervento,ora è tutto a posto. 🙂