Pubblicato il 10/01/11 - aggiornato il  | 19 commenti :

Inserire una immagine prima del titolo dei post in Blogger.

Mi è stato chiesto specificatamente di occuparmi di questa personalizzazione che non è poi difficile da effettuare. Illustrerò due procedimenti alternativi per i nuovi modelli realizzati con il Designer Modelli e per i template di prima generazione. Il concetto è come detto di visualizzare una piccola icona prima del titolo dell'articolo. Si può operare nella sezione <body> o nella sezione <head> segnatamente in quella  <b:skin>.

Come inserire una immagine prima del post modificando la sezione <body>

Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga

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

Nei nuovi modelli fa parte del blocco di codice che inizia con <h3 class='post-title entry-title'>, mentre nei vecchi modelli il blocco di codice dovrebbe variare. In ogni caso questa riga dovrebbe essere presente in tutti i template. Subito sotto incollate il seguente codice

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwl4RaEAz5GZQXUBbxmbFCCMnXcVRDTeSs7Za_v_2TwHDovLp5pWLFon0myv3JZzTu1tka4yax9DmHUCyPkjjJ1P2IOQghbf_tCeiRzhwu1MMqQ6DWazPb1L91c07zHqLnHZ4abquRJv8/'/>

come mostrato dallo screenshot

immagine prima del post

Al posto dell'indirizzo della icona che è evidenziato di rosso potete inserire quello della immagine che preferite. Salvate il modello. C'è da considerare che, anche nel caso in cui il vostro template inserisse in automatico delle cornici alle immagini, queste non sarebbero visibili perché il codice inserito è al di fuori dello stile del post. Ecco come appariranno i titoli del blog

icona prima del titolo dell'articolo 

Inserire una icona prima del titolo dell'articolo intervenendo nei fogli di stile

Nel caso in cui non siate riusciti a portare a termine la personalizzazione con la prima procedura, si può intervenire con un secondo metodo. Bisogna sempre andare su Design > Modifica HTML e cercare un blocco di codice che crei la classe per il titolo del post. In questa classe dovrebbe esserci il tag h3, e il tag post. Nei nuovi modelli ho trovato questo codice

h3.post-title, .comments h4 {
  font: $(post.title.font);  
  margin: .75em 0 0;
}

mentre nei vecchi template ha una forma simile a questa

.post h3 {
  text-align:justify;
  font-size: 150%;
  font-weight:bold; 
}

Inserire due nuove linee di codice di questo tipo

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;

in modo che il blocco precedente diventi

h3.post-title, .comments h4 {
  font: $(post.title.font);
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
  margin: .75em 0 0;
}

Anche in questo caso si deve sostituire l'URL evidenziato di rosso con quello della nostra immagine caricata su Picasa, Skydrive o altro sevizio di hosting. Salvare il modello. Se adesso visualizzate il blog, i titoli dei post avranno questo aspetto

icona prima del titolo del post in blogger

Nel caso dei vecchi modelli, l'icona si vedrà solo prima del titolo mentre con i nuovi modelli, questa procedura porta a visualizzare l'icona anche nei commenti viso che è presente anche la classe .comments h4.

commenti-icona-blogger  Se ci piace così, lasciamo stare il codice in questo modo. Se invece vogliamo l'icona solo prima del titolo, immediatamente sotto al blocco di codice dello stile dei post incolliamo quest'altro

h3.post-title {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
}

come mostrato nello screenshot

image

Salviamo il modello e l'icona sarà visibile solo prima del titolo

icona del titolo del post

Con questo secondo procedimento è possibile configurare la distanza tra l'immagine e il testo che forma il titolo agendo su padding-left: 50px;. Aumentando il numero i due elementi si allontanano e diminuendolo si avvicinano.

Questa personalizzazione effettuata con il primo procedimento oppure con il secondo è in ogni caso compatibile con quella che permette di centrare il titolo del post.

Con il primo metodo si cerca lo stesso codice del secondo sistema (modelli vecchi) e si incolla la riga text-align:center;. Se si utilizza il secondo metodo o si hanno modelli nuovi è essenziale creare una nuova classe che in questo caso sarà

h3.post-title {
text-align:center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
}

Salvando il modello, i titoli dei post avranno questo aspetto

titolo-centrato

Avviso importante: Nel caso in cui abbiate optato per il primo metodo e l'icona si visualizzasse solo in homepage e non nei singoli post, significa che è presente una riga di questo tipo

<b:if cond='data:blog.url != data:post.url'> al di sopra di

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

In questo caso il codice dell'immagine va inserito sopra a entrambe come mostrato in questo ultimo screenshot

codice della immagine

vale a dire subito sotto la riga <b:if cond='data:post.url'>.



19 commenti :

  1. salve, vorrei segnalarvi un sito web creato con altervista che permette di accedere ai più grandi siti con un click permettendo un notevole risparmio di tempo e inoltre di trovare i film in streaming megavideo solo nei siti che offrono link megavideo veri..il sito si chiama playsearch...grz ciaoo

    RispondiElimina
  2. ciao,
    volevo chiederti se dopo aver inserito l'immagine prima del titolo, questa poi viene inserita anche nel relativo feed.

    RispondiElimina
  3. @Davide Morante
    Naturalmente no. Fa parte del modello; nei feed ci vanno solo gli elementi del post

    RispondiElimina
  4. Ciao, nel caso volessi mettere mettere un'immagine diversa per ogni post?
    Oppure... ancora meglio... come si fa a mettere un'immagine invece del titolo del post o della sezione?

    RispondiElimina
  5. @concorso baol
    Per questioni di indicizzazione del post, il titolo testuale ci dovrà pur essere. Non ho mai visto siti con immagini al posto dei titoli. Si può sostituire il nome del blog, questo sì

    RispondiElimina
  6. Ok per quanto riguarda il titolo del post... ma si può mettere un'immagine invece del titolo in in widget qualsiasi che sia pure nella sidebar o in un elemento html da posizionare dove voglio?

    RispondiElimina
  7. ciao ma è possibile inserire l'immagine proprio sopra il titolo? io volevo inserire come una fascia della stessa lunghezza del box del post.

    RispondiElimina
  8. In teoria sì. Inserisci l'immagine con la stessa sintassi mostrata nel post prima di
    <h3 class='post-title entry-title'>
    o della riga simile che hai nel tuo modello.
    Se vuoi fare le cose ancora più di classe potresti inserire questo codice
    <div class='title-img'><img src='URL-IMMAGINE'/></div>
    e poi crei una classe di stile in questo modo
    #title-img {
    margin...
    padding...
    }
    con i parametri che vuoi e la incolli prima della riga che contiene
    </b:skin>

    RispondiElimina
  9. ah ok, Grazie mille ci provo anche se non sono certo di concludere qualcosa :P

    RispondiElimina
  10. bene in un certo modo ci sono riuscito come puoi vedere http://sonyericssongen.blogspot.com/ ed ho dato anche una lunghezza maggiore che rende la fascia come se spuntasse dalla sidebar :p

    RispondiElimina
  11. @SE-Gen
    Ho visto, non sta male. Hai inserito questa immagine
    http://img685.imageshack.us/img685/2583/fascia.png
    Se vuoi un consiglio le immagini del template caricale tutte su Picasa per evitare troppe richieste DNS e velocizzare il caricamento della pagina.

    RispondiElimina
  12. grazie dell'ulteriore consiglio, sei grande. Io sono iscritto su flickr, è lo stesso?

    RispondiElimina
  13. @SE-Gen
    Siccome le immagini dei post vengono caricate su Picasa, nei limiti del possibile, bisogna fare lo stesso anche con quelle del template per evitare rallentamenti dovuti alla richiesta di troppi indirizzi da servizi diversi.

    RispondiElimina
  14. ah adesso ho capito, grazie mille ancora di tutto ;)
    a risentirci :)

    RispondiElimina
  15. ciao Ernesto, innanzitutto complimenti per le sempre chiare e utili indicazioni che dai.
    avrei un quesito.
    ho inserito un riquadro come sfondo del post in questo blog:
    http://qualcheprova.blogspot.com/
    però blogger non mi visualizza la parte alta del riquadro, così ho pensato di inserire una linea a parte, che dovrebbe stare fra la data e il titolo del post. ho provato col secondo metodo che hai descritto ma me la sovrappone al titolo come vedi. provando invece col primo metodo, la posizione è giusta in verticale ma spostata in orizzontale, e non ho gli stili per settare margini e padding. c'è una soluzione?
    ti ringrazio molto.

    RispondiElimina
  16. Ciao Ernesto!
    Grazie ai tuoi suggerimenti sono riuscita a fare delle cose che prima erano impossibili!
    La strada è ancora lunga però e credo che ti chiederò diversi aiutini...
    Per quanto riguarda questo argomento, ho provato col primo sistema ed effettivamente l'immagine compare prima del titolo, però con la cornice che ovviamente non so come togliere.
    In più qualche tempo fa avevo provato a fare la stessa cosa seguendo le indicazioni di un altro blog, ma l'immagine non compariva, si spostava solo il titolo verso destra. Evidentemente devo aver salvato quella prova perchè ora l'immagine che grazie a te ho inserito non rimane subito a sinistra... Sicuramente c'è da togliere qualche codice corrispondente all'immagine che avevo inserito, ma che non si vede... solo che non saprei come trovarlo ed eliminarlo! Help!!

    Grazie.

    La Fra

    RispondiElimina
  17. ah scusa... il blog interessato è elpaladarfeliz.blogspot.com

    RispondiElimina
  18. @La Fra
    Non so a quale dei tuoi tre blog ti riferisca, la prossima volta cerca di essere più precisa. Comunque hai fatto un po' un casino con una immagine su Picasa.
    Hai inserito questo link di background
    https://picasaweb.google.com/lh/photo/Q4UUQ2Kk9b2WzUtq_oI26vUz7dmelKOsVx-hVthhnek?feat=directlink
    di una "cupcake" e invece l'URL era quest'altro
    https://lh5.googleusercontent.com/-009VQUuHYI4/TcA4rqYuE-I/AAAAAAAABxw/uE4ZtS0Y9QA/cupcake%252520low%252520definition%252520trasparente.gif
    Prova a fare questa modifica e poi fammi sapere. Ciao

    RispondiElimina
  19. Ciao,
    scusa per non averti indicato a quale dei tre blog mi riferivo, ma te l'ho scritto subito dopo... non pensavo fossi una vera scheggia nel rispondere!!

    Effettivamente avevo fatto un bel casino con quelle immagini... e stamattina ci ho dato dentro nuovamente!
    In pratica dopo mille tentativi, ho messo un'altra immagine (che raffigura lo stesso cupcake, ma in dimensioni più piccole).
    Il problema è che c'è un conflitto col titolo.
    Inizialmente con le impostazioni che avevo trovato il titolo andava sopra all'immagine. Così agendo per prove ed errori sono riuscita a spostare il titolo più a destra.
    Però succede che nei titoli lunghi dei post, che vanno a capo, l'immagine si vede per intero. Nei titoli più corti che stanno su una sola riga, l'immagine si vede a metà...
    In un precedente tentativo, l'immagine si vedeva per intero in vicino a tutti i titoli, però i titoli che vanno a capo presentavano una distanza eccessiva tra la prima e la seconda riga...

    A questo punto non so più quale valore modificare...

    Grazie in anticipo per l'aiuto...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy