Pubblicato il 10/06/13e aggiornato il

Come creare una intestazione (o header) per Blogger.

Tutorial su come creare una intestazione per Blogger senza conoscere nessun programma di grafica ma utilizzando i tool online Pixlr e PicMonkey.
Hai creato un blog ma non sei esperto di grafica? Non ti preoccupare perché non sei il solo. La personalizzazione del layout di un sito per chi non maneggia alla perfezione Photoshop o Gimp può diventare una impresa ardua piena di frustrazioni. Fortunatamente ci sono in rete delle applicazioni che qualche anno fa si sarebbero chiamate web2.0 in grado di svolgere i principali compiti dei grafici. In questo articolo vediamo come sia possibile creare un header sufficientemente sofisticato senza conoscere nulla di programmi di grafica.

Prima di iniziare bisogna andare su Modello > Personalizza > Modifica le larghezze per vedere quanto debba essere larga l'immagine che vogliamo mettere come intestazione. Questo per i template che hanno l'header che prende tutto lo spazio, per gli altri modelli dovremo calcolare la larghezza in altro modo oppure procedere per tentativi.

larghezza-blog

Utilizziamo il tool PicMonkey che sembra fatto proprio a posta per la realizzazione delle intestazioni. Non occorre registrarsi per poterlo usare anche se si può fare se abbiamo intenzione di salvare il lavoro svolto. Per iniziare si clicca su Edit a Photo oppure vi si trascina una qualsiasi immagine con il mouse che abbia le dimensioni giuste della intestazione. Se proprio non riuscite a trovarla andate su Pixlr (vai a Pixlr Editor), caricate una foto qualsiasi quindi scegliete Immagine > Dimensione immagine e inserite il valore della larghezza. Togliete la spunta a Mantieni proporzioni e andate su OK. L'immagine sarà probabilmente distorta ma avrà le dimensioni giuste. Per l'altezza regolatevi come vi pare ma una scelta di 200-300 pixel è appropriata. Si va su File > Salva e si scarica l'immagine così modificata. Caricatela  su PicMonkey andando come illustrato su Edit a Photo

pic-monkey[6]

Fatto questo si va quindi sulla quinta opzione dei tool posti sulla colonna di sinistra denominata Overlays. Selezionate Geometric e trascinate il rettangolo nero sulla vostra foto 

trascinare-rettangolo-mouse

Adesso modificate il rettangolo nero e fatelo diventare bianco utilizzando la tavolozza di colori

header-pic-monkey

Trascinate le maniglie del rettangolo fino a coprire tutta l'immagine che diventerà quindi completamente bianca. Per selezionare il bianco dalla tavolozza si deve cliccare nel punto più in alto a sinistra e si deve visualizzare il codice ffffff come mostrato nello screenshot. Dopo aver creato lo sfondo per l'header torniamo nei tool della colonna di sinistra per inserire per esempio il testo andando sul tasto P. Potranno essere gratuitamente inseriti solo i caratteri con i font senza la coroncina perché per quelli bisogna fare l'upgrade alla versione Royal a pagamento

picmonkey-testo

Dopo aver selezionato il tipo di font dobbiamo sceglierne il suo colore dalla tavolozza, le sue dimensioni e l'allineamento che può essere a sinistra, a destra o centrato.

header-pic-monkey[5]





Sempre con i tool posti sulla sinistra possiamo ritagliare, ridimensionare, ruotare e modificare i colori. Si possono inoltre inserire texture, effetti e molto altro. Su Overlay si possono aggiungere nella intestazione figure geometriche, cuori, stelle, icone divertenti, fiori, uccelli, nastri, bottoni, angoli, ecc. Selezionando l'icona della zucca di Halloween si può attingere a oggetti grafici che riguardano zombie, vampiri, streghe, insomma tutta l'iconografia di quella festa.

Quando riteniamo che il nostro lavoro sia finito andiamo in alto su Save per scaricare l'immagine. Conviene sempre scegliere il formato PNG al posto di JPG per avere immagini di migliore qualità. Può essere necessario rinominare la foto come nomefoto.png per poter fare il download. Per caricare l'immagine sul nostro sito dobbiamo andare su Layout > Intestazione > Modifica

inserire-header-blogger

per poi scegliere il file dal computer con Posizionamento al posto di titolo e descrizione

come-inserire-header-blog

Si completa cliccando su Salva per poi vedere la nostra Intestazione online. Nel caso in cui non aveste calcolato bene le dimensioni niente paura. Ritornate su Pixlr > Apri una immagine dal computer > Immagine > Dimensione immagine e modificate la larghezza, l'altezza o tutte e due insieme.





29 commenti :

  1. Ciao ernesto, scusami se ti chiedo cose sempre sulla categoria sbagliata.
    Ti vorrei chiedere un favore enorme.
    io nel mio blog, ho un modello personalizzato e nella home fa vedere i post con una descrizione e se si vuole vedere tutto il post bisogna cliccare read more.
    Il problema è che la descrizione iniziale è troppo lunga si potrebbe limitare le parole?
    grazie mille

    RispondiElimina
    Risposte
    1. @# Hai un read more automatico. Si potrebbe fare ma solo l'autore del modello sa dove andare a trovare il codice. Prova a contattarlo oppure a leggere la descrizione del modello. Potrebbero già esserci le istruzioni.

      Elimina
  2. quindi dici che anche per cambiare colore delle parole o cambiare lo sfondo devo contattare il creatore?

    RispondiElimina
    Risposte
    1. @# Per cambiare il colore del testo devi andare su Modello > Personalizza Avanzato e effettuare i cambiamenti. Prima però salva il modello. Alternativamente puoi trovare i color:#......; presenti nel template e modificare i colori da lì soprattutto nel blocco
      body {

      Elimina
    2. Grazie mille, ci sono riuscito attraverso le modifiche al template perchè quello su modello > personalizza > avanzato i cambiamenti non si vedevano.

      Ho solo un'ultima cosa, io ho impostato un immagine come sfondo solo che in larghezza si ridimensiona da sola ma in altezza no e così appena finisce lo sfondo in basso si vede un nero.
      Come si può fare?

      la parte dove modifico lo sfondo è questo:
      http://pastiebin.com/51b6444244be6

      di solito con un height 100% ; wheigt: 100% si risolve.. ma qui non so dove metterlo.

      Grazie mille in anticipo

      Elimina
    3. @# Prova a aumentare le dimensioni del wallpaper
      http://it.wallpaperswiki.org/wallpapers/2012/11/Sfondi-astrazione-strisce-linee-Azzurro-Blu-Scuro-1800x2880.jpg
      con un programma di grafica o con Pixlr
      http://pixlr.com/editor/
      fino a che non copre tutto lo sfondo

      Elimina
    4. come faccio a aumentare la lunghezza con pixrl? grazie

      Elimina
    5. e un' altra cosa, non si può fare in modo che si adatti da solo?

      Elimina
    6. @# Vai su Apri una immagine dal computer > Immagine > Dimensione immagine e imposti i valori

      Elimina
    7. grazie mille, l ultimo problema è che non so dove caricare l immagine in modo che restino le dimensioni reali, su picasa me lo rimpicciolisce.

      Elimina
    8. @# Per risolvere il problema con le dimensioni di Picasa leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      ricordando che per esempio questa immagine
      https://lh6.googleusercontent.com/-RHvPZIryhgw/UIabYasWDAI/AAAAAAAAbkY/u5CG_BUkRoo/s1024/natura3.jpg
      è larga 1024 pixel. Per modificare la dimensione basterebbe mettere s2048 e diventerebbe di 2048 pixel

      Elimina
    9. proprio non riesco :( non so come fare.

      Elimina
  3. Grazie Ernesto della segnalazione di questo utile strumento.
    Personalmente uso Pixlr, ma ora provo anche questo.
    Saluti,
    Jan

    RispondiElimina
  4. Grazie Ernesto! Sei davvero un mito!!
    Io ho fatto gran parte dei miei "lavoretti" grafici con Paint.net, ma questo è davvero veloce, intuitivo e con mille funzioni!!! :))

    RispondiElimina
  5. Ciao Ernesto, stavo cercando un metodo per creare un header che non occupi lo spazio intero a lui dedicato.
    Cerco di spiegarmi meglio possibile: vorrei che il mio header (solo il logo) stesse a sinistra e sia un piccolo quadrato, mentre subito a destra (e non sotto) appaiano i post che pubblico.

    Non posso inviarti link cliccabili altrimenti sarebbe stato più facile farmi comprendere con un esempio che ho trovato sul web: si tratta di un layout già pronto, che però io non voglio usare, per non perdere tutte le impostazioni che, grazie a te, funzionano alla perfezione nel mio blog.

    Chissà se tu hai in mente qualche codice magico che anche stavolta mi aiuti... :D

    RispondiElimina
    Risposte
    1. Gli ho visti anch'io o modelli che hanno l'header nella sidebar di sinistra. Però bisognerebbe usare quel modello. Inserire quella personalizzazione mi sembra difficile.
      P. S. Puoi incollare tranquillamente gli URL così vedo a cosa ti riferisci di preciso
      @#

      Elimina
    2. Ecco qui: http://blog.puglypixel.com/2012/04/13/freebie-lemon-meringue-v-2/

      Elimina
    3. A dir la verità io avevo capito un'altra cosa. Qui l'header è al posto giusto al centro del blog e non in una sidebar. E' più piccolo del dovuto ma è stato centrato. Lo puoi fare facilmente anche tu. Carichi un header di dimensioni più piccole della larghezza del layout e poi lo centri con una di queste modalità
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html
      @#

      Elimina
    4. FERMI TUTTI :D
      Stiamo parlando della stessa cosa?
      Non devi guardare il blog ospitante...ma il layout, il freebie messo a disposizione dal puglypixel.

      Mi riferivo a quell'header che è tutto a sinistra e accanto, parte subito l'ultimo articolo pubblicato.
      :-P

      Elimina
    5. Non ci avevo fatto caso che era una recensione di un modello :)
      Dalle immagini credevo fosse piccola pasticceria casalinga :)
      Una personalizzazione del genere credo sia al di sopra delle mie capacità :(
      @#

      Elimina
    6. Non ti preoccupare Ernesto..è colpa mia che ogni tanto (un po' troppo spesso) mi incaponisco su layout che mi piacciono ma non ho la capacità di realizzare :D
      Prendila come un pour-parler... :-P

      Elimina
  6. Ciao :) volevo chiederti un'informazione riguardante l'header.. nel mio blog ho un problema, quando rimpicciolisco la pagina l'header e il gadget appena sotto si spostano verso destra non rimanendo allineati con il resto del contenuto. Ho provato in diversi modi (come position: fixed nei codici css) ma non riesco a farli stare fermi e così ho pensato di chiedere a te :S

    RispondiElimina
    Risposte
    1. Purtroppo non sono un mago ...
      @#

      Elimina
    2. Beh sì era solo per chiedere se per caso ti era capitato un caso simile (: grazie comunque per la tua risposta

      Elimina
  7. Grazie, articolo interessante. Sapresti dirmi come fare per rendere cliccabile l'immagine dell'intestazione? Vorrei che puntasse alla homepage...

    RispondiElimina
    Risposte
    1. Domanda strana perché l'immagine della intestazione è sempre cliccabile e manda alla home page del blog. Se hai un sito su Blogger e non c'è questo collegamento forse perché lo hai scaricato da internet. Onestamente non so aiutarti perché dipende dal codice che ha usato il creatore del template. Intuitivamente potresti procedere così:
      1) Salvare il modello
      2) Andare su modello > Modifica HTML
      3) Cliccare con il destro del mouse sull'immagine dell'header e selezionare Copia URL Immagine
      4) Cercare l'URL della immagine nel codice con Ctrl+F
      5) Aggiungere alla immagine il collegamento alla homepage con questa sintassi
      <a href='URL_HOMEPAGE_BLOG'><img src='URL_HEADER'/></a>
      Salvi il modello
      @#

      Elimina
    2. Vorrei tenere sia il testo che l'immagine di sfondo, ed in quel modo non e' cliccabile. Il blog e' il seguente (l'immagine e' provvisoria):
      www . mangiodasola . com

      Elimina
    3. Ho provato a cercare l'url dell'immagine facendo ctrl+f, ma non la trova :(

      Elimina

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.