Come inserire uno sfondo personalizzato in un template realizzato con il Designer Modelli di Blogger.

Da qualche settimana è possibile creare dei modelli personalizzati per Blogger con il Designer Modelli. Le personalizzazioni sono  moltissime e abbiamo già visto come fare per creare il nostro modello. Riepilogo sinteticamente i vari passaggi

1. Creare un nuovo blog che terremo come prova prima di inserirne il modello in quello effettivo nel momento in cui saremo soddisfatti della sua efficacia. All'inizio selezionare un modello qualsiasi di Blogger
2. Scrivere qualche post di prova e qualche commento
3. Andare in Blogger in Draft e successivamente in Layout > Designer Modelli 
4. Scegliere il modello che ci piace di più e cliccare su Applica al blog
5. Tornare in Designer Modelli > Sfondo e scegliere una delle tante immagini di sfondo che sono a disposizione

 

Ce ne sono tantissime suddivise in categorie (astratte, arti, affari, intrattenimento, famiglia, cibo, hobby, scienze, tecnologie, shopping, viaggi, ecc.). In questo caso si clicca su Completato quindi Applica al blog.

Poniamo il caso di non essere soddisfatti delle opzioni offerte perché abbiamo un blog molto caratterizzato che ha bisogno di un background assolutamente particolare.

Bisogna andare su Layout > Modifica HTML e cercare una stringa che inizi in questo modo (si clicca su F3 o su Ctrl+F)

url(http://themes.googleusercontent.com/image

Dovremo visualizzare un codice molto simile a questo

<Variable name="keycolor" description="Main Color" type="color" default="#1a222a" value="#ff9900"/>
   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#000000 url(http://themes.googleusercontent.com/image?id=1RFhOXkVdlgTm33xlRRI9sUI7PEwPDeYWj20s_Cge3ml2XD8Wv0Jw4UEUgPtLpNB21c-s) no-repeat fixed top center /

come mostrato nel seguente screenshot

Copiate l'URL dell'immagine di sfondo del template evidenziata di rosso. Incollatelo nel browser e scaricatela con il destro del mouse tanto per conoscere le sue dimensioni. In genere si tratta di immagini molto grosse di 1800 pixel di larghezza. Dovrete quindi sostituirla con una foto di grandezza simile.

Per il ridimensionamento vi potete far aiutare da un programma come Paint.NET. L'immagine dovrà essere caricata su un hosting gratuito e affidabile come Skydrive quindi ne dovrà essere acquisito l'URL.

L'indirizzo dell'immagine dovrà quindi essere sostituito a quello simile a quello evidenziato di rosso nel blocco di codice precedente. Avremo quindi un codice simile al seguente dove la parte evidenziata di rosso è il nuovo URL dello sfondo

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#000000 url(http://sjmrhg.blu.livefilestore.com/y1pF7XFYgtK0-dE_qJ3Gey5TNdDyo9I_Cuu5ZjUyp0YQ8Fo0tjHCEI14vN0ameq6c_NwH2D2BHIdsQa5us9hn4LyfIyEUbsEIS0/blue_moon-1704x862.jpg) no-repeat fixed top center

Non resta che salvare il modello. Per testare questa funzionalità ho utilizzato questa immagine che ho messo come sfondo a questo blog.