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.”
Oggi vedremo come trasformare una foto scattata da noi in sfondo e come caricare un background nel nostro modello blog. Al termine del post, una piccola nota ci incoraggia a non temere i codici html.
Come nel caso elencato sotto, sembra complicato ma si tratta solo di aggiungere una riga o due al codice esistente!
I codici non mordono, provare per credere!
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.
**{Tutorial per usarePhotoBucket - Tutorial per usare PicMonkey}**
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.
Alcuni siti, come ad esempio Background Lab, permetto il download diretto
2. Attraverso un sito di hosting come PhotoBucket, Flickr, Image Shack, Tynipic, ecc. pubblichiamo la nostra immagine e ne copiamo il link diretto
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
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
Un Trucchetto per Cercare nel Modello il Codice che Ci Serve**
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.
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!
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
La mia esigenza è quella di caricare uno sfondo da inserire in tutta la parte interna del blog.
RispondiEliminaMi spiego meglio.
Il mio blog è basato sul modello simple.
C'è uno sfondo esterno, personalizzabile a piacere dal design modelli, e uno interno su cui è possibile modificare solo i colori ma non caricare uno sfondo.
Ecco io vorrei proprio fare questa ultima operazione. Ti ringrazio ancora per l'aiuto preziosissimo che ci dai ogni volta