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

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

    

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

Con lo Strumento Sposta posizionatelo adeguatamente nel posto desiderato

   

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

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

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

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

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

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

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