Come inserire immagine e testo su lati opposti del layout nel read more di Blogger.

Nell'articolo di ieri avevo trattato la questione di come inserire contemporaneamente nei riassunti degli articoli un testo e una immagine entrambi posizionati sulla sinistra. Questa mattina mi sono accorto che il riscontro dei lettori è stato oltremodo positivo. Al momento visualizzo 5 Mi Piace nell'iFrame di Facebook sotto il post. Non vedo nessun nome e questo significa che chi ci ha cliccato non è mio amico su Facebook e quindi non fa parte della cerchia di persone con cui mi relaziono più frequentemente.

Considerato questo insperato successo e un commento di richiesta di ulteriore personalizzazione ho deciso di dedicare all'argomento un altro articolo. Si tratta di inserire alla fine del riassunto del post una immagine e un testo, una a sinistra e l'altro a destra del layout e viceversa.

Prima di iniziare la trattazione ricordo che in tutti i modelli recenti è presente sotto la riga <data:post.body/> il seguente 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 >

Coloro che lo vogliono personalizzare devono sostituirlo con uno di quelli riportati più in basso. Può essere semplicemente incollato solo nei modelli in cui non è presente. Se non fate la sostituzione vedrete due link di Read More il che non è esteticamente apprezzabile.

Ecco il codice da incollare se si vuole vedere l'immagine a sinistra e il testo a destra

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <span style='float:left; margin-left:5px'>
<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></span><span style='float:right; margin-right:20px'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
</div>
</b:if>

Oltre alla personalizzazione dell'immagine, che deve essere caricata su un hosting tipo Picasa o Skydrive, acquisitone l'URL e sostituito a quello evidenziato di rosso, è anche possibile settare l'esatta posizione dell'immagine e del testo mediante i pixel inseriti in margin-left e margin-right che ne determinano la distanza dai bordi. Ecco come si presenta in questo caso il riassunto di un articolo in home page

I collegamenti all'intero articolo saranno attivi sia nell'immagine che nel testo, quindi il post può essere aperto indifferentemente cliccando su uno dei due. Se invece si preferisce la configurazione opposta, cioè testo a sinistra e immagine a destra, si deve incollare questo codice

<b:if cond='data:post.hasJumpLink'>
<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='http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a></span>
</div>
</b:if>

che porta a un risultato di questo genere

 

Anche in questo caso si possono personalizzare i margini come illustrato in precedenza. Spero che qualcuno non mi chieda di mettere immagine e testo entrambi a destra visto che tutte le altre opzioni le ho già illustrate! Sarebbe comunque possibile farlo semplicemente sostituendo, in uno dei due codici, float:left; con float:right; e configurando i margini nel modo desiderato.

Ricordo che per l'installazione bisogna andare su Design > Modifica HTML e espandere i modelli widget. Si cerca la riga <data:post.body/> e si sostituisce il codice di inizio pagina con uno di quelli proposti, quindi si Salva il modello.