Google+

Come inserire il menù del blog nell'header

Vi presento il nuovo look estivo del mio blog e con l'occasione un post-tutorial sul programma che ho utilizzato per inserire il menù del blog nell'intestazione o header. 

Nel mio caso le dimensioni sono di 400x1340 per adattarsi alla struttura esistente e non dover apportare ulteriori modifiche al modello del blog. A tal proposito vi segnalo un post di Alex Bonetto di "C'è Crisi, C'è Crisi!" con preziose indicazioni sulle dimensioni e le caratteristiche che un header efficace deve possedere

Per creare l'intestazione ho utilizzato iPiccy, sito online che permette di caricare un'immagine bianca e personalizzarla con testi e stickers (fatemi sapere se vi occorre un tutorial a riguardo!!). In alternativa è possibile utilizzare Picmonkey, Canva.com o altri fotoeditor gratuiti disponibili in rete.

Scelta l'immagine collegarsi a Image Maps, il sito è gratuito e  non richiede identificazione nè password, è in inglese ma le istruzioni sono estremamente intuitive.

Il primo passo è caricare l'immagine scelta per l'intestazione, si può procedere selezionando il documento dal pc (a) o inserendo l'indirizzo url dell'immagine (b). 
Cliccare su "Start Mapping Your Image".



Si aprirà una finestra di caricamento, attendere qualche secondo e cliccare su "Continue to next step".




Cliccare su "Rectangle" per mappare l'immagine e suddividerla in rettangoli per inserire i vari link. 



Comparirà il rettangolo di selezione, individuare l'area da "linkare" (a), inserire il collegamento (b) e cliccare sul tasto "Save". Ripetere l'operazione per mappare gli altri campi dell'immagine.
Nella colonna a destra, deselezionare la voce "Shows text links" per disattivare la didascalia posta sotto l'immagine.



Terminata la fase di mappatura, cliccare su "Get your Code".




Si aprirà una nuova finestra, selezionare il codice per la personalizzazione del blog, in questo caso cliccare su "HTML Code".



Selezionare il codice e copiarlo.



Collegarsi al pannello di comando del blog, cliccare su "Layout" ed incollare il codice in un widget per html da posizionare in alto, dove si trova l'intestazione.
Visualizza anteprima e salva le modifiche. 



Spero di esservi stata utile! 
Buona creatività





20 commenti:

  1. Grazie Marica, il post è molto interessante e chiaro anche per quelle che, come me, restano sempre principianti!

    RispondiElimina
    Risposte
    1. ciao Aldina! sono contenta, spero ti sia stato utile
      a presto

      Elimina
  2. alex è un mito :D

    New post: fammi sapere cosa ne pensi :)
    http://chiarainfimoland.blogspot.it/2013/06/cosmofarma-beauty-inspired-by-italy.html

    RispondiElimina
    Risposte
    1. la adoro...è una fonte continua di idee!

      Elimina
    2. Ma che carine che siete, grazie mille ad entrambe, Chaiara e Marica, siete troppo buone! Tu Marica hai fatto un ottimo lavoro con questo post!!! E' da tanto che volevo fare un tutorial su Image-Maps che uso un po' dappertutto sul mio blog.

      Vorrei chiederti se posso inserirlo nella lista degli argomenti del Corso di Blogging direttamente in questa pagina: http://cecrisicecrisi.blogspot.it/2012/08/guida-tecnica-blogger.html e magari parlarne in uno dei miei prossimi articoli.

      Fammisapere se va bene cosi' procedo, ok?

      Salutoni, Alex

      Elimina
    3. Ciao Alex!!! Ma certo mi fa davvero piacere!
      A presto

      Elimina
  3. Ciao Marica, grazie di questo utilissimo post!
    Elisa

    RispondiElimina
  4. Girovagando nella rete sono arrivata fin qui, mi piace molto il tuo blog non ho ancora visto tutto ma tornerò....intanto mi sono iscritta

    Ciao Ciao Laura

    RispondiElimina
  5. Ma che chiarissimo tutorial!!! Bravissima!!
    Ti seguirò con tanto piacere!
    Francesca

    RispondiElimina
  6. Ciao Marica :) grazie per essere passata dal mio blog. Ricambio i complimenti: il tuo blog è davvero interessante e ricco di spunti. Ieri ho dimenticato di lasciare un commento... ti ho scoperta tramite l'iniziativa di Alex e ti seguirò con molto piacere !! A presto
    Barbara

    RispondiElimina
    Risposte
    1. Ciao Barbara!!!!
      quanto è piccola la rete ;) io ti ho scoperta girovagando nel mondo della cosmesi fai da te....
      è un piacere seguirti!

      Elimina
  7. MARICA AIUTO PERPIACERE, HO SEGUITO TUTTI I TUOI PASSAGGI MA QUANDO CLICCO SUI PULSANTI VENDO RIINDIRIZZATA AL SITO DI IMAGE MAP.....HALP MY....

    RispondiElimina
    Risposte
    1. Ciao Alessia, controlla il passaggio (b). Dopo aver selezionato l'immagine devi inserire l'indirizzo URL corrispondente in "Link for this map", sostituendo l'URL predefinito che ti riporta alla home page di Image-Maps.
      Fammi sapere com'è andata..
      a presto

      Elimina
  8. Ciao Marica grazie mille, sei gentilissima , ho trovato l'errore ora però ho un'altro problema non riesco a inserire il widget per html sopra l'intestazione cosa devo fare per togliere l'intestazione? Grazie mille

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

    RispondiElimina
  10. Eccomi Alessia,
    devi scusarmi ma l'ho tolta tempo fa, prima di questo post...
    occorre modificare l'html ma nel commento non lo posso inserire, mandami un'e-mail o lasciami il tuo indirizzo
    a presto

    RispondiElimina
    Risposte
    1. Grazie ti lascio l'indirizzo e-mail alessiaruk@gmail.com. Grazie ancora

      Elimina
    2. Perfetto, ti ho risposto su gmail

      Elimina
  11. Ciao!
    Sono arrivata al tuo blog grazie ad Alex di C'è crisi, c'è crisi e siccome sto rifacendo la grafica del mio blog questo post capita proprio a fagiolo!
    Ho seguito passo per passo le tue istruzioni e sono riuscita a fare la mappatura dell'header.
    Volevo chiederti però un consiglio, ho notato che quando clicco sui link compare un fastidiosissimo rettangolo arancione, cosa che normalmente non si vede (compare solo dopo aver cliccato).
    E' possibile non farlo visualizzare?
    Capisco che sia una finezza visto che è questione di pochi secondi prima che venga caricata la pagina, però proprio non mi piace. :(
    Spero che tu possa aiutarmi, nel frattempo ti ringrazio tanto per avermi insegnato qualcosa di nuovo!
    Ciao
    Simona

    RispondiElimina
  12. ciao cara! ho fatto tutto ciò che ci hai magistralmente spiegato..ma ho un problema =( come faccio a togliere l'intestazione? perchè sennò sul blog si visualizzano sia la testata che che il gadget html , cosi come se ci fossero due testate.....

    RispondiElimina