Pubblicato il 06/04/10 - aggiornato il  | 13 commenti :

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

designer-modelli-blogger

 

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

designer-modelli-2

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.





13 commenti :

  1. Ma non influisce sulla velocità di caricamento del blog?

    RispondiElimina
  2. @max
    sì influisce ma per alcuni blogger questa è una cosa secondaria e preferiscono privilegiare l'aspetto alla velocità di caricamento. In ogni caso avere uno sfondo originale di Blogger o uno personale non è che sia poi una così grande differenza

    RispondiElimina
  3. io ho provato ma non funziona...
    ho messo anche il "no-repeat fixed top center" al posto del "repeat fixed top center"
    consigli?

    RispondiElimina
  4. @Fabri
    Nelle righe finali dell'articolo ci sono due link, uno all'immagine di sfondo e l'altro a un blog di prova che ho realizzato con questa tecnica.
    Come puoi vedere è perfettamente visibile l'immagine di background.
    L'unica spiegazione è che adesso abbiano cambiato qualcosa nelle impostazioni di Blogger e che tale personalizzazione non sia più possibile.

    RispondiElimina
  5. sisi ho visto che nel tuo caso funzionava! sono abbastanza sicuro di non sbagliare nulla...boh

    RispondiElimina
  6. Ciao, ho una richiesta, forse particolare e siccome sei il mio guru, volevo sapere se è possibile realizzarla.

    E' possibile inserire un immagine che si sovrapponga al modello. Si sovvrapponga anche ai contenuti della pagina. Inserirla in un'altezza specifica.

    RispondiElimina
  7. Perche usi molte parole o frasi scritte in grassettelo? Ma in questo modo il tuo sito viene indicizzato meglio?

    RispondiElimina
  8. @Rubel Serve essenzialmente per rendere evidenti i concetti principali dell'articolo. Secondo alcune analisi, mettere parole chiave in grassetto può anche essere utile nel posizionamento ma non ci sono certezze in questo senso.

    RispondiElimina
  9. vorrei inserire uno sfondo particolare in blogger. Ho provato come dici tu, ma mi sa che le regole son cambiate. Mi aiuteresti? :)

    RispondiElimina
    Risposte
    1. @ClaudiaAnnieAmoreVero
      Adesso è tutto molto più semplice. Per prima cosa è opportuno andare su Modello > Backup/Ripristino e salvare il template.
      Poi si va su Modello > Personalizza > Sfondo e si clicca sulla freccetta sulla destra di Immagine Sfondo. Si aprirà una finestra con una miriade di sfondi da selezionare. Se ne vuoi mettere uno tuo personale devi andare su Carica Immagine. Ricordati che in questo caso l'immagine deve essere molto grande (almeno 1800 pixel) e di cliccare su Applica al blog dopo aver visto l'anteprima in basso.

      Elimina
  10. Ciao! ho un piccolo problema, sto creadno questo blog: http://nuovaprovablogcracra.blogspot.it/
    e le mie amiche mi dicono che aprendolo con internet explorer, lo sfonod viene visualizzato spezzato..
    c'è un modo per farsì che si veda bene?

    RispondiElimina
    Risposte
    1. @# L'ho appena aperto con IE10 e non vedo grossi inestetismi. Comunque prova a fare questa modifica
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. Ciao! ho applicato la stringa, ma purtroppo le mie amiche dicono di non trovare nessun miglioramento, e dicono di visualizzare lo sfondo spezzato sia a destra che a sinistra, è possibile che sia un problema del loro pc, o del loro internet? scusa il disturbo! e grazie miller pe i tuoi preziosi consigli! ^-^*

      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.