Blogger Template: cambia il tuo logo!

Per tutti quelli che come me, non ancora utilizzano un servizio di hosting per il proprio blog e continuano a fruttare l'ottimo blogger di google senza spendere un centesimo di euro, ecco un semplice hack per poter modificare il vostro template, sostituendo o aggiungendo un logo grafico nel titolo testuale dell'header.

Attenzione! Ricordati di fare un backup del tuo template prima di iniziare con le modifiche!

Aggiunta logo al titolo testuale

Se desideri lasciare il titolo testuale, magari aggiungendo un'immagine nel tuo header, basta includere il tag <IMG> nei due campi "Titolo" e "Descrizione" nella pagina di configurazione di Blogger:

• seleziona "Impostazioni" -> "Base"
• sul campo "Titolo", posiziona il cursore a sinistra del titolo testuale del tuo blog
• inserisci il tag <IMG> facendolo puntare alla location dell'immagine desiderata
  
  <IMG SRC="[your domain and filename]">


• uscire dal menu' di configurazione ricordandosi di salvare

Questo metodo e' veramente semplice, ma fortemente sconsigliato, in quanto se si modifica il campo "Titolo", il nome del vostro blog sara' meno visibile e meno indicizzato dai motori di ricerca.

Sostituzione titolo testuale con un logo

Il miglior approccio, in questi casi, e' l'utilizzo del metodo CSS Fahrner Image Replacement (FIR), ovvero un'elegante soluzione che utilizza gli stylesheets per sostituire il testo con un'immagine, essenzialmente nascondendo il testo dagli "standards-compliant browsers".
Cio' avviene creando uno stile che setta il testo a "display: none", in aggiunta di un altro stile che visualizza invece l'immagine di background.
Questo approccio' pero', introduce delle barriere di accessibilita', perche' "display: none" rende ogni elemento (con questa dichiarazione) invisibile a certi screen readers e motori di ricerca. Anche se molte persone stanno lavorando a delle varianti di FIR per la risoluzione di questo problema, nel frattempo vi consiglio questa soluzione di compromesso:

• apri il tuo blog template
• inserisci il tag vuoto <SPAN></SPAN> nell'area Header, dopo <$BlogTitle$>
• spostati nella parte relativa alla dichiarazione degli stili , e modifica lo stile #blog-title (invece di display:none; puoi settare il font-size al 2% senza qundi eliminare il titolo, ma rendendo quest'ultimo visibile agli screen readers e ai motori di ricerca e invisibile ai visitatori del blog)


#blog-title {
margin:5px 5px 0;
padding:0px 0px .25em;
border:1px solid #357;
border-width:1px 1px 0;
font-size:2%; !importante;
line-height:1.2em;
color:#135; !importante;
text-transform:uppercase;
letter-spacing:.2em;
}

• crea un nuovo stile chiamato #blog-title span. L'esempio in basso dovrebbe centrare l'immagine grafica sopra il testo nascosto.
  
  

  #blog-title span {
  display:block;
  top:0;
  width:666px;
  margin-top:2px;
  margin-right:auto !importante;
  margin-left:auto !importante;
  z-index:1 !importante;
  height:86px;
  background:url("http://dominio/immagine.jpg") no-repeat;
  }

• salva i cambiamenti effettuati al tuo template

E' ovvio che avere un proprio dominio con servizio di hosting e' tutta un'altra cosa...i vantaggi sono molti...ma per chi vuole iniziare a sperimentare un blog senza farne una ragione di vita, blogger e' una valida alternativa, ma ricordate... google non garantisce sulla perdita accidentale dei dati, quindi fate sempre il backup del template e dei posts!

Ciao e alla prossima pillola!