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.

77c15639be6681c34a5b4a617a464e4c.png

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).

77ea12fc34f257c707b3468a5f553f25.png

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).

8609c1174f1f7c38118ba45160d574c3.png

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!

aad0a47685f2739e9758c10cb9c9bab5.png

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! Digg |  Facebook

Commenti

fiko, per un utente come me questo è molto interessante!! grazie

avatar utente maya

Scritto il:09/05/2008

Rispondi a questo commento

Questa procedura funziona con tutti i template?

avatar utente Bill

Scritto il:09/05/2008

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".

avatar utente Redazione

Scritto il:09/05/2008

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/

avatar utente PG

Scritto il:09/05/2008

Rispondi a questo commento

Grandissimi un post veramente utile. Grazie!

avatar utente mamo

Scritto il:09/05/2008

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.

avatar utente marco

Scritto il:09/05/2008

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

avatar utente daniele

Scritto il:11/05/2008

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

avatar utente Redazione

Scritto il:11/05/2008

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!

avatar utente pattygatty

Scritto il:11/05/2008

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

avatar utente ila

Scritto il:15/05/2008

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?

avatar utente Redazione

Scritto il:15/05/2008

Rispondi a questo commento

ma è possibile spostare il Titolo weblog in un punto diverso?

avatar utente Lillo

Scritto il:15/05/2008

Rispondi a questo commento

Ciao Lillo,
è possibile e a breve metteremo online un tutorial che dice come fare. Continua a seguirci!
A presto.

avatar utente Redazione

Scritto il:15/05/2008

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:)

avatar utente Pink

Scritto il:25/05/2008

Rispondi a questo commento

Ottima spiegazione! Veramente nolto chiara. Grazie.

avatar utente cattivo.maestro

Scritto il:14/06/2008

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

avatar utente Feanoro

Scritto il:01/07/2008

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.

avatar utente Redazione

Scritto il:01/07/2008

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

avatar utente robiclick

Scritto il:02/07/2008

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.

avatar utente Redazione

Scritto il:02/07/2008

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

avatar utente Andrea

Scritto il:04/07/2008

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è?

avatar utente amaranta

Scritto il:06/07/2008

Rispondi a questo commento

Ciao amaranta,
puoi dirci l'indirizzo del tuo blog, così controlliamo.
Grazie.

avatar utente Redazione

Scritto il:06/07/2008

Rispondi a questo commento

GRAZIE MILLE !!...proverò...
ciao
a

avatar utente antonello

Scritto il:06/08/2008

Rispondi a questo commento

tutto a posto...grazie ancora !!
ciao
a

avatar utente antonello

Scritto il:06/08/2008

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/

avatar utente hil94

Scritto il:22/08/2008

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

avatar utente mery

Scritto il:19/09/2008

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.

avatar utente Redazione

Scritto il:19/09/2008

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

avatar utente mery

Scritto il:25/09/2008

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.

avatar utente Redazione

Scritto il:25/09/2008

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

avatar utente Stefano68

Scritto il:09/10/2008

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.

avatar utente Redazione

Scritto il:09/10/2008

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

avatar utente Stefano68

Scritto il:10/10/2008

Rispondi a questo commento

Ciao Stefano68,
cosa intendi con "Intestazione"?
Grazie.

avatar utente Redazione

Scritto il:10/10/2008

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

avatar utente Stefano68

Scritto il:13/10/2008

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.

avatar utente Redazione

Scritto il:13/10/2008

Rispondi a questo commento

Ho risolto il problema dell'header del blog. Grazie mille a tutta la redazione

avatar utente Maxrock076

Scritto il:15/10/2008

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

avatar utente andrea

Scritto il:05/11/2008

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.

avatar utente Redazione

Scritto il:05/11/2008

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??

avatar utente Filippo

Scritto il:24/07/2009

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

avatar utente myblog.it

Scritto il:24/07/2009

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??

avatar utente Francy

Scritto il:21/08/2009

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.

avatar utente Redazione

Scritto il:21/08/2009

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?

avatar utente GIANNI

Scritto il:07/04/2011

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

avatar utente Redazione.Myblog

Scritto il:07/04/2011

Rispondi a questo commento

Ma come si fa ad adattare l'immagine a quella dell'header orginiale' Che programma uso?

avatar utente gaetano

Scritto il:12/01/2012

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

avatar utente shady4730

Scritto il:12/01/2012

Rispondi a questo commento

Scrivi un commento

NB: i commenti di questo blog sono moderati.