Cambiare Post più recenti, più vecchi con icone

In quasi tutti i template blogger blogspot i link di navigazione, post più rcente, post più vecchio e home, sono di solo testo. Dopo aver capito come modificare il testo , ora vi voglio spiegare come sostituire il testo con delle icone o immagini per rendere più bello il template.

Come sostituire post più vecchio, home, post più recente con delle immagini?

La prima cosa da fare è realizzare delle icone che si integri con il layout del nostro template o più semplicemente ne cerchiamo quello che più ci piace nei molti siti gratiti di immagini e icone.
Appena avete trovato le tre icone , freccia destra, freccia sinistra e home andiamo su blogger in Modifica HTML , espandiamo il tutto e clicchiamo Ctrl e F sulla tastiera, in basso apparirà una casella di ricerca e inserisci  <b:includable id='nextprev'> , trovete velocemente il campo che dovrà essere modificato

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FRECCIA SINISTRA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FRECCIA DESTRA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL HOME PAGE'/></a>
</div>
<div class='clear'/>
</b:includable>

ovviamente nel vostro codice attuale troverete <data:newerPageTitle/>  , <data:olderPageTitle/> , <data:homeMsg/> che dovrà essere sostituito con i tre tag <img> in rosso.
Ora per poter metterli nella posizione giusta inserite nel css un comando, quindi prima di ]]></b:skin>  aggiungete questo codice:

#blog-pager-newer-link {  float: left; }
#blog-pager-older-link {  float: right; }
#blog-pager { text-align: center;  }

con cui potremo modificare anche le dimensioni delle immagini se lo volessimo.

Vi suggerisco qualche esempio di icone per facilitarvi il lavoro.