Inserire un’immagine vicino ai titoli dei post su Blogger!

Il sondaggio ha avuto successo e moltissimi hanno espresso il loro voto (224 nel momento in cui scrivo). Sono contento che abbiate partecipato volentieri a questa iniziativa. Contento per me che non devo rovinarmi il cervello per capire a quale argomento dare priorità, contento per voi perchè così avete la possibilità di vedere pubblicati che con maggior probabilità incontrato il vostro gusto.

Fin da subito, “Inserire un’immagine vicino ai titoli dei post” è stato votatissimo (anche se sorpassato all’ultimo momento), ed eccomi qui a parlarne. Ci sono vari modi per farlo, io ne proporrò due.

Una volta fatta la modifica, ecco il risultato che otterrete:

Io farò riferimento al template Minima, ma se qualcosa non va con gli altri template basta lasciarmi un commento e integrerò il post (ogni template purtroppo può essere una storia a sè).

Per prima cosa, scegliete l’immagine che volete usare e pubblicatela in rete con un servizio come Skydrive, Imageshack, o Picasa. Per ottenere un effetto migliore consiglio di usarne una non troppo grande e con lo sfondo trasparente.

Metodo 1

Da Layout->Modifica HTML, dopo aver selezionato “Espandi i modelli widget”, cercate il codice che definisce lo stile del titolo di un post. Nel caso del template Minima, è il seguente:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

E aggiungete le parti che ho evidenziato:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
  background:url(indirizzo immagine) no-repeat;
  padding:0 0 0 40px; 
}

Cambiando indirizzo immagine con l’indirizzo dell’immagine che avete pubblicato in rete. Nell’ultima riga aggiunta, una volta provato l’effetto nel blog, potrete aumentare o diminuire quel 40 per dare più o meno spazio al titolo. Se il titolo finisce sopra l’immagine, aumentatelo, se è troppo lontano dall’immagine diminuitelo.

A questo punto non resta che salvare il template ed è fatta.

Metodo 2

Questo metodo, rispetto al precedente, ha il vantaggio di essere più universale, quindi se il primo non vi riesce provate con questo. L’inconveniente è che l’immagine si estenderà in altezza anche sopra il titolo del post.

Sempre da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

]]></b:skin>

Subito sopra, incollate questo:

post h3 img {
  border: none;
}

Adesso cercate

<a expr:href='data:post.url'><data:post.title/></a>

E aggiungete la parte in rosso:

<a expr:href='data:post.url'><img src="indirizzo immagine" /><data:post.title/></a>

Sostituendo indirizzo immagine con l’indirizzo dell’immagine che avete pubblicato in rete. Salvate il template, ed ecco fatto.

Se non doveste vedere l’immagine, dopo aver controllato di aver seguito tutti i passi, provate a cercare tutte i punti in cui è presente questo codice:

<data:post.title/>

E prima di ognuno di essi incollate la parte in rosso. Mi raccomando, prima, non sopra.

Sono curioso di vedere le creazioni che avrà ispirato questo post!

Note legali: Hello Kitty non è stata maltrattata durante la creazione dell’esempio visibile nell’immagine. Potete trovarla qui e chiedere direttamente a lei.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!