Pubblicato il 01/01/09 - aggiornato il  | 6 commenti :

Inserire in Blogger una Barra dei Menu senza modificare il modello.

Questo argomento l'ho già accennato in questo articolo ma forse è il caso di riprenderlo perché ho ricevuto diverse richieste in tal senso.

Fissiamo alcuni punti fondamentali

  • Esistono modelli di Blogger che prevedono una specifica Barra dei Menù quindi in quel caso è inutile e dannoso intervenire
  • Nessun modello di Blogger tra quelli di default che vengono proposti all'atto di creare un blog prevede tale Barra; quindi è a loro che è rivolto questo articolo
  • La Barra dei Menù può essere inserita anche modificando il modello, segnatamente i fogli di stile e ci sono diversi post in rete che spiegano come fare
  • Il procedimento che adotterò non prevede la modifica del template ma solo l'aggiunta di un gadget o elemento pagina che dir si voglia.
  • Occorre fare un programma delle voci da inserire p.e. Home, Profilo, Scambio Link, Email, ecc.
  • Bisogna sapere di quanti pixel può essere lunga questa Barra dei Menù e quindi regolarsi di conseguenza con i singoli elementi

Nel caso di questo blog la Barra può essere lunga al massimo circa 900-950 pixel ma possiamo farla anche più corta per lasciare la possibilità di inserire un'altra voce in futuro.

Per quanto riguarda le pagine da collegare queste devono avere tutte un URL già acquisito. Home e Profilo si può ricavare da Blogger; Scambio Link nel mio caso è un post retrodatato che uso per scambi di collegamenti con altri blog. Email merita un discorso a parte perché ci sono due possibilità

  1. Se volete che i vostri lettori vi possano mandare delle email direttamente cliccando sopra al collegamento allora il link dovrà essere
    mailto:mionome@dominio.it
    dove nell'ultima parte colorata di rosso inserite la vostra email
  2. Se invece volete che i vostri visitatori aprano un modulo per inserire i loro messaggi allora leggetevi questo post e inserite il collegamento alla pagina come è lì specificato.

Considerate la lunghezza delle parole che compongono i collegamenti e dei relativi spazi

  • HOME  4 lettere più 2 spazi per un totale di 6 (inizio e fine parola)
  • SCAMBIO LINK  11 lettere più 3 spazi per un totale di 14
  • PROFILO   7 lettere più due spazi per un totale di 9

Moltiplicate per un numero adeguato le lettere di ogni collegamento; per il mio modello 12 va bene, in un altro caso scegliete un numero più grande o più piccolo. Allora

  • HOME sarà lunga 6x12=72 pixel
  • SCAMBIO LINK    14x12=168 pixel
  • PROFILO              9x12=108 pixel

e così via. Adesso occorre aprire un programma di grafica; io ho utilizzato Photoshop ma anche il gratuito Gimp va più che bene. Per ogni parola aprite File>Nuovo di larghezza uguale ai pixel voluti e di larghezza adeguata. Un'altezza che vada da 14 a 20 pixel è adeguata

image

Impostate lo sfondo Trasparente oppure Bianco quindi cliccate su OK. Sulla sinistra selezionate lo Strumento Testo ed il Colore adatti al vostro blog

image     image

Cliccando due volte sul colore si può impostarlo conoscendone il colore numerico in esadecimali. Per saperne di più su questo argomento potete consultare questo articolo o quest'altro.

Adesso digitate il testo del vostro collegamento dopo averne scelte le caratteristiche di font e grandezza

image

Con lo Strumento Sposta posizionatelo adeguatamente nel posto desiderato

image    image

quindi File>Salva con nome e scegliete un formato JPG, GIF o PNG. Eseguite lo stesso identico procedimento per tutti i collegamenti che volete creare, modificate soltanto la larghezza a seconda della lunghezza della parola.

Adesso aprite l'editor di Blogger con Nuovo Post ed inserite le immagini che avete appena salvato partendo dall'ultima in ordine di posizionamentoe scegliendo Nessuno come Layout

image

Adesso con il mouse e il drag & drop posizionatele orizzontalmente, quindi selezionatene una per una e incollateci il collegamento voluto cliccando sull'icona della catena

image

Nel caso di EMAIL mettete l'espressione mailto:indirizzo email se volete il collegamento diretto al programma di posta elettronica predefinito.

Adesso passate alla visualizzazione in HTML e copiate tutto il codice che avete generato

image

Andate in Layout>Elementi pagina>Aggiungi gadget>HTML/Javascript ed incollatelo nel corpo dell'elemento

image

Quindi Salva e posizionatelo in alto dove sta di solito la Barra dei Menù

image

Adesso non resta che Salvare e Visualizzare il blog.

Nel vostro blog resterà una Bozza non pubblicata che si riferisce a questo post di escamotage che abbiamo creato

image

Cliccate su Elimina e quando vi si chiede se eliminare anche le immagini mantenetele altrimenti vi scomparirà tutta la vostra Barra.



image

 






6 commenti :

  1. urcaaa... IO ho fatto molto piu semplicemente ma non con bottoni cosi accurati :)

    RispondiElimina
  2. E non si puo per ogni bottone creare una scaletta a comparsa sotto ogni qual volta ci si passa sopra con il mouse? del tipo passi su home e a discesa si apre un sottomenu per intenderci con scritto per esempio che ne so, chi sono, informazioni sul sito ecc.. dei "sottobottoni" se mi permetti il termine. :-)

    RispondiElimina
  3. @Il Principino
    Certo che si può fare ma devi passare a Wordpress e lavorare con i fogli di stile. In questo blog mi occupo di Blogger e do dei consigli a chi sta facendo i primi passi. A questo livello la barra dei menù che ho presentato è il massimo che si può fare senza toccare i fogli di stile. Vedo però che nel tuo sito la Barra dei Menù era probabilmente già presente nel modello
    Ciao

    RispondiElimina
  4. Ciao Parsifal mi serve come sempre il tuo aiuto(una novità direi... ;-) ) Come posso mettere gli adsense sotto la mia barra dei menu? io ho una barra già presente nel mio template...
    Thanks!!!
    Astasia

    RispondiElimina
  5. @Astasia
    Guardando il layout del tuo blog puoi inserire un gruppo di annunci leaderboard andando in Layout > Aggiungi gadget > HTML e inserendo il codice Adsense quindi posizionando l'elemento sotto al menù.
    Potresti inserire invece che gli annunci gli insiemi di link, ti assicuro per esperienza che sotto al menù sono molto redditizi.
    Non c'è da fare nessun passaggio con lo strumento Parse.
    Spero di essere stato chiaro ed esauriente.
    Ciao

    RispondiElimina
  6. Grazie Parsifal ci sono riuscita...si vede che ieri sera il caldo mi ha confuso... ;-)
    Solo che vorrei avvicinarli un po' di più al menu sopra...ora ci provo...
    Ciao e grazie!
    Astasia

    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.