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

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

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

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 

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.