Come inserire un logo (immagine di intestazione) su Blogger


Il logo rientra tra gli elementi grafici più importanti di tutto il blog: non solo perché se cliccato riporta alla pagina iniziale (homepage) ma anche perché serve per far rimanere impresso ai visitatori il proprio marchio in modo da non confonderlo con altri siti o blog che trattano gli stessi argomenti. Solitamente per logo si inserisce del testo in un'immagine con effetti e magari accompagnata da simboli, personaggi, omini e robe varie.



Per inserire un logo su Blogger bisogna andare nella sezione Layout>Aggiungi un gadget e selezionare Intestazione Pagina.



Dovrete adesso configurare l'intestazione: nel campo Titolo blog inserite il nome del vostro blog per intero, il campo Descrizione del blog consiglio di lasciarlo vuoto perché la potete inserire come metatag description solo per le ricerche; per l'inserimento del logo potete utilizzare la ricerca di una immagine presente nel computer utilizzando il pulsante Scegli file oppure incollare l'URL di un'immagine caricata sul proprio blog o da terze parti. Per quanto riguarda il posizionamento dovete selezionate al posto di titolo e descrizione in modo da non mostrare né il titolo in formato testo e nemmeno la descrizione. Fatto questo cliccate su Salva.


Il posizionamento dell'immagine di intestazione (header) può non essere quello sperato, però si può regolare aggiungendo codice css all'interno del modello. Per fare questo dovete conoscere ID del logo il cui nome varia da modello a modello: per scovarlo recatevi in una qualsiasi pagina del vostro blog dove appare il logo e cliccate con il pulsante destro del mouse su di esso e selezionate Ispeziona elemento o Codice Sorgente (tali dicitura varia in base al browser utilizzato). 


Visualizzerete il codice di quella pagina, ma a voi interessa solo ID del logo come mostrato in figura che è riconoscibile perché preceduto dal nome del blog. Nel mio caso ID è Header1_headerimg e probabilmente è lo stesso anche per voi se avete utilizzate un tema classico.

Questo è il codice per allinearlo più a sinistra:
#Header1_headerimg {margin-left:-60px;}

Per l'allineamento a destra dovete sostituire left con right, oppure se volete distanziare il logo in alto o in basso dovete aggiungere dentro le parentesi graffe i valori margin-top e margin-bottom.

Questo è il codice per centrare il logo:
#Header1_headerimg { display: block; margin-left: auto; margin-right: auto; }

Se il logo vi si vede tagliato dovete incrementare le dimensioni dell'header del blog.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".