Pubblicato il 15/05/14 - aggiornato il  | 5 commenti :

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

immagine-al-posto-continua-leggere

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

continua-a-leggere-immagine

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

read-more-blogger

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

iummagine-testo-sinistra-layout


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

immagine-testo-destra-blogger-read-more

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


5 commenti :

  1. ho seguito esattamente passo passo ma mi visualizza il normale continua a leggere e non la mia immagine..quale può essere il problema?

    RispondiElimina
    Risposte
    1. Potresti non aver trovato il codice giusto perché ce ne sono più di uno. Quando ho scritto questo post ancora non era così ma da qualche tempo c'è il codice per la versione desktop e quello per la versione mobile. Tu devi cercare il codice nella sezione per il desktop. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      e poi riprova
      @#

      Elimina
  2. Buona sera Ernesto. Volevo chiedere una cosa. Mi piacerebbe usare solo l'immagine al posto del read more, ma spostarla nella parte destra del post e che abbia uno spostamento in basso e a destra al passaggio del mouse come quella che stai utilizzando nel tuo sito. Potrei sapere cosa bisogna aggiungere al codice per poter ottenere qualcosa di simile? Grazie

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Nella ultima parte di questo post c'è proprio questa opzione. Devi solo eliminare la parte del testo che inizia con < a e che finisce con < br/ > e che contiene data:post.jumpText
      In questo blog non ci sono immagini per il continua a leggere ma un CSS. Questo

      /* Jump Link Customize */
      div.jump-link {
      margin-top:5px;
      }
      div.jump-link a {
      color: #FFF;
      background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
      box-shadow: 2px 2px 2px #aaa;
      text-shadow:1px 1px 1px #ccc;
      text-align:center;
      padding:3px 12px;
      text-decoration:none;
      border-radius:8px;
      font-family:Georgia;
      font-size:14px;
      font-weight:bold;
      }
      div.jump-link a:hover {
      color:#a5f3e9;
      box-shadow: 1px 1px 1px #aaa;
      text-shadow:0px 0px 0px #ccc;
      text-decoration:none;
      position: relative;
      top:1px;left:1px;
      }

      da incollare sopra alla solita riga /b:skin

      @#

      Elimina
    2. Ti ringrazio per la risposta Ernesto

      Lucia Alocchi

      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