Pubblicato il 25/07/08 - aggiornato il  | 33 commenti :

Come inserire artigianalmente una barra dei collegamenti in Blogger.

Nei siti professionali sotto la intestazione ci sono tutta una serie di bottoni che rimandano a dei collegamenti per ogni singola sezione del sito. Si può fare una cosa analoga in Blogger se non si ha un modello che lo preveda già. Questo mio post è da considerare come una esercitazione, se poi a qualcuno torna utile tanto meglio.
La prima cosa da fare è fissare che cosa e quante cose si vuole mettere sotto la intestazione; io ho messo Home, Profilo, Contattami e Scambio link ma si può mettere altre cose tipo un collegamento ad altri blog oppure si può togliere Home che è abbastanza inutile. Fatto questo si va su Nuovo Post e si mettono le scritte con i colori giusti, ciascuna delle quali è stata selezionata e addizionata del collegamento giusto, come mostrato in questo screenshot

L'unico collegamento che presenta una qualche difficoltà è quello per la posta elettronica. Al posto dell'URL va inserito il comando
mailto:parsifal32@live.it
dove al posto del mio indirizzo mail ovviamente dovete mettere il vostro. Completati tutti i collegamenti cliccate su Modifica Html che sta accanto a Scrivi, selezionate tutto e copiate.

Non occorre naturalmente che pubblichiate il post. Adesso andate su Layout, Aggiungi elemento pagina, Htlm/Javascript ed incollate il codice che avete appena copiato. Salvatelo e posizionatelo sotto l'intestazione

Salvate il tutto e visualizzate il vostro lavoro controllando l'esattezza dei collegamenti. Ricordatevi di mettere l'indirizzo giusto di posta elettronica non vorrei ricere le vostre mail!
Se uno vuole fare una cosa più raffinata può usare un programma di grafica come Photoshop o il gratuito Gimp che ha funzioni solo di poco inferiori.


Aprite Nuovo e immettete i dati in pixel che vi servono. Io ho messo 150 pixel di larghezza e 40 di altezza; se avete più collegamenti diminuite le dimensioni. Selezionate Testo e immettete il testo per ogni singolo bottone. Quindi selezionate lo strumento posizionatore e posizionate il testo in modo idoneo. Dovete farlo per tutti i pulsanti che volete aggiungere. In questo screenshot che si riferisce a Photoshop lo strumento testo è cerchiato di giallo e il posizionatore di marrone; anche negli altri programmi di grafica i pulsanti hanno più o meno la stessa forma.


Adesso fate il procedimento nello stesso modo in cui l'ho già descritto, cioè create un nuovo post ma al posto del testo inserite le immagini che avete appena creato. Quando le inserite badate bene di scegliere Nessuno tra i tipi di layout richiesti quindi con il drag & drop posizionateli in orizzontale. Meglio inserire per prima l'ultima e per ultima la prima.

Adesso selezionate ogni singola immagine (apparirà un rettangolo con maniglie) e inserite per ognuna i collegamenti opportuni, quindi e qui sta la differenza fondamentale pubblicate il post successivamente andate su Modifica post, quindi su Modifica Html selezionate e copiate il codice che poi inserirete nel Nuovo elemento pagina da posizionarsi sotto l'intestazione. Salvate il tutto ma adesso bisogna eliminare il post che avete pubblicato. Andate su Gestione Post cliccate su elimina e a questo punto vi verrà presentata l'opzione se cancellare o mantenere le immagini. Voi dovete mantenerle altrimenti si cancelleranno anche i vostri bottoni, come mostrato in questo ultimo screenshot

Anche se ho la presunzione di insegnare agli altri sono appena sei mesi che ho un blog quindi se qualcuno mi darà delle idee migliori non mi offenderò, anzi!
Aggiornamento - Se qualcuno non riuscisse a generare il codice HTML della Barra dei Menu può copiarlo qui e quindi incollarlo nella sezione Modifica HTML dell'editor dei post quindi passare a Scrivi dove sarà visualizzata la barra e mettere i collegamenti voluti. A questo punto passare nuovamente a Modifica HTML, cliccare sul pulsante destro del mouse e selezionare tutto quindi copiarlo ed incollarlo in Aggiungi elemento pagina e posizionarlo sotto l'intestazione.

Aggiornamento importante: Questo articolo è ornai obsoleto. Ho introdotto diversi tipi di menù che possono essere installati seguendo le indicazioni dei post raccolti nelle etichette menù.




33 commenti :

  1. Io sono stato più furbo, ho preso un template dove era già fatto e ho semplicemente modificato i collegamenti a livello dell'accatiemmeelle :)
    Ovviamente scherzo un pò, il tuo è un altro post molto utile. Continua col tuo ottimo lavoro.

    RispondiElimina
  2. Decisamente più furbo caro ale; ormai ho questo modello e mi tocca tenermelo, cambiarlo è un casino, bisognerebbe salvare tutti i widget di statistica due p__le..

    RispondiElimina
  3. Eh anch'io ho usato i collegamenti del templates!! ;P
    Comunque complimenti per il blog è molto utile...
    Dai un'occhiata al mio se ti va però io sto ancora alle prime armi accetto consigli soprattutto per aumentare i visitatori...ciaooo

    RispondiElimina
  4. molto utile ma quale programma serve????????

    RispondiElimina
  5. utile ma che programma serve per poter fare la barra???

    RispondiElimina
  6. @angelo
    Non ho capito quale passaggio non ti è chiaro. La barra, come ho cercato di spiegare, si può fare con un programma di grafica qualsiasi come photoshop che costa ma si può scaricare con emule o Gimp che è gratuito. Devi guardare quanti menù vuoi mettere quindi aprire dei progetti delle dimensioni appropriate. In questo momento ciascun menù del mio blog ha 120 pixel di larghezza e 35 di altezza. Ci scrivi quello che ci vuoi scrivere e poi lo carichi sull'editor di Blogger come ho spiegato. Spero di essere stato più chiaro.
    Ciao, continua a seguirmi

    RispondiElimina
  7. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  8. magari riesci a darmela tu gia' fatta cosi' io metto solo i collegamenti??

    RispondiElimina
  9. perche' ho scaricato gimp ho fatto la barra 120x35 ma poi nn so piu' ke devo fare perche' nn trovo lr schermate che fai vedere tu

    RispondiElimina
  10. @angelo
    La barra è fatta da un insieme di tre o 4 barre che sono realizzate con Gimp. Adesso devi andare su Nuovo post e caricare le barre cliccando su "inserisci immagine". Per ogni barra ci metti il collegamento voluto. Poi passi da Scrivi a HTML, selezioni tutto e copi. Quindi incolli in un elemento pagina. E' un po' difficile darti il codice della barra. Magari pensandoci qualche sistema potrei anche trovarlo. Continua a seguirmi.
    Ciao

    RispondiElimina
  11. @angelo
    e per tutti coloro che non riescono a creare il codice HTML della barra possono copiare il mio in questo link
    http://anonimotoscano.googlepages.com/codicedellabarradeimenu
    Questo codice va immesso in un nuovo post su HTML e quindi metterci i collegamenti voluti.
    Spero che questo sia il chiarimento definitivo.
    Ciao

    RispondiElimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  13. lo speravo anke io ma nn ci riesco.....(nn che tu nn ti spieghi bene)
    magari fammela tu e poi mi dai l'html
    allora io volevo mettere 4 "bottoni"
    -sala giochi
    http://mitigioki.altervista.org/index.html
    -giochi sport
    http://mitigioki.altervista.org/index.wml
    -forum
    http://mitigioki.altervista.org/phpbb
    -contattami
    l'indirizzo e'
    cominirenato@yahoo.it

    RispondiElimina
  14. ho visto ke nn si legge bene gli indirizzi,allora te li metto senza http://,
    -sala giochi
    mitigioki.altervista.org/index.html
    -giochi sport
    mitigioki.altervista.org/index.wml
    -forum
    mitigioki.altervista.org/phpbb
    -contattami
    l'indirizzo e'
    cominirenato@yahoo.it

    RispondiElimina
  15. @Angelo
    Dovresti mettere dei nomi ai bottoni diversi da quelli che ho messo io. Questi sono dei collegamenti ad altri siti

    RispondiElimina
  16. @Angelo
    inoltre ho visto che hai dei blog su altervista e non su Blogger, lo credo bene quindi che non vedevi le stesse schermate che vedevo io.
    Credo che l'unica possibilità che tu abbia è quella di cambiare modello e di prenderne uno con una barra dei menu.
    Ciao

    RispondiElimina
  17. ma se tu vedi il mio sito piu' ke un blog e' un sito di gioki con un forum, quindi a me serviva la barra per andare al forum e ad altre pagine dalla pagina iniziale...
    pero' non me la potevi fare tu???

    RispondiElimina
  18. @angelo
    L'unico blog che hai su blogger è questo
    http://mitigiochi.blogspot.com/
    che però non hai ancora iniziato. Non sono pratico di altervista e web 2.0 mi dispiace.
    Ciao

    RispondiElimina
  19. ma quando ti da lla skermata dove scrivere i collegamenti ci posso scrivere solo
    tuosito.blogspot.it??

    RispondiElimina
  20. ah quello scritto questo e l'ultimo consiglio e' angelo cioe' io

    RispondiElimina
  21. @angelo
    No, devi mettere http://tuosito.blogspot.com, almeno io faccio così e non ho mai provato a vedere se funziona diversamente. Comunque per mettere i collegamenti basta che tu vai alla pagina selezioni l'indirizzo, lo copi e quindi lo incolli. Non occorre digitare nulla

    RispondiElimina
  22. senti ma nn puoi farmela tu semplicemente???
    mi faresti un grande piacere

    RispondiElimina
  23. perche' ci ho provato ma nn mi fa inserire la barra, e cosi' mi fa decisamente schifo
    ti prego dai fammmela tu!!

    RispondiElimina
  24. ma come si fa ad aggiungere URL o la mail su blogger?
    non riesco a farlo e non capisco dove cliccare.
    grazie Andrea

    RispondiElimina
  25. @Anonimo
    Per prima cosa devi mettere le parole o le immagini sul post come ho spiegato. Quindi avrai una cosa tipo HOME PROFILO EMAIL quindi devi selezionare la parola voluta passando sopra con il mouse in modo che diventi celeste. Se hai messo le immagini ci clicchi sopra con il mouse in modo che appaiano le maniglie dell'immagine stessa. Quindi clicchi sull'icona del collegamento che è quella a forma di catena che sta a destra della T del colore. Ti si aprirà una finestra in cui dovrai digitare od incollare l'indirizzo della pagina che ci vuoi mettere. Se invece vuoi mettere la mail devi digitare nella finestra mailto:miamail@dominio.it ovviamente mettendo il tuo indirizzo reale dopo mailto:

    RispondiElimina
  26. ciao sn angelo,
    ho fatto innumerevoli tentativi ma mi viene sempre una barra senza il riquadro e quindi sl la scritta e tu ci clikki sopra e ti manda al collegamento.
    e' veramente brutta (e nn si capisce molto quello ke hai scrtitto xrk nn sn un genio del pc) potresti rispiegarti in parole semplici?

    RispondiElimina
  27. @Angelo
    Come ti ho detto i tuoi blog sono sulla piattaforma altervista e non sulla piattaforma blogger. Mi spiego meglio il mio indirizzo è parsifal32.blogspot.com mentre il tuo è mitigioki.altervista.org anche dall'indirizzo si vede che non hai blogspot ma altervista. Il sistema per fare il blog è completamente diverso. Non potrei aiutarti neppure se volessi. Il sistema per costruire la barra dei menu funziona solo in Blogger. Lo potresti usare solo se tu avessi un indirizzo mitigioki.blogspot.com. Le schermate che hai nel tuo blog quando editi sono completamente diverse da quelle che avresti in Blogger. Spero di essere stato chiaro che il sistema funziona solo su questa piattaforma e non su altre. Non conosco Altervista ma se vuoi mettere una barra dei menu forse ti conviene scegliere un modello in cui è presente.
    Ciao e mi dispiace di non averti potuto aiutare

    RispondiElimina
  28. se me la fai tu me fai un gran piacere

    RispondiElimina
  29. @Angelo
    Vedo che non mi sono spiegato bene purtroppo. Non è che non voglio fartela! Non saprei come fare per un blog su Altervista. Io conosco Blogger soltanto non sono esperto di altre piattaforme

    RispondiElimina
  30. Hei ciao.
    Molto utile il tuo blog .
    Se ti va ho appena creato un blog ma sono ancora ai primi passi
    http://noisiamohacker.blogspot.com/

    RispondiElimina
  31. Ciao Parsifal, volevo chiederti se mi potevi dare un consiglio su come migliorare il mio blog: tramite i tuoi consigli faccio in modo che una pubblicità di adsense si veda solo nella homepage. Il problema è che quando accedo all'interno di un post si vede un antiestetico spazio vuoto al posto della pubblicità. Cosa si potrebbe fare?

    grazie

    Enrico

    RispondiElimina
  32. Ciao Parsifal, il tuo blog è micidiale;)
    E' una bomba!!! Solo in questo blog ho trovato una vera e propria guida online per migliorare il proprio blog...
    Volevo chiederti alcune informazioni aggiuntive su come aggiungere una barra dei collegamenti in blogger. Ho seguito la tua procedura fin quando dice "inserite le immagini che avete appena creato. Quando le inserite badate bene di scegliere Nessuno tra i tipi di layout richiesti quindi con il drag & drop posizionateli in orizzontale. Meglio inserire per prima l'ultima e per ultima la prima". Poi mi sono perso... E cioè una volta selezionate le immagini non ho capito come si fa ad inserire i collegamenti opportuni...Mi potresti dare una mano???
    Grazie in anticipo!
    Ciaooo!

    RispondiElimina
  33. @Domenico
    Devi selezionare una immagine per volta cliccandoci sopra con il mouse. Si vede che è selezionata perché appare un rettangolo con maniglie che la contiene. Clicchi su "Inserisci link" se hai l'editor aggiornato o sull'icona con la catena se hai il vecchio editor e incolli l'URL della pagina che vuoi mettere come collegamento, quindi clicchi su OK.
    Quando lo hai fatto per tutte le immagini devi pubblicare il post. Successivamente lo riapri andando su Modifica, quindi vai su Modifica HTML e copi il codice che puoi incollare in un elemento del tipo HTML/Javascript.
    Alla fine puoi eliminare il post pubblicato ricordandoti di mantenere le immagini postate.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.