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 + "#more"'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25VnwkRX9BHdoqzOfSyBJShVpO6OrrIxbdZvQHD6wxUVASzIgCrkIkgHbgtHVuUhCwpgf8wznstdQ_BZqXfEzWUor6cNh1njuU_RUGbDbwn7ZwCi2hip_RjchaiecFr-SADbX3IjHEAA/'/></a>  <span align='left'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></span>
</div>
</b:if>
Le parti evidenziate di rosso possono essere così personalizzate:
- L'espressione   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
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.
mitico come sempre!
RispondiEliminaGraaaaaazie Parsifal!
RispondiEliminaChe meraviglia! Lo provo subito! :D
Fatto ed è compatibile!:D
RispondiEliminaInizialmente 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!
@Marguerite N.
RispondiEliminaGià 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.
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@Brillidiluce
EliminaQuesto 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 + "#more"'><img alt='read more' border='0' src='http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a>  <span align='left'><a expr:href='data:post.url + "#more"'><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.
e in quale parte dell' html devo inserirlo??
RispondiElimina@Brillidiluce
EliminaDalla 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.