Pubblicato il 17/09/10 - aggiornato il  | 8 commenti :

Come visualizzare contemporaneamente una immagine e un testo nel read more di Blogger.

Mi è stato chiesto da Marguerite N. se ci fosse stata la possibilità di visualizzare contemporaneamente una immagine e un testo alla fine del riassunto dell'articolo nel classico Read More di Blogger. Ho già illustrato come inserire al posto della scritta "Ulteriori Informazioni" una immagine con il link all'articolo in modo da visualizzarlo per intero. Ho anche spiegato come si possa sostituire a Ulteriori Informazioni un'altra espressione.

Vediamo come procedere per visualizzare sulla stessa riga sia l'immagine che il testo, entrambi con il link all'intero articolo. Il codice da incollare nel modello è il seguente:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a>&#160;&#160;<span align='left'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
</div>
</b:if>

Le parti evidenziate di rosso possono essere così personalizzate:

  • L'URL deve essere quello di una immagine che è stata precedentemente caricata su un hosting tipo Picasa o SkyDrive
  • L'espressione &#160; rappresenta uno spazio. Nel codice ne ho inserite due, il che vuol dire che ci sarà lo spazio di due caratteri tra l'immagine e il testo
  • Nel codice precedente ho messo prima l'immagine e successivamente il testo ma nulla vieta di fare il contrario. Basta spostare la stringa <img alt='read more' border='0' src='URL_Immagine'/> al posto di <data:post.jumpText/> e viceversa.
  • Questo codice va incollato al posto di quello presumibilmente già presente subito sotto la riga  <data:post.body/> in Design > Modifica HTML (flag su espandi modelli widget)

Dopo aver salvato il template ecco l'aspetto che avranno gli articoli in homepage o nelle pagine delle etichette

read-more

Se si cliccherà sull'icona o sul testo si aprirà l'intero post. Ovviamente al posto della immagine che ho usato come test inseritene una più adatta allo stile del vostro blog.



8 commenti :

  1. Graaaaaazie Parsifal!
    Che meraviglia! Lo provo subito! :D

    RispondiElimina
  2. Fatto ed è compatibile!:D
    Inizialmente mi compariva "doppio", poi ho pensato che fosse presente un codice di questo tipo e dopo averlo trovato l'ho eliminato.
    Idem per il bordo dell'immagine, ho utilizzato il codice che hai spiegato tempo fa.

    L'orientamento della colonna testo è a sinistra così mi piacerebbe per una questione visiva vedere il Read more a destra. E' possibile?
    Non voglio disturnarti ulteriormente, se si tratta di una sciocchezza che posso fare io ad hoc lo faccio, altrimenti è perfetto così. ;D

    Grazie ancora Parsifal!

    RispondiElimina
  3. @Marguerite N.
    Già che ci sono ci faccio un altro post per illustrare tutte le possibili opzioni. Comincio a scriverlo adesso, sarà pronto tra una decina di minuti.

    RispondiElimina
  4. ciao, scusa ma non ho capito una cosa in quale parte del html va inserito quel codice? Il risualtato finale quale sarebbe?? Mi piacerebbe vederlo prima di applicarlo al blog.

    RispondiElimina
    Risposte
    1. @Brillidiluce
      Questo codice

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
      </div>
      </b:if >

      va sostituito con quest'altro

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a>&#160;&#160;<span align='left'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
      </div>
      </b:if>

      dove si può modificare l'URL della immagine. L'aspetto sarà quello dello screenshot nonché unica immagine presente nel post.

      Elimina
  5. e in quale parte dell' html devo inserirlo??

    RispondiElimina
    Risposte
    1. @Brillidiluce
      Dalla tua domanda mi pare di capire che tu non abbia mai modificato un template. Per prima cosa bisogna salvare una copia del modello per un eventuale backup

      http://www.ideepercomputeredinternet.com/2012/07/backup-modello-blog-blogger.html

      Poi vai su Modello > Modifica HTML > Procedi e metti la spunta a Espandi i modelli widget. Pigi su F3 o su Ctrl+F e incolli la prima riga del codice che devi cercare cioè

      b:if cond='data:post.hasJumpLink

      Appena individuato il codice lo cancelli e lo sostituisci con quello che ti ho postato nel commento 5.a quindi clicchi su Anteprima. Se tutto va bene vai su Salva Modello ed è tutto.

      Elimina

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