REDAZIONE

Carissimi MyBlogger è giunto il momento di dare un tocco di carattere al vostro Blog, perché, come tutti sappiamo, il contenuto è fondamentale, ma anche l'occhio vuole la sua parte.

Iniziamo dunque questa serie di tutorial che vi guiderà nella personalizzazione del vostro spazio digitale per renderlo più accogliente e accattivante, più facile e piacevole da navigare.

Come prima cosa, se pensiamo al nostro blog come a un salotto dove ci incontriamo con i nostri amici per svolgere piacevoli conversazioni, dobbiamo decidere la forma della stanza la disposizione dell'arredo: per imparare a "customizzare" i vari elementi della pagina vi consigliamo di seguire i nostri tutorial nella sezione tips & tricks.

Ora, in questa prima puntata ci concentreremo sostanzialmente su come creare un bel cartello di benvenuto, ossia l'header che si trova in cima alla pagina, utilizzando un programma di grafica Open Source che possiamo scaricare gratuitamente dal web: stiamo parlando di Gimp.

Come prima cosa è necessario impostare correttamente le dimensioni del file immagine che vogliamo utilizzare come header (a proposito vi consigliamo di seguire il tutorial su come personalizzare l'header del blog)

Per farlo apriamo Gimp, creiamo un nuovo file e inseriamo altezza e larghezza in pixel dell'header...

Una volta che abbiamo deciso quale suggestione visiva vogliamo utilizzare per rappresentarci salviamola sul computer. Per modificarla in Gimp è sufficiente trascinare il file sull'area di lavoro che avevamo in precedenza impostato. Sulla destra possiamo verificare che nella finestra layer si è creato un nuovo livello contenente l'immagine che abbiamo importato.

Come potrete notare, dato che l'immagine è più grande dell'area del documento che abbiamo creato, una parte risulta nascosta perché eccede i limiti della pagina: a questo punto possiamo decidere di ridimensionare l'immagine per adattarla al nostro spazio utilizzando gli strumenti ruota, inclina, scala, ecc. presenti nella palette Strumenti oppure nella voce Immagine del menù a tendina in alto (tip: tenendo premuto CTRL mentre usiamo lo strumento Scala attiviamo l'opzione di scalatura proporzionale, per evitare distorsioni nell'immagine), oppure possiamo provare semplicemente a muovere l'immagine con lo strumento sposta (click e drag oppure freccette direzionali) per inquadrare una porzione specifica e dare un taglio più accattivante all'immagine. Vediamo i progressi fatti finora...

Ora proviamo ad aggiungere una scritta. Possiamo farlo utilizzando lo strumento testo: comparirà la finestra dell'editor di testo di Gimp, scriviamo il testo desiderato e clicchiamo chiudi. Dopodiché potremo impostare il font, la dimensione e il colore del testo nel pannello strumenti.

Come tocco finale possiamo creare un nuovo livello cliccando sull'icona con la pagina bianca nella scheda Livelli confermare i parametri del nuovo livello e con lo strumento sfumatura (short-cut: L) sperimentare diverse possibilità per aggiungere profondità e appeal all'immagine. Se la sfumatura compromette la leggibilità della scritta sarà sufficiente trascinare il layer contenente la sfumatura sotto quello contenente il testo per invertire l'ordine di sovrapposizione e possiamo anche provare a giocare con la modalità di sovrapposizione dei livelli (che di default è impostata su normale) e la trasparenza.

Ultimo passaggio: salviamo con nome il file in formato Gimp per poterlo modificare in seguito, mentre per la pubblicazione sul web sceglieremo di salvarne una copia selezionando il "tipo file per estensione" e scegliendo JPG o PNG.

Ecco una semplice composizione realizzata utilizzando esclusivamente questi strumenti:

Facile e d'impatto ;)

E voi cosa aspettate? Divertitevi a personalizzare il vostro blog per renderlo sempre più cool !!

Con MyBlog è possibile personalizzare l’immagine dell’header del proprio blog senza ricorrere all’uso dell’html!

Vediamo come:

per cominciare, selezionate, all’interno di Presentazione > Template, il modello grafico che più vi piace e attivatelo sul vostro blog.

Avete già sul vostro computer la nuova immagine che volete inserire?
Bene. Allora aprite l’immagine appena salvata con un programma di grafica.

PRIMA

Poi importate anche l’immagine da sostituire e adattate le sue dimensioni con quelle dell’immagine dell’header originale, in questo modo quando la inseriremo nel Blog sarà omogenea con il resto della grafica.

DOPO

Salvate il file con la nuova immagine (vi consigliamo di salvarlo nel formato JPG o PNG).
Ritornate all’interno di Presentazione > Template e cliccate sulla voce personalizza che si trova sotto al template che avete associato al vostro blog.

Si aprirà così questa finestra:

A questo punto non vi resta che selezionare la vostra nuova immagine cliccando prima il bottone Sfoglia e poi il bottone Carica. Per essere sicuri che l’immagine che avete caricato sia delle dimensioni che più vi piacciono è preferibile fare sempre un Anteprima.

Se il risultato finale vi piace, non vi resta che cliccare sul bottone Usa questo modello e il vostro blog avrà subito un nuovo aspetto!

Finalmente i template predefiniti sono stati battezzati da MyBlog e quindi hanno un nome proprio che ci aiuterà ad individuarli più facilmente.
In più, tra i template preesistenti si aggiungono i modelli “large”.
Questi modelli vi saranno utilissimi se volete creare un blog con una colonna laterale che ha le dimensioni di 300 pixel senza dover modificare il codice html del blog.

Vediamo come:

Prima di tutto bisogna decidere dove posizionare la colonna, se a destra o a sinistra del corpo centrale del blog, questo possiamo farlo dalla sessione Presentazione andando su Scegli la struttura del tuo blog.

A questo punto il vostro Blog sarà impostato con una colonna laterale da 300 pixel e potrete così dare più visibilità ai vostri widget,  inserire banner pubblicitari da 300 pixel o altre applicazioni per personalizzare il vostro blog! Comodo vero?

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!