lunedì 8 settembre 2014

Come inserire uno sfondo personalizzato su Blogger




Da poco ai creato il tuo blog con Blogger e ti sarai chiesto se fosse possibile personalizzare lo sfondo della Home page del tuo blog. Io ti rispondo che è possibile, seguendo la mia guida. E senza perdere tempo iniziamo subito. Per vedere le immagini più grandi basterà cliccarle. Come esempio prenderemo il mio blog. Segui attentamente tutti i passaggi che ti mostro, per applicarli sul tuo blog. 

1) Nell'immagine sotto c'è una freccia che ti indica come scovare il codice URL dello sfondo base. 
Posizionati col mouse sullo sfondo e clicca il tasto destro.
2) Si apre un piccolo menu. Se ai Google Chrome vai in fondo e clicca sulla voce che dice Ispeziona elemento.
3) Sotto si aprirà un menu a barra. Come puoi notare dall'immagine sotto a sinistra, vedrai evidenziato il codice HTML. Ora il tuo sfondo si evidenzia cambiando con un colore in trasparenza. 
Invece sulla destra vedrai apparire il codice URL, che si riferisce sempre allo sfondo principale del tuo blog. Con un click destro del mouse clicca dove dice Copia indirizzo link.
4) Adesso vai nelle impostazioni di Blogger e come buona regola fai un Backup del tuo blog per sicurezza, nella sezione Modello.
5) Clicca su Scarica modello completo.
6) Una volta che avrai salvato il modello, clicca su Modello e Modifica HTML.
7) Poi dalla tua tastiera clicca sul tasto F3. In questo modo si aprirà in alto sulla sinistra nel Browser di Google Chrome una finestra di ricerca. Qui devi incollare il codice URL che avevi copiato prima, passaggio 3).
8) Di solito il codice URL si trova all'inizio del template, se per caso non lo trovi, il mio consiglio e di espandere tutte quelle freccine nere, in modo da liberare eventuali codici nascosti. Segui l'esempio sotto.
9) Come puoi ben vedere abbiamo trovato il codice URL nella riga 75. Ricorda sempre, quando effettui modifiche al Modello in Blogger di annotarti il numero della riga, in questi casi torna utile per non doverlo ricercare nuovamente.
10) Qui dovrai sostituirlo con un altro sfondo URL che ai scelto. Segui bene l'immagine qui sotto e ricorda che deve trovarsi all'interno delle parentesi. Appena lo avrai inserito clicca su Anteprima modello per vedere il cambiamento.
11) Nell'anteprima qui sotto vedi lo sfondo applicato correttamente sul mio blog. Se sei soddisfatto del cambiamento basterà cliccare su Salva modello.
12) Se per caso vuoi che lo sfondo non venga ripetuto in orizzontale e in verticale, mentre si scorrono le pagine, puoi fare in modo che rimanga fisso, grazie a una porzione di codice che dovrai applicare dopo la parentesi di chiusura del codice URL. Per fare questo segui l'esempio sotto aggiungendo questo codice:

background-attachment: fixed;


Risultato:

body{background:#fff url(Inserisci qui URL immagine);background-attachment: fixed;

Nessun commento:

Posta un commento