Blogspot: il menu orizzontale.

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. 😉

34 thoughts on “Blogspot: il menu orizzontale.

  • 31 Maggio 2008 in 20:29
    Permalink

    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

    Rispondi
  • 5 Giugno 2008 in 10:36
    Permalink

    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… :))

    Rispondi
  • 31 Agosto 2008 in 21:35
    Permalink

    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?

    Rispondi
  • 31 Agosto 2008 in 21:57
    Permalink

    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 🙂

    Rispondi
  • 1 Settembre 2008 in 23:59
    Permalink

    Ci ri sono…non riesco a caricare in hosting l’immagine dalla cartella creata appositamente: non mi accetta il formato.Dove sto sbagliando?
    Grazie

    Rispondi
  • 2 Settembre 2008 in 21:42
    Permalink


    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! 😉

    Rispondi
  • 2 Settembre 2008 in 22:29
    Permalink

    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

    Rispondi
  • 2 Settembre 2008 in 22:48
    Permalink

    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….

    Rispondi
  • 3 Settembre 2008 in 22:26
    Permalink

    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.

    Rispondi
  • 3 Settembre 2008 in 22:36
    Permalink

    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 🙂

    Rispondi
  • 4 Settembre 2008 in 22:06
    Permalink

    Ho provato a inviarti l’html per e-mail ma all’indirizzo del link “scrivimi”,mi da l’indirizzo non valido…

    Rispondi
  • 22 Settembre 2008 in 14:39
    Permalink

    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

    Rispondi
  • 22 Settembre 2008 in 16:12
    Permalink

    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

    Rispondi
  • 6 Gennaio 2009 in 18:43
    Permalink

    ciao, sul mio blog non sono riuscito a trovare l’ elemento da te descritto, potresti darmi una mano?

    Rispondi
  • 6 Gennaio 2009 in 19:10
    Permalink

    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 🙂

    Rispondi
  • 21 Gennaio 2009 in 20:17
    Permalink

    @ 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

    Rispondi
  • 25 Gennaio 2009 in 15:53
    Permalink

    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 🙁

    Rispondi
  • 25 Gennaio 2009 in 18:04
    Permalink

    @ arrgianf: ti mando un file di testo con un codice che forse ti potrà essere utile

    Rispondi
  • 26 Gennaio 2009 in 11:37
    Permalink

    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 🙂

    Rispondi
  • 26 Gennaio 2009 in 18:43
    Permalink

    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?

    Rispondi
  • 26 Gennaio 2009 in 21:04
    Permalink

    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 🙂

    Rispondi
  • 27 Marzo 2009 in 10:25
    Permalink

    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 🙂

    Rispondi
  • 15 Giugno 2010 in 22:05
    Permalink

    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 😥

    Rispondi
  • 15 Giugno 2010 in 23:18
    Permalink

    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 🙂

    Rispondi
  • 16 Giugno 2010 in 14:58
    Permalink

    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 😀

    Rispondi
  • 1 Novembre 2011 in 15:41
    Permalink

    @ soccerbetter: Un post “preistorico” e nessuno si era ancora accorto di questo errore figlio del “copia-incolla”! Grazie dell’intervento,ora è tutto a posto. 🙂

    Rispondi

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi