Pubblicato il 01/06/12e aggiornato il

Come creare un template personalizzato con il Designer Modelli.

Tutti i passaggi per creare un modello personalizzato con lo strumento del Designer Modelli di Blogger.
Molti utenti di Blogger cercano il loro modello ideale nei tanti siti dedicati a questo argomento. Ho anche fatto un elenco dei portali più importanti in cui navigare per trovare template gratuiti per Blogger. La scelta di scaricare da internet un modello per poi usarlo per il nostro blog ha dei vantaggi ma anche delle controindicazioni. Il vantaggio è essenzialmente uno ed è quello di avere un modello che può essere utilizzato quasi immediatamente e ha i crismi di una certa originalità.

Tra gli svantaggi ricordo che innanzitutto molti template devono essere configurati nel senso che talvolta occorre aggiungere l'URL del nostro account su FeedBurner, l'indirizzo delle pagine statiche o adattare qualche widget alle nostre esigenze. I problemi principali però subentrano quando si vuole ulteriormente personalizzare tali modelli. Tutti i widget e i tutorial presentati in questo blog come in molti altri siti che trattano lo stesso tema sono tutti rivolti ai modelli ufficiali di Blogger e non è assolutamente detto che funzionino con template creati da un web designer che ha usato particolari librerie javascript o ha utilizzato dei CSS che non corrispondono a quelli dei modelli di Blogger.

Quindi quando e se si decide di utilizzare un modello scaricato da internet bisogna tenere a mente che detto template deve andar bene per il nostro sito senza particolari modifiche che non siano quelle per esempio dell'inserimento di bottoni o dei banner pubblicitari. Ricevo molte richieste su come personalizzare modelli installati con questa procedura e a tutti rispondo nello stesso modo. Li invito per qualsiasi aiuto a rivolgersi al creatore del template.


COME CREARE UN TEMPLATE CON IL DESIGNER MODELLI

Quando si vuole cambiare template e non si trova su internet un modello che risponda in pieno a tutte le caratteristiche che desideriamo, è consigliabile usare il Designer Modelli di Blogger che permette di personalizzarlo in modo pressoché totale e non compromette eventuali modifiche future. Inoltre in questa scelta non è di secondaria importanza che tutte le nuove funzionalità che via via vengono introdotte dal Team di Blogger, funzioneranno molto meglio nei modelli ufficiali rispetto a quelli creati da web designer in cui alcune novità non potranno neppure essere inserite. Mi riferisco per esempio ai commenti nidificati che tanti problemi stanno provocando a molti utenti di Blogger.
Se quindi si decide di creare un modello con gli strumenti di Blogger, per prima cosa è opportuno creare un blog di prova in cui testarne il suo funzionamento.

SCELTA DEL MODELLO

All'atto della creazione di un blog occorre selezionare un template tra quelli proposti. Lasciando perdere quelli a Visualizzazione Dinamica che fanno storia a sé, la scelta del template deve essere tale da essere il più vicino possibile alla nostra idea di modello. Se già abbiamo in animo di inserire dei widget particolari che funzionano con dei javascript, è opportuno testare da subito se tale modello è compatibile con quel menù o con quello slideshow. I template a disposizione sono molti e sono suddivisi in varie categorie: Semplice (7 modelli), Finestra immagine (3 modelli), Fantastico (6 modelli), Filigrana (4 modelli), Etereo (3 modelli) e Viaggi (4 modelli). 

SCELTA DEL LAYOUT

Da alcuni commenti che ho ricevuto mi sono accorto che in molti non sanno ancora che si può personalizzare il layout del blog in funzione delle nostre esigenze. Andando su Personalizza > Layout possiamo selezionare lo stile che vogliamo applicare al nostro blog

layout-corpo-footer-blogger

C'è la sezione Layout corpo e quella Layout piè di pagina. Nella prima possiamo scegliere se creare un blog a una sola colonna, con due colonne, con tre colonne o con quattro colonne. Da notare che le colonne possono essere posizionate a destra o a sinistra come si evince dallo screenshot precedente.

Su Layout piè di pagina si può scegliere se avere nel footer una sola colonna, due colonne o tre colonne. Dopo che si sono selezionate le due opzioni, si clicca su Applica al blog. Quando si sceglie un nuovo layout contestualmente muterà l'aspetto del Design degli elementi pagina che sono visibili in basso. Ricordarsi però che le modifiche saranno effettive solo quando si cliccherà su Applica al blog.

SCELTA DELLE DIMENSIONI DEL BLOG

Anche questo aspetto è fondamentale e deve essere risolto prima di procedere con le altre personalizzazioni. Incidere sulle dimensioni del blog tramite il Designer Modelli può infatti provocare un azzeramento delle personalizzazioni che sono state già inserite. Nel caso in cui fossimo costretti a modificare le dimensioni del layout quando il modello è già pronto, è opportuno farlo solo intervenendo sull'HTML come illustrato nel post sulla modifica delle larghezze.

Quando siamo ancora in fase di progetto del template, per le dimensioni dei vari elementi si va su Personalizza > Modifica le larghezze. Si visualizzeranno dei cursori che ci permetteranno di scegliere le larghezze più opportune per il blog

larghezze-blog-su-blogger

In basso si vedrà con una anteprima in tempo reale su come muterà l'aspetto del nostro sito. Se si sono scelte tre o quattro colonne il cursore servirà anche per ripartire la larghezza tra due colonne adiacenti. Anche in questo caso si va su Applica al blog per rendere le modifiche effettive.

Tutte le volte che in futuro si opereranno delle modifiche con questi strumenti si rischierà sempre di perdere qualche personalizzazione. E' quindi opportuno programmare bene queste cose all'inizio e se proprio dovessimo intervenire quando il blog è già pronto ricordarsi sempre di salvare una copia di backup prima di procedere con delle modifiche tramite questi tool.

SFONDO E IMMAGINE DI SFONDO

Personalmente amo gli sfondi bianchi e non mi piacciono particolarmente le immagini di background però mi rendo conto di essere sicuramente in minoranza. Per configurare anche questa opzione bisogna sempre andare su Personalizza > Sfondo dove saranno visibili i colori consigliati per il nostro blog. Nei temi consigliati c'è il colore del tema principale e i colori secondari che si riferiscono ai vari elementi come widget, link, colore del testo ecc

sfondo-blog-blogger

Andando sulla freccia verticale in Colore tema principale, si apre una tavolozza di colori in cui si può scegliere quello che più ci piace. Successivamente nella scheda Avanzato potranno essere selezionati i colori di tutti gli elementi anche inserendo i codici dei colori in forma esadecimale.

Per inserire una immagine di sfondo si clicca sulla freccia verticale e si può sceglierne una delle innumerevoli a disposizione suddivise in varie categorie: Arte, Affari, Ricorrenze, Svago, Famiglia, Cibi e Bevande, Salute e Bellezza, Artigianato e Hobbistica, Casa e Giardino, Natura, Motivi, Svaghi, Scienze, Shopping, Tecnologia, Trame, Trasparenze, Viaggi. Si può anche inserire una immagine dal computer andando su Carica Immagine 

caricare-immagine-blogger

Si può scegliere una immagine nei formati JPG, GIF o PNG con peso massimo di 300KB. Se si opta per una immagine che deve occupare tutto lo sfondo, questa deve avere delle dimensioni minime di 1800x1600 pixel. Si può anche caricare una immagine di una "trama" o "texture" o "motivo" che si ripeterà per tutto lo sfondo del blog. I più bravi se la possono creare anche da soli con Photoshop o Gimp. In basso si vedrà l'anteprima delle modifiche introdotte che diventeranno definitive dopo aver cliccato su Completato e su Applica al blog in alto a destra.

PERSONALIZZAZIONE DEGLI ELEMENTI DEL BLOG

Andando su Personalizza > Avanzato possiamo modificare a piacere molti aspetti del nostro modello. Le opzioni variano in qualche misura a seconda del template di base che abbiamo scelto ma gli elementi più importanti sono sempre presenti. Si tratta di queste configurazioni:
  1. Testo pagina: Famiglia di caratteri, Colore del testo, dimensioni del carattere, grassetto e corsivo
  2. Sfondi: Sfondo esterno, Sfondo principale, Sfondo intestazione
  3. Link: Colore link, Colore link visitati e Colore link al passaggio del mouse
  4. Titolo blog: Famiglia di caratteri, Colore del testo, dimensioni del carattere, grassetto e corsivo
  5. Descrizione del blog: Colore della descrizione
  6. Testo schede: Famiglia di caratteri, Colore del testo dimensioni del carattere, grassetto e corsivo, colore selezionato (p.e i colori del menù creato con le pagine statiche)
  7. Sfondo schede: Colore sfondo, Colore selezionato
  8. Titolo post: Carattere, dimensione carattere, grassetto e corsivo
  9. Intestazione data: Colore testo, Colore sfondo
  10. Post più di pagina: Colore testo, Colore sfondo, Colore ombreggiatura
  11. Gadget:  Famiglia di caratteri, Colore del testo, dimensioni del carattere, grassetto e corsivo, colore alternativo (mi sfugge cosa sia…)
  12. Immagini: Colore dello sfondo, Colore del testo e Colore testo della didascalia
  13. Colore accenti: sono le linee di separazione tra corpo del blog e sidebar e si può scegliere il colore della linea e del bordo optando anche per la trasparenza per non visualizzarle
  14. Mobile Button-Color: mi sfugge cosa sia ma dal nome dovrebbe essere un pulsante per passare alla visualizzazioni mobile da quella desktop o viceversa. Se ne può scegliere il colore.
  15. Aggiungi CSS: serve per inserire dei fogli di stile. Si tratta di una alternativa all'incollare del codice sopra alla riga  ]]></b:skin>. Non la consiglio perché capita che il codice sparisca.
Dopo ciascuna modifica si va come al solito su Applica al blog per renderle operative. Quando si sono fatte tutte queste modifiche si passa a installare widget, bottoni di condivisione, numerazione dei commenti e altre personalizzazioni che con un modello ufficiale è più facile che risultino compatibili.




7 commenti :

  1. ogni volta che pubblichi questi post mi fai venir voglia di modificare tutto :D

    RispondiElimina
  2. Sto impazzendo per mettere Adsense dentro l'articolo - come hai tu qui in questo blog - con google panda & affini i miei blog sono stati molto penalizzati, ma o tolgo adsense e tornano su, oppure cambio il cambiabile, sto cercando, ma sono in estrema difficoltà, ho anche cercato dentro al tuo sito, ma non trovo niente che mi soddisfi, ho vecchi template personalizzati, e passare a quelli nuovi per poi personalizzarli, mi pare un lavoro improbo...
    Sono supercombattuto........

    RispondiElimina
  3. Novità in arrivo per le "dinamiche"?

    RispondiElimina
  4. Bel post, molto utile.
    Io mi ricordo che quando ho iniziato il blog ho vagato per giorni e giorni alla ricerca del template ideale, frugando ovunque sul web. Ho cambiato spesso modello, colori, dimensioni, layout, sperimentando ogni nuova possibilità al fine di raggiungere una perfezione ideale che, in fondo, non esiste nemmeno.
    E poi, alla fine di tutto questo, sono tornata indietro alle origini, e ho pescato uno dei modelli base di blogger (quello "semplice") aggiungendo gli elementi che mi servivano grazie ai consigli di questo blog.
    Forse a volte la chiave giusta è proprio quella della semplicità ;)
    Ciao Ernesto!

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Hai fatto la scelta giusta. Se uno poi vuole scegliersi un template scaricato tanto vale che passi a Wordpress, si compra un dominio anche per soli 10 euro l'anno e ha una sacco di plugin.

      Elimina
  5. Ciao Ernesto, sai dirmi se è possibile creare una quarta colonna nel footer? Grazie!

    RispondiElimina
    Risposte
    1. @ sarà b
      cerca nel blog come aggiungere tre colonne nel footer. Poi inserendo una nuova classe con il 4 e adattando le percentuali dovresti farcela

      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.