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.

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
http://feeds.feedburner.com/blogspot/UzOyu

Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google, Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!

Ar-themes Logo

Hugo Repetto

Tutti noi crediamo di avere qualcosa da insegnare, tutti noi abbiamo una nostra storia personale che ci rende unici e ineguagliabili.

1 commento:

  1. Con Sky Drive è possibile accedere e condividere documenti, foto e file di Microsoft Office. E’ possibile proteggere con password i file in modo da controllare chi vi ha acceduto. Con queste caratteristiche è la risposta più credibile alla suite da ufficio su cloud di Google, Google Documents.

    Lo strumento si presta benissimo per memorizzare i backup di documenti, file multimediali e foto. Con 25GB lo spazio è davvero tanto (basti pensare che Dropbox offre, gratuitamente, “solo” 2,5GB)

    Grazie all’interfaccia web, con Sky Drive diventa facile condividere un file o un’intera cartella (anche di foto) con chi volete, o con un social network nella maniera che si ritiene più opportuna. Impostando i diritti di accesso è facile decidere chi può accedere ai tuoi documenti, foto e file.

    RispondiElimina