Come inserire un’immagine vicino ai titoli dei post su Blogger.

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.

  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:

    ]]></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

 

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: