Pubblicato il 13/09/09 - aggiornato il  | 2 commenti :

Come inserire un'immagine al posto della scritta "Ulteriori Informazioni" in un salto in Blogger.

Per comprendere il significato di questo articolo dovete prima aver letto i due post seguenti

  1. Blogger introduce il read more per la pubblicazione dei sommari degli articoli -
  2. Come visualizzare la scritta "Ulteriori Informazioni" nei modelli personalizzati di Blogger -

Se andate in Layout > Modifica HTML, dopo aver espanso i modelli widget, sia nel caso in cui abbiate un modello originale di Blogger che in quello di un template personalizzato dovrete comunque avere questo codice

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

poco sopra alla riga

<div class='post-footer'>

Se al posto di Ulteriori Informazioni o un testo analogo che avete selezionato in Modifica Gadget Post, volete inserire un'immagine per accedere all'articolo completo dovete procedere in questo modo

  1. Creare o acquisire l'immagine che volete inserire al posto del link
  2. Caricarla nel web in un hosting gratuito tipo SkyDrive
  3. Acquisirne l'indirizzo. Ecco un esempio di immagine che potrebbe essere usata per il read-more

Modificare il precedente codice sostituendo <data:post.jumpText/>, evidenziato in rosso, con <img src="URL_immagine" border="0" alt="Read More" />. Dove al posto di URL_immagine si inserisce l'indirizzo dell'immagine caricata nel web e al posto di Read More il testo che credete più opportuno. Questo testo si vedrà solo nel caso in cui un browser non riuscisse ad aprire l'immagine.

Un esempio di codice modificato potrebbe essere questo

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><img src="http://fb647g.blu.livefilestore.com/y1pYUMWDgOhS-WN2NoQKj1oPEOmWVxwA6H4_7Z-g_zKlJ55A6enYUV8yAmiqVR1x_8fD-OBvDy81rzu9nPjYpFLzw/Read-More.png" border="0" alt="Read More" /></a> 
      </div>
    </b:if>

e l'inserimento nel modello al posto dell'altro modifica l'aspetto dei sommari degli articoli in questo modo

      immagine-salto-ulteriori-informazioni

In alcuni modelli molto sofisticati dal punto di vista della grafica potrebbe essere un tocco ulteriore di eleganza.



2 commenti :

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