Come Caricare uno Sfondo sul Blog + Come Usare una Nostra Foto come Background {guest post 2/2 by Lisa di Mamè Handmade}



Continua l’appuntamento settimanale con il

L’argomento del giorno è il background del blog, ovvero quell’immagine di sfondo che appare intorno al corpo centrale {post+colonne laterali} della nostra pagina. Il mio consiglio è “non fatevi rubare la scena da colori troppo accesi e chiassosi che possono distrarre gli occhi del lettore dai vostri contenuti.”


Dopo qualche test iniziale qui su C’è Crisi, io ho optato per uno sfondo total white che non si distingue dal resto dei gadget, niente divisori e niente box dai contorni colorati. Come si dice ? Ah, si ‘Less is More’  ma questa è solo una scelta personale.













Come Usare una tua Foto come Sfondo


Avete una vostra foto e pensate che sia perfetta per lo sfondo del vostro blog? Bene vediamo come possiamo utilizzarla.

Il primo passo da fare è quello di definire le dimensioni che la nostra immagine dovrà avere.

Se vogliamo utilizzare un’immagine a tutto sfondo questa dovrà avere le seguenti dimensione: 2000px(pixel) di larghezza e almeno 1000px di altezza, così facendo garantiremo la perfetta visualizzazione anche su pc che hanno una risoluzione molto alta. In realtà l’altezza non fa molta differenza perché come vedremo in seguito possiamo ripeterla in orizzontale anche più volte.

Sia chiaro: nel caso in cui l’immagine presenta una larghezza minore dei canonici 2000px non accade nulla di pericoloso, semplicemente il visitatore che utilizza una risoluzione video molto alta non la vedrà perfettamente.


Sarebbe bene valorizzare la nostra immagine e quindi correggere la luminosità, il contrasto e il colore con un’applicazione specifica, in questo modo la nostra immagine risulterà bella e più accattivante. Per ridimensionare la nostra immagine possiamo usare l’applicazione che più ci piace da Photoshop a PicMonkey, in rete troviamo diversi software gratuiti che ci permettono di farlo.




Scegliamo un formato abbastanza leggero come il formato .gif o .jpg hanno un peso minore e pertanto si caricano più velocemente.


Se invece si tratta di un pattern, cioè di un’immagine di dimensioni molto ridotte ad esempio di 100px per 100px, sarà necessario fare in modo che questa venga ripetuta in orizzontale e in verticale. In seguito vedremo come mettere in pratica tutte queste operazioni.



Una volta scelta l’immagine da utilizzare come Background, andiamo su un sito di hosting (PhotoBucket, Flickr, Image Shack, Tynipic, ecc) carichiamo la nostra immagine e copiamo il link diretto. Adesso non ci rimane che caricare la nostra immagine sul blog.




Caricare uno Sfondo sul nostro Blog


In uno dei siti segnalati avete trovato lo sfondo che fa per voi e adesso cosa dobbiamo fare? Dobbiamo salvarlo sul nostro pc e caricarlo su Blogger!

Avrete notato che molti siti permettono l’installazione diretta attraverso i widget/gadget, io sinceramente vi sconsiglio di farlo poiché avere inutili widget rende la nostra pagina troppo pesante e col tempo rischia di far fatica a caricarsi, per questo motivo vi mostrerò come caricare l’immagine scelta via codice HTML. Tranquille non andate in panico è molto più semplice di quanto si possa immaginare!


1. Selezioniamo l’immagine che ci interessa e salviamola sul nostro PC.

Tutorial sfondo


Alcuni siti, come ad esempio Background Lab, permetto il download diretto

Tutorial sfondo, background, come caricare uno sfondo sul blog, tutorial blogger


2. Attraverso un sito di hosting come PhotoBucket, Flickr, Image Shack, Tynipic, ecc. pubblichiamo la nostra immagine e ne copiamo il link diretto

Link diretto immagine, tutorial blogger, sfondo, background, come caricare uno sfondo sul blog,


3. Adesso andiamo su Blogger e dal nostro menù scegliamo la cartella MODELLO. Da qui selezioniamo il pulsante MODIFICA HTML.



**Prima di compiere questa operazione ricordate di eseguire il Backup del vostro modello! -Tutorial: Come Fare il Backup {Grazie Giodina!}**




Modello -> Modifica HTML

 Modifica Modello Blog, Link diretto immagine, tutorial blogger, background, come caricare uno sfondo sul blog,


4. Nella schermata che compare dovremo ricercare questa porzione di codice

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}




Vi ricordate come cercare una parte di codice? Basta cliccare Ctrl+f direttamente dalla pagina del Modello e cercare body {


**Oppure... leggete dal post di Silvia


 Modifica Modello Blog, Link diretto immagine, tutorial blogger, background, come caricare uno sfondo sul blog,


che andremo a modificare in questo modo


body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

}





La Ripetizione dell’Immagine


Una volta caricata l’immagine sul nostro blog, questa apparirà ripetuta più volte sia in orizzontale che in verticale.

Se volete che la vostra immagine non venga ripetuta aggiungete le seguenti righe di codice

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:no-repeat;

}



Se volete che si ripeta solo orizzontalmente allora aggiungete le seguenti righe di codice

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:repeat-x;

}



Solo in verticale

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:repeat-y;

}



L’immagine caricata verrà visualizzata in alto a sinistra.  

Per centrarla o per spostarla dove ci pare aggiungiamo il seguente codice.

Se vogliamo posizionarla in alto al centro

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:repeat-y;

background-position: center top;

}



Il primo valore indica la posizione orizzontale, mentre il secondo la posizione verticale, così se vorremo posizionare l’immagine in alto a sinistra le righe di codice saranno

background-position: center top;

e così via. Teniamo ben presente che le “parole” da utilizzare sono per la posizione verticale left, right e center (a sinistra, a destra e al centro) mentre per la posizione orizzontale top, bottom, center (in alto, in basso e al centro).


Lo Scorrimento dell’Immagine


Per avere un effetto fisso dell’immagine, e cioè fare in modo che l’immagine si muova con la pagina stessa aggiungete queste righe di codice

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:repeat-y;

background-position: center top;

background-attachment: fixed;

}



Se invece volete che l’immagine non scorra con la pagina aggiungete la seguente riga di codice

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

background-image:url(indirizzo dell'immagine);

background-repeat:repeat-y;

background-position: center top;

background-attachment: scroll;

}



5. A questo punto salviamo le nostre modifiche selezionando il pulsante SALVA MODELLO.


 Modifica Modello Blog, Link diretto immagine, tutorial blogger, background, come caricare uno sfondo sul blog,



Con questo post termina la parte che riguarda il background. Voglio innanzitutto ringraziare Alex per aver accettato la mia collaborazione e soprattutto farle i complimenti per aver avuto questa magnifica idea, al termine sono certa che verrà fuori una grande guida per tutte noi blogger, oserei quasi definirla “la bibbia” del bravo blogger!

Voglio incoraggiarvi a non avere paura a mettere le vostre manine sul codice, l’HTML non è un linguaggio di programmazione ma semplicemente un linguaggio di markup ossia un linguaggio che ci permette di definire la struttura della nostra pagina web, in altre parole è la “lingua” che dobbiamo utilizzare per comunicare con il web, per dirgli come vogliamo strutturare la nostra pagina, così come l’XML (formato nel quale viene salvato il nostro modello blogger) è semplicemente un’estensione dell’HTML che ci permette di creare nuovi elementi da introdurre nella nostra pagina (pensiamo ad esempio ai widget/gadget). 

Provate, provate e riprovate e alla fine riuscirete a prendere confidenza con il codice della vostra pagina e poi una volta effettuato il backup non avete nulla da temere!

Adesso passo a voi la parola, chiedete pure tutto quello che volete, vi risponderò molto volentieri! Alla prossima, Lisa



Per leggere tutti i post riguardanti il blog, visitate la pagina Blogging o usate l’etichetta





**Aggiungi un Banner sul Blog + Crea un Grab my Button **

 

Corso di Blog su C'e' Crisi


Corso di Blog su C'e' Crisi



29 commenti :

  1. Personalmente lo trovo moooolto utile!!! Anche se è da una vita che lavoro con il pc quando mi trovo alle prese con il blog ho sempre paura che qualcosa possa esplodere... GRAZIE INFINITE

    RispondiElimina
    Risposte
    1. Ciao Letizia, ecco perche' nel corso consigliamo di aprire un blog per fare i test e comunque di fare il backupd del blog. alla fine, se non sei soddisfatta o non ti piace come si sposa il tutto, puoi sempre tornare al template/background precedente...

      Ma sei una maestra d'asilo? Che bel lavoro! Sei davvero fortunata!!! Alex

      Elimina
  2. Eccomi! Letto ma da rileggere sicuramente con attenzione!....se c'è qualche anima pia che può spiegarmi questo problema che mi si è presentato al blog: praticamente la striscia centrale del blog si muove, balla!! e vedo così anche i vostri blog!....avete qualche idea su come risolvere questo problemino??
    Grazie, ciao Alex!

    RispondiElimina
    Risposte
    1. Ciao Gio, per striscia centrale intendi la colonna centrale dove appaiono i post? Stai ancora usando Google Crome o sei tornata al browser precedente?

      Elimina
    2. Alex, sto usando Google Crome perchè con Explorer non vedo le icone dei follower....ora però mi balla la colonna dei post...quando entro nei vostri blog invece è la colonna dei gadgets a muoversi.....mah!

      Elimina
    3. Davvero Gio, vorrei aiutarti ma non so cosa consigliarti se non pulire cache e cookies perche' dipende dal browser senza dubbio. Lo hai fatto dopo che te l'ho detto la settimana scorsa?

      Bacioni, Alex

      Elimina
    4. Grazie Alex, gentilissima! Baci baci!
      Gio

      Elimina
  3. Grazie per questo bel lavoro!

    RispondiElimina
    Risposte
    1. Grazie a te, Gemma! Mi raccomando, facci sapere se e quando cambierai sfondo che veniamo a farti i complimenti!!

      Elimina
  4. Un altro post utilissimo!!! Grazie a Mamè e ad Alex!!!

    Tra l'altro, per chi avesse timore a metter mano all'HTML, da alcuni giorni Blogger ha cambiato l'interfaccia della Modifica HTML del Modello ed ora è più semplice trovare le righe di codice e le varie parti, in quanto tutte le righe sono numerate sulla sinistra e all'interno i codici sono di colori diversi!

    Buona giornata a tutte!

    RispondiElimina
    Risposte
    1. Ottimo consiglio Emanuela! Verissimo, Blogger sta migliorando molto l'utilizzo dell'interfaccia HTML, adesso c'è anche un menu completo con tutti i widget presenti sulla nostra pagina, lo trovo molto molto più usabile così.

      Elimina
    2. Grazie per averlo menzionato Emanuela. Io per un attimo ho temuto che le istruzioni non valessero' piu' con il nuovo codice del template perche' facendo dei test per altre cose l'altro giorno, Blogger mi dava un errore.

      Quindi prima di postare ieri ho fatto una verifica che e' stata seguita da un sospiro di sollievo.

      Oggi ho lavorato al codice per modificare tutti i divider nelle barre laterali e la ricerca per widget e' davvero molto ma molto utile!! Buon lavoro a tutte! Alex

      Elimina
  5. Si, sono insegnante di scuola dell'infanzia dal 2000, prima facevo la "copistara", cioè avevo una copisteria. Ho lavorato per 7 anni con il sostegno e ora sono sulla sezione. Mi piace molto il mio lavoro ma non ne parlo molto sul blog perché per ora preferisco tenere separate le due cose, è una specie di angolino privato che non tollera molte invasioni, per ora...
    Ciao, un abbraccio

    RispondiElimina
    Risposte
    1. Ok, ho capito, grazie mille per la spiegazione. Spero comunque che un giorno proporrai anche qualche lavoretto per bambini, magari cosette che fai in classe coi tuoi bimbi. Sarebbe interessante...

      Sei davvero fortunata a fare un lavoro che ami!
      Baciotti, Alex

      Elimina
  6. Ancora una volta grazie a te Alex.
    Se avete domande e dubbi non abbiate timore, condividete tutti i vostri pensieri cercherò di aiutarvi molto volentieri.
    P.S. Alex anche se negli ultimi tempi sono molto assente continuo a lavorare per te ;).
    Un abbraccio

    RispondiElimina
    Risposte
    1. Ciao Lisa, grazie a te per questi magnifici post. Lo so che non e' affatto facile fare dei tutorial tecnici come quest'ultimo... Non ti preoccupare e prenditi il tuo tempo per il prossimo post.

      Ti mando un bacione, Alex

      Elimina
  7. ciao, volevamo invitarti al nostro primo CONTEST: IL MONDO [VISTA] BAMBINO 11.04.2013 - 12.05.2013. Trovi tutte le info nel link. emanuela&cristina

    http://laboratorioprogettincorso.blogspot.it/2013/04/1-contest-il-mondo-vista-bambino.html

    RispondiElimina
    Risposte
    1. Care emanuela&cristina, grazie per essere passate! parteciperei volentieri me non sono mamma. pero' passo le info del corso alle amiche mamme e alle mie lettrici, che ne pensate?

      Deal? alex

      Elimina
  8. Meravigliosi i bunmerini e preziosissimi i vostri consigli!!!!!!!bacioni ea

    RispondiElimina
  9. Adoro questi post! Per chi come me è alle prime armi è veramente un grande aiuto!
    Se ti va partecipa anche tu al mio favoloso giveaway del valore di 160 euro! Tia aspetto da me con tutte le recensione degli eventi più importanti del Fuori Salone!
    xoxo M
    www.fashionspiesmg.blogspot.it

    RispondiElimina
    Risposte
    1. Ciao Martina, grazie per il tuo commento e per l'invito. alex

      Elimina
  10. Trovo il tuo blog molto molto interessante ti seguo con piacere se ti va passa a trovarmi butterflywing2012.blogspot.it

    RispondiElimina
  11. Uff, di solito non ho problemi a seguire i tuoi tutorial, ma questa volta proprio non trovo il codice html da andare a modificare nel modello del mio blog...davvero non capisco perché...
    sembra non esserci nulla che abbia a che fare con il background!!

    RispondiElimina
  12. Credo che abbiano cambiato le impostazioni html di blogger perchè non trovo quel codice. Vorrei inserire una immagine di personalizzazione ma non riesco. Qualche consiglio?
    Grazie mille!

    RispondiElimina
    Risposte
    1. mi trovo anche io in questa situazione :( ho provato a usare il codice html allo stesso modo in cui tu hai utilizzato il css ma non lo prende :( mi dà errore...come si può risolvere?
      Grazie

      Elimina
  13. Help, Help non so cosa sia successo ma mi è sparito lo sfodo, ho fatto ripristina modello salvato ma e' uguale
    Ho tentato di rimettere il codice ma niente, sono andata in modifica HTLM ma non ho nemmeno body (ho solo 10 codici e non body)
    Cosa puo' essere successo?

    RispondiElimina
  14. Ciao Alex, sono Giulia. Ho seguito la guida passo passo, ma lo sfondo non cambia neanche di una virgolina. Rimane identico, e anche con la favicon ho porblemi perché ho si vede la B di blogger arancione oppure una vecchia che avevo messo, come è possibile? Questo è il blog che ho creato l'altroieri, e vorrei migliorarlo. Ne ha bisogno povero... http://www.avtumnaddicted.blogspot.it/

    RispondiElimina
  15. Ciao Alex, sono Giulia. Ho seguito la guida passo passo, ma lo sfondo non cambia neanche di una virgolina. Rimane identico, e anche con la favicon ho porblemi perché ho si vede la B di blogger arancione oppure una vecchia che avevo messo, come è possibile? Questo è il blog che ho creato l'altroieri, e vorrei migliorarlo. Ne ha bisogno povero... http://www.avtumnaddicted.blogspot.it/

    RispondiElimina