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.
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.
Cambiare l'icona del vostro blog nel browser.
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:
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.
e modificatele aggiungendo la riga scritta in rosso:
body {
background:$bgcolor;
background-image:url(indirizzo dell'immagine);
margin:0px;
padding: 0;
color:$textcolor;
font:x-small Helvetica sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}
Sostituendo indirizzo dell'immagine con il link all'immagine che avete scelto come sfondo. Salvate il modello e visualizzate il blog per vedere il vostro nuovo sfondo.
Ricerca personalizzata
Commenti
Posta un commento