Come mostrare una immagine al posto o insieme al Continua a leggere di Blogger.

Come visualizzare una immagine al posto del testo del Read More o Inserisci Intervallo oppure visualizzare testo e immagine uno a destra e una a sinistra o viceversa oppure tutti e due dalla stessa parte.

Ritorno a parlare del Read More di Blogger che è quella funzione che serve per mostrare in Homepage solo l'inizio dell'articolo in modo che il lettore interessato a leggerlo possa aprirlo cliccando sul link Continua a leggere. Dopo l'hack per sostituire questa espressione con l'effettivo titolo del post vediamo come si possa sostituire con una immagine, come possa essere mostrata l'immagine da una parte e il testo dall'altra e come possano essere inseriti entrambi dallo stesso lato.

Per personalizzare l'espressione testuale da visualizzare in calce all'incipit del post si può consultare l'articolo su come configurare il Post sul blog mentre per le modifiche illustrate in questo post dovremo necessariamente mettere mano al Modello.

SOSTITUIRE IL TESTO CON UNA IMMAGINE

Per prima cosa bisogna scegliere o creare l'immagine quindi caricarla su Google+ ed ottenerne il link diretto. Quindi, dopo aver salvato il template, si va su Modello > Modifica HTML e si cerca il codice che serve per inserire l'intervallo e che è il seguente

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

Per visualizzare una immagine al posto di Continua a leggere si modifica in questo modo

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcctjB_MMg050vEPyOepXkM_lgsqr6_9jqzcNVnmqW3psjXZefvGYvLldno7d2GiWI7oEGhHYeQW8BdvFBFYrkeiCUWdZ9dyyZsekGmDIGWWveSS-vMCAoML-yvBrM4KoKPkAKhP4Kyrc/w240-h82-no/read-more.png' width='100px' /></a>    
</div>
</b:if >

dove ovviamente l'URL dell'immagine colorato di rosso può essere modificato così come la sua larghezza. Dopo aver salvato il template ecco quale sarà il risultato

MOSTRARE IL TESTO A DESTRA E L'IMMAGINE A SINISTRA

Se vogliamo visualizzare testo e immagine rispettivamente a destra e a sinistra il codice precedente dovrà essere sostituito da quest'altro

<b:if cond='data:post.hasJumpLink'>
<div style='margin-bottom:35px;'>
<div class='jump-link'> <span style='float:left; margin-lef:5px;'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcctjB_MMg050vEPyOepXkM_lgsqr6_9jqzcNVnmqW3psjXZefvGYvLldno7d2GiWI7oEGhHYeQW8BdvFBFYrkeiCUWdZ9dyyZsekGmDIGWWveSS-vMCAoML-yvBrM4KoKPkAKhP4Kyrc/w240-h82-no/read-more.png' width='100px'/></a></span><span style='float:right; margin-right:20px'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
</div>
</div>
</b:if>

dove oltre al parametro sulla larghezza della immagine sono stati inseriti anche quelli delle distanze che devono avere a sinistra e a destra l'immagine e il testo. C'è anche un div per il margine basso di 35 pixel in modo da staccare questi due elementi dalla parte bassa del layout

MOSTRARE IL TESTO A SINISTRA E L'IMMAGINE A DESTRA

Il codice in questo caso potrebbe essere questo

<b:if cond='data:post.hasJumpLink'>
<div style='margin-bottom:35px;'>
<div class='jump-link'>
<span style='float:left; margin-left:10px'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
<span style='float:right; margin-right:20px'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcctjB_MMg050vEPyOepXkM_lgsqr6_9jqzcNVnmqW3psjXZefvGYvLldno7d2GiWI7oEGhHYeQW8BdvFBFYrkeiCUWdZ9dyyZsekGmDIGWWveSS-vMCAoML-yvBrM4KoKPkAKhP4Kyrc/w240-h82-no/read-more.png' width='100px'/></a></span>
</div>
</div>
</b:if>

con gli stessi parametri da modificare. Il risultato sarà il seguente

INSERIRE TESTO E IMMAGINE ENTRAMBI A SINISTRA

Il codice per visualizzare entrambi gli elementi a sinistra sarà

<b:if cond='data:post.hasJumpLink'>
<div style='margin-bottom:35px;'>
<div class='jump-link'>
<span style='float:left; margin-left:20px'>
  <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span> <br/>
<div style='float:left; margin-left:20px'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcctjB_MMg050vEPyOepXkM_lgsqr6_9jqzcNVnmqW3psjXZefvGYvLldno7d2GiWI7oEGhHYeQW8BdvFBFYrkeiCUWdZ9dyyZsekGmDIGWWveSS-vMCAoML-yvBrM4KoKPkAKhP4Kyrc/w240-h82-no/read-more.png' width='100px'/></a></div>
</div>
</div>
</b:if>

e dopo aver salvato il modello avremo questo risultato

VISUALIZZARE TESTO E IMMAGINE ENTRAMBI A DESTRA

Infine vediamo quale potrebbe essere il codice per vedere a destra sia testo sia immagine

<b:if cond='data:post.hasJumpLink'>
<div style='margin-bottom:35px;'>
<div class='jump-link'>
<span style='float:right; margin-right:20px'>
  <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span> <br/>
<div style='float:right; margin-right:20px'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcctjB_MMg050vEPyOepXkM_lgsqr6_9jqzcNVnmqW3psjXZefvGYvLldno7d2GiWI7oEGhHYeQW8BdvFBFYrkeiCUWdZ9dyyZsekGmDIGWWveSS-vMCAoML-yvBrM4KoKPkAKhP4Kyrc/w240-h82-no/read-more.png' width='100px'/></a></div>
</div>
</div>
</b:if>

che produce questo risultato



Il lettore potrà aprire il post cliccando sulla immagine sia cliccando sul testo.