Sostituire con delle immagini i link "Post più vecchio", "Home", "Post più recente"

Ieri ho parlato di come togliere questi link in fondo al template di Blogger, esigenza particolare ma che mi è stata chiesta da diverse persone. Oggi invece spiego come personalizzarli con delle immagini, operazione che se ben fatta contribuisce sicuramente a dare un look migliore ai nostri blog.

Come sempre, prima di cominciare, invito a fare il backup del template di Blogger o provare prima le modifiche su un template di prova.

Per prima cosa, cercate delle immagini adatte allo scopo e pubblicatele su un vostro spazio personale, come Skydrive o Imageshack. Vanno benissimo, e fanno un gran bell'effetto se sposano bene il template, anche delle immagini animate (GIF).

Sostituire "Home" con un'immagine

Dalla bacheca, andate in Layout->Modifica HTML del template, selezionate "Espandi i modelli widget" e cercate la seguente porzione di codice (che nel caso di template particolarmente modificati, potrebbe essere leggermente diversa):

<b:if cond='data:blog.homepageUrl != data:blog.url'>   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>   <b:else/>   <b:if cond='data:newerPageUrl'>     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>   </b:if> </b:if>

E sostituite la parte evidenziata in rosso con la seguente riga:

<img src='indirizzo immagine' />

Dove "indirizzo immagine" è l'indirizzo dell'immagine che avete scelto di usare per il link Home. Ecco l'effetto di quest'operazione:

 

 

Sostituire "Post più recente" con un'immagine

Qui l'operazione è un po' diversa. Blogger usa due diverse etichette: se state visualizzando un singolo post, appare il link "Post più recente", se visualizzate un elenco di post appare il link "Post più recenti", quindi potremo (se vogliamo) utilizzare due diverse immagini per l'operazione.

Cercate questa porzione di codice:

<b:if cond='data:newerPageUrl'>   <span id='blog-pager-newer-link'>   <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>   </span> </b:if>

e sostituela in blocco con questa:

<b:if cond='data:newerPageUrl'>       <span id='blog-pager-newer-link'>       <b:if cond='data:blog.pageType != &quot;item&quot;'>         <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="indirizzo immagine per i post più recenti" /></a>       <b:else/>         <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="indirizzo immagine per il post più recente" /></a>       </b:if>       </span>     </b:if>

In questo caso le immagini da utilizzare sono due, ma se volete potete utilizzare anche la stessa in entrambe i punti, specie se state utilizzando una freccia piuttosto che una scritta:

 

 

Sostituire "Post più vecchio" con un'immagine

Anche in questo possiamo scegliere se utilizzare due diverse immagini o una sola. Cercate la seguente porzione di codice:

<b:if cond='data:olderPageUrl'>      <span id='blog-pager-older-link'>      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>      </span>    </b:if>

E sostituela con questa:

<b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>       <b:if cond='data:blog.pageType != &quot;item&quot;'>         <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='indirizzo immagine per i post più vecchi' /></a>            <b:else/>              <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='indirizzo immagine per il post più vecchio' /></a>       </b:if>          </span>     </b:if>

Sostituendo gli indirizzi delle immagini dove dovuto (anche qui se volete potete utilizzare sempre la stessa immagine). Ecco alla fine delle nostre modifiche come appariranno i link di navigazione in fondo al template:

 

 

Decisamente più accattivanti. Da notare che quando passate sopra col mouse, Blogger spiegherà comunque cosa succederà cliccando:

 

 

A questo punto sono curioso di vedere quali risultati otterrà chi si cimenterà in questa modifica.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!