09/05/2008
Come modificare l’header del Blog
In questo tutorial mostriamo come modificare l’header del Blog.
Per chi non lo sapesse, l’header è la parte alta del Blog in cui sono presenti l’immagine e il titolo del Blog.

Per cominciare, con il tasto destro del mouse clicchiamo sull’immagine dell’header facendo apparire il menu a tendina. Cliccate su Salva sfondo come… (su Internet Explorer) o Visualizza immagine di sfondo (se utilizzate Firefox).

Avete già scelto l’immagine da sostituire? Bene.
Allora aprite l’immagine appena salvata con un programma di grafica.
Poi importate anche l’immagine da sostituire e adattate le sue dimensioni con quelle dell’immagine originale, in questo modo quando la inseriremo nel Blog sarà omogenea con il resto della grafica.
Salvate il file con la nuova immagine (vi consigliamo di salvarlo nel formato JPG o PNG) e caricatelo nel vostro Blog da Pannello di Controllo > Gestione File.
Cliccate sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto nel Blog.
Dopo pochi secondi vedrete la vostra immagine apparire nell’elenco dei file all’interno della cartella images.
Cliccate con il tasto destro del mouse sul nome del file e selezionate Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo avete copiato la url della vostra immagine. Incollatela in un file di testo e salvatela, ci servirà tra poco.
Ora dobbiamo inserire nel codice del Blog il link della nuova immagine che abbiamo caricato. Andate in Presentazione > Opzioni avanzate e cliccate su Modifica modello del Foglio di stile. Si aprirà una finestra popup contenente il codice CSS.
Cercate queste righe di codice:
#banner {
width:925px;
height:188px;
background: #4583D0 url('http://blog.alice.it/graphics/design/preview/set1/4583D0/banner.jpg') no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
line-height: 140%;
}
La riga di codice che dovete modificare è una sola: background.
Copiate la URL dell’immagine che avete salvato poco fa e incollatela all’interno delle parentesi tonde. La riga di codice diventerà così:
background: #4583D0 url('http://nomeblog.myblog.it/lamianuovaimmagine.jpg’) no-repeat;
Cliccate su Salva queste informazioni e andate a vedere il vostro Blog.
L’immagine è cambiata!

Buon lavoro!
11:20 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (46) | Segnala
| Tag: myblog, virgilio, tutorial, header, blog, grafica, tip | OKNOtizie |
|
del.icio.us
|
|
Digg |
Facebook

Commenti
fiko, per un utente come me questo è molto interessante!! grazie
Rispondi a questo commento
Questa procedura funziona con tutti i template?
Rispondi a questo commento
Ciao Bill,
in questo modo è possibile modificare l'header della maggior parte dei template, quelli con il banner orizzontale. Per quelli come http://myblog.it/fotogallery/modelli_grafici.html,zoom=114.html la procedura è la stessa, solo che l'immagine si trova all'interno di un codice con un altro nome "#container" anzichè "#banner".
Rispondi a questo commento
I miei più sinceri complimenti, le vostre competenze sono sempre complete e non lasciano nulla al caso.
PG
http://zdt.myblog.it/
Rispondi a questo commento
Grandissimi un post veramente utile. Grazie!
Rispondi a questo commento
Salve, volevo segnalare che nel blog di Giorgia Rossi (per le selezioni di Miss Universe), non si possono lasciare commenti, credo per un problema tecnico. Per altre candidate, ho controllato, invece si può.
Grazie, saluti.
Rispondi a questo commento
salve ho seguito le vostre istruzioni e sono riuscito a mettere un nuovo header e mi è riuscito grandi!!!!! una domanda come faccio a cambiare colore del blog dello sfondo intendo. grazie
Rispondi a questo commento
Ciao daniele,
per modificare il colore di sfondo del blog, sempre nel "Foglio di stile" devi modificare i valori di "background" all'interno di "body".
I valori sono esadecimali e puoi trovare i corrispettivi colori usando questo programma online: http://www.web-link.it/html/colori256.htm
Altrimenti, più semplicemente, puoi sostiturire ai numeri il nome del colore che vuoi inserire. Ad esempio, se vuoi lo sfondo rosso basta che dopo "background:" scrivi, in inglese, "red", per il blu "blue" e via così per tutti i colori.
Speriamo di esserti stati d'aiuto.
A presto
Rispondi a questo commento
Mi avete colto in contropiede: stavo per chedervi se fosse possibile aggiungere qualche template gattesco (chissà come mai questa richiesta, mah...), ma in questo modo posso lanciarmi nel tentativo di personalizzare l'header! Ok, lanciamoci nell'html!
Rispondi a questo commento
se nel foglio di stile sotto l' id "banner" non è già specificata l'immagine di background posso metterla lo stesso? Ci ho già provato ma non funziona...grazie
Rispondi a questo commento
Ciao Ila,
in questo modo è possibile modificare l'header della maggior parte dei template, quelli con il banner orizzontale. Per quelli come http://myblog.it/fotogallery/modelli_grafici.html,zoom=114.html la procedura è la stessa, solo che l'immagine si trova all'interno dell'id "#container" anzichè "#banner".
Tu che template utilizzi?
Rispondi a questo commento
ma è possibile spostare il Titolo weblog in un punto diverso?
Rispondi a questo commento
Ciao Lillo,
è possibile e a breve metteremo online un tutorial che dice come fare. Continua a seguirci!
A presto.
Rispondi a questo commento
Finalmente un post utile per cambiare e personalizzare i template!Sono riuscita da sola, ma sn sicura che sarà utile a molti:)
Rispondi a questo commento
Ottima spiegazione! Veramente nolto chiara. Grazie.
Rispondi a questo commento
Veramente ben fatto. Vorrei però sapere se è possibile cambiare dimensione, posizione e colore del titolo (ho provato a metter mano ma con scarsi risultati).
Inoltre è possibile usare dei font che nn siano quelli standard??
grazie per la cortese attenzione
Rispondi a questo commento
Ciao Feanoro,
proprio domani metteremo online un tutorial che mostra come modificare in parte il titolo del blog.
Continua a seguirci.
A presto.
Rispondi a questo commento
Gentile Resazione vorrei sapere se è possibile con il vostro tutorial a modificare l'header del mio fotoblog; innanzitutto non riesco a fare il primo pasasaggio del tutorial cioè salvare lo sfondo per prendere poi le dimensioni e poi non capisco dove inserire il link dell'immagine.
grazie
Rispondi a questo commento
Ciao robiclick,
questo tutorial si riferisce al template del blog. A breve metteremo online anche un tutorial per il fotoblog.
Continua a seguirci.
Rispondi a questo commento
Ciao ho letto qst post e m sembra molto interessante, ma io non ho un programma di grafica e per lo più non li so nemmeno utilizzare, non me lo potreste fr voi??
FATEMI SAPERE SE E' UNA COSA POSSIBILE..ALTRIMENTI FA NNT, ANZI GRZ L STSS...ciao
Rispondi a questo commento
qualcosa non funziona. Non riesco più ad aprire il mio blog. Mi dice che la pagina è inesistente. Anche se cerco di entrare passando da Mail e servizi. La posta mi funziona, il blog no. Perchè?
Rispondi a questo commento
Ciao amaranta,
puoi dirci l'indirizzo del tuo blog, così controlliamo.
Grazie.
Rispondi a questo commento
GRAZIE MILLE !!...proverò...
ciao
a
Rispondi a questo commento
tutto a posto...grazie ancora !!
ciao
a
Rispondi a questo commento
FI GHI SSI MO ! ! ! ! ! ! sto diventando una blogger esperta!!!! venite in tnt a visitare il mio blog!!!!!!!!!
http://giulyworld.myblog.it/
Rispondi a questo commento
STavo cercando di cambiare layout...mettendo un codice trovato predefinito e mi si è cancellata completaMENTE la configurazone del blog....adesso è tutto completamente bianco.Come faccio a risolvere'??
Grazie
Rispondi a questo commento
Ciao mery,
se cancellando il codice inserito non cambia nulla, ti consigliamo di resettare il template del blog selezionando la pagina modificata e cliccando sul bottone "Tornare alla versione originale" che trovi nella sezione "Presentazione > Opzioni avanzate".
A presto.
Rispondi a questo commento
Ho fatto tutto quello che ho scritto ma non riesco a cambiare il banner. Questo è il collegamento da copiare http://bovarisme.myblog.it/images/default.jpg
ma non viene nulla..potete aiutyarmi?? GRazie
Rispondi a questo commento
Ciao mery,
al link che ci hai segnalato non risulta associata nessuna immagine.
Ti consigliamo di controllare il collegamento all'immagine e di inserire nel codice l'URL corretta.
A presto.
Rispondi a questo commento
Salve, ho modificato l'header con una mia immagine, ma mi rimane comunque parte dello sfondo del "vecchio" (skater). In + volevo sapere se ci sono novità per lo spostamento dell'intestazione del blog. Grazie ciao
Rispondi a questo commento
Ciao Stefano68,
se ci invii l'indirizzo del blog facciamo un controllo per capire meglio cosa è successo.
Per quanto riguarda lo spostamento dell'intestazione del blog, cosa intendi?
Grazie.
Rispondi a questo commento
In merito all'immagine dell'header ho risolto (nel template dello "skater" ci sono due immagini, le ho modificate tutte e due..). Invece per l'intestazione avevo letto nei commenti precedenti che avreste messo a disposizione un tutorial per modificarla; in pratica io avrei bisgono di spostarla e modificarne il carattere. Grazie
Rispondi a questo commento
Ciao Stefano68,
cosa intendi con "Intestazione"?
Grazie.
Rispondi a questo commento
Intendo il "Titolo" e "Descrizione" del blog(che vedo in opzioni di base"). In pratica vorrei spostarlo a "mio piacimento" cambiando anche la tipologia del carattere e l'allineamento. Grazie
Rispondi a questo commento
Ciao Stefano68,
per modificare la posizione e la dimensione del titolo e della decrizione ti invitiamo a leggere questo tutorial:
http://redazione.myblog.it/archive/2008/07/02/come-modificare-la-dimensione-e-la-posizione-del-titolo-del.html
Per modificare il carattere a breve inseriremo un nuovo tutorial.
A presto.
Rispondi a questo commento
Ho risolto il problema dell'header del blog. Grazie mille a tutta la redazione
Rispondi a questo commento
ciao redazione io ho un problema.. vale a dire ho ftt tutto come avete detto voi e mi compare l'immagine che volevo io e ho tolto il titolo... ma ogni volta che clicco sull'immagine non mi riporta nella homepage
Vedete anche voi http://ungiocosuamici.myblog.it
FATEMI SAPERE
Grazie mille ciaoo
Rispondi a questo commento
Ciao andrea,
il tutorial è valido anche per il template che hai utilizzato tu.
Ti invitiamo a controllare di aver inserito il codice correttamente.
A presto.
Rispondi a questo commento
Salve!
dopo aver messo l'URL dell'immagine sia con il vostro procedimento che facendo l'upload del file header su tinypic le modifiche avvengono ma l'header rimane uguale, come posso fare??
Rispondi a questo commento
Ciao Filippo,
se hai eseguito il tutorial correttamente l'header dovrebbe vedersi.
Ti invitiamo a controllare passo dopo passo tutte le azioni da compiere.
Il problema con le categorie invece potrebbe dipendere da alcuni elementi che hai inserito nelle colonne laterali del blog. Ti invitiamo a disattivarli e riattivarli uno ad uno per capire quale possa essere quello che impedisce l'apertura delle pagine interne del Blog
A presto.
La Redazione
Rispondi a questo commento
Uffis non riesco proprio..ho provato e sono riuscita a modificare lo sfondo del blog..ma l'header proprio no,non capisco come mai,provo e riprovo ma nulla,l'immagine e' caricata nei miei file ma pur mettendola nella riga giusta(il codice come spiegate voi) non mi appare e mi si vede solo lo sfondo col testo che avevo scritto in precedenza..come mai??
Rispondi a questo commento
Ciao Francy,
il tutorial è rivolto SOLO ai template di MyBlog.
Se hai un Blog MyBlog segnalacelo che effettuamo un controllo.
A presto.
Rispondi a questo commento
Scusate nella sostituzione del Banner, mi da un problema nell'ancoraggio del banner, nel limite a sinistra.
E'ancorato infatti fuori dalla base.....
Come posso risolvere?
Rispondi a questo commento
@ GIANNI
ti consigliamo di dare un'occhiata ai nostri nuovi tutorial
http://redazione.myblog.it/archive/2011/04/07/creiamo-una-skin-completamente-personalizzata.html
inoltre devi fare bene attenzione che le dimensioni dell'immagine che utilizzi come header siano corrette e la foto che utilizzi come sfondo sia bene centrata nell'immagine di partenza
saluti,
La Redazione
Rispondi a questo commento
Ma come si fa ad adattare l'immagine a quella dell'header orginiale' Che programma uso?
Rispondi a questo commento
Ma come si adatta la dimensione di un'immagine a quella dell'header?
E che programma di grafica devo usare? O.o
Rispondi a questo commento
Scrivi un commento
NB: i commenti di questo blog sono moderati.