Pagina aggiornata... Sabato, 04 novembre 2023 * Tempo di caricamento 0.96 secondi
Link navigazione : Home telaioHome ~ Template ~ Blogger_tutorial » Sfondo base grafica

..:: Blogger tutorial - Sfondo base grafica ::..

Uno sfondo con base grafica comprende sia lo sfondo esterno che la pagina/colonna blog,
è più rifinito rispetto ad uno sfondo classico e lo spazio blog colorato, con gli elementi grafici
si possono realizzare delle basi dedicate al tema del blog, ad esempio, per un blog di ricette
useremo delle immagini che rappresentano la cucina, il cibo e l'attrezzatura necessaria

Come ho spiegato nel tutorial Sfondo base, Blogger ci dà la possibilità di personalizzare
lo sfondo del blog tramite apposito tool e ci specifica che l'immagine non deve superare i 300KB
ho fatto un po' di prove e ho notato che se inseriamo degli sfondi con grafica, ridimensiona
l'immagine anche se molto al di sotto del limite consentito

Ecco un esempio con un'immagine di 163KB
* Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Se si imposta la misura reale del corpo/blog il testo esce nei lati
e l'immagine logo viene tagliata, la versione corretta dovrebbe essere questa:
* Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Ho risolto il problema inserendo nel box "Aggiungi CSS" del tool per le personalizzazioni,
la misura in larghezza dello sfondo con il parametro css "background-size:"

Il tema Blogger che si presta perfettamente alla modifica è "Simple Simply Simple"
credo sia il più basico di tutti e non ha strani effetti di ombreggiature.

Vediamo come procedere...

Clicchiamo su "Design" per accedere al pannello, poi su "PERSONALIZZA"
clicchiamo sul primo box del tool per caricare lo sfondo


Nella finestrella che si aprirà clicchiamo su "Carica immagine" e poi su "Seleziona immagine"


Scegliamo dal nostro pc l'immagine/sfondo da caricare nella finestrella che si aprirà,
salviamo cliccando su "Fine" e impostiamo i parametri che vedremo sotto la piccola anteprima
dello sfondo, selezioniamo su centrata, affianca e deselezioniamo lo scorri la pagina

* Cliccate sulle immagini per ingrandire e vedere maggiori dettagli


Lo sfondo è caricato, ora dobbiamo inserire il parametro affinché si visualizzi con la misura esatta,
clicchiamo su "Avanzate" ultimo menu sotto l'anteprima sfondo, clicchiamo sul triangolino accanto
a "Testo pagina" per aprire il menu a tendina, scorriamo fino in fondo e clicchiamo su "Aggiungi CSS"


Dove c'è scritto "Aggiungi CSS personalizzati" incolliamo il codice per il parametro
per la misura dello sfondo, questo è un esempio cambiate la misura in base al vostro sfondo.
Nel file "Istruzioni" dei Blogger Kit trovate il codice con la misura corrispondente

 


Non ci resta che personalizzare il blog, iniziando dallo sfondo/blog che nel tema è bianco
apriamo il menu "Avanzate" il triangolino che ora sarà accanto a "Aggiungi CSS", scorriamo
sopra e clicchiamo su "Sfondi" selezioniamo "Trasparente" per i parametri: "Sfondo principale
e Sfondo intestazione" lo sfondo esterno non importa tanto non sarà visibile

Personalizziamo il colore del testo, dei link e della pagina in base ai colori dello sfondo
Sistemiamo le misure del blog, inseriamo l'immagine logo ed eventuali accessori/gadget, salviamo
mano che si procede cliccando sul sull'icona floppy che troviamo a destra in fondo alla pagina

Nel file "Istruzioni" dei Blogger Kit trovate i codici dei colori abbinati alla grafica e
le misure blog consigliate, che ovviamente potrete modificare a vostro gusto

Un ultimo suggerimento...

Il tema "Simple Simply Simple" oltre ad un nome assurdo è un blog completamente bianco
ma nel link "Home" in fondo ai post e nella parte alta del footer ci sono delle linee grigie
la prima è un'immagine, la seconda un parametro css

* Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Sul bianco si notano poco ma su uno sfondo colorato possono essere fastidiose, se le volete
togliere inserite nel box "Aggiungi CSS" dopo quelli aggiunti per lo sfondo, questi parametri:

 


Nell'anteprima blog spariranno subito ma ricordatevi di salvare
affinché la modifica sia permanente

Ed ecco il blog personalizzato!
* Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Spero di essere stata chiara in ogni passaggio, in caso contrario scrivetemi un messaggio
Un abbraccio... buon lavoro e come sempre buon divertimento ^_^
Ciao alla prossima ೡPenelope ♥


Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


ೡ Pagina visitata da 3291 utenti


 H: 
Buona Primavera !



Prelevate ciò che vi piace ma...

- Non alterate in alcun modo la grafica
- Non togliete i credits ~ Grazie ^_^

...telaio Home!

Accessori, utilità e gadget in tanti stili e
soggetti pronti per il tuo spazio web
Il telaio di Penelope


Pagina Facebook
del telaio...

Privacy Policy Cookie Policy

..:: Basi per siti web ::..


..:: Blogger tutorial ::..


..:: Blogger kit ::..


..:: Copertine facebook ::..


Anteprima...
..: html & script tutorial :..


Script in table

Piccola guida sull'uso delle table con gli script, per realizzare qualunque tipo di accessori e gadget, utilizzando anche più script insieme^^
N.B. La guida completa per la realizzazione delle table » Menu css e html
Leggi il tutorial...

Box div con effetto rilievo

Pochi semplici parametri css3 per avere contenitori div con effetto rilievo, da utilizzare come contenitore principale del sito per non appesantire le pagine con elaborate basi grafiche, rendere visibile in modo elegante un boxino per messaggi/news o abbellire delle immagini senza formati particolari che si caricano con difficoltà...
Leggi il tutorial...

Cursore stelline

Un cursore magico da cui scendono tante stelline colorate...
Leggi il tutorial...

Testo effetto macchina da scrivere

Un effetto molto carino e semplice da configurare e personalizzare per scrivere dei messaggi da visualizzare all'entrata di una pagina...
Leggi il tutorial...

Testo effetto evidenziato

Testo evidenziato lettera per lettera, un effetto molto carino per titoli e messaggi ben visibili...
Leggi il tutorial...

Box scroller

Script per box con scroll particolare, vediamo il codice e le personalizzazioni possibili...
Leggi il tutorial...

Conta tempo

Script che ci permette di visualizzare il tempo trascorsoda una data prestabilita, tipo da quanto tempo è online il nostro spazio...
Leggi il tutorial...

Ora

Uno script molto molto semplice per visualizzare l'ora nelle pagine web e realizzare dei piccoli gadget sfiziosi oltre che utili...
Leggi il tutorial...

Frasi a rotazione o random

Script che permette di visualizzare una frase diversa ad ogni aggiornamento pagina, vediamo il codice e come fare le varie personalizzazioni...
Leggi il tutorial...

Sorpresine

Lo script per preparare dei gadget molto simpatici, le famose sorpresine, ovvero giffette o tag che in una determinata data cambiano aspetto...
Leggi il tutorial...
    Aggiorna il box

ೡ Visita la sezione Tutorial Home

Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...