Come sostituire in Blogger Post più recente, Home e Post più vecchio con tre icone.

Se si apre un post di Blogger che non sia l'ultimo pubblicato, in fondo alla pagina, dopo tutta la sezione dei commenti, sono visualizzati tre link: Post più recente, Home page e Post più vecchio. Il loro significato è ovvio così come è ovvia la destinazione di ciascun collegamento. Per rendere più carina e usabile la parte finale dei post, si possono introdurre le pagine di navigazione. 

Questa personalizzazione con i nuovi modelli non sempre riesce. Vediamo come sia possibile sostituire questi anonimi link con tre immagini per rendere il nostro blog più originale. Per prima cosa si dovrebbero trovare delle icone che fanno al caso nostro. Ci sono un sacco di siti in cui cercarle: Iconspedia, Iconza e IconFinder. Quelle che ho utilizzato come prova per realizzare questo post le ho trovate su IconFinder. 

L'obiettivo è sostituire queste tre icone a questi link. Il consiglio è di provare questa personalizzazione con molta cautela e di farlo solo dopo che si è salvato e inserito in una cartella a futura memoria il modello iniziale, specie se si ha un template realizzato con il Designer Modelli.

Caricate le tre icone su un hosting come Picasa, SkyDrive o analogo quindi acquisitene gli URL diretti. Ecco quelle che ho scelto
                     

Cliccando sopra a ciascuna di esse potete acquisirne l'URL dalla barra del browser. Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate questo codice

<b:includable id='nextprev'>

cancellatelo fino alla fine del blocco cioè fino alla riga

</b:includable>

Sostituitelo con quest'altro codice

<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>

Adesso cercate la linea
]]></b:skin>

e immediatamente sopra incollate queste nuove classi di stile

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

Salvate il template. Ecco come apparirà la parte finale di ciascun post

Naturalmente voi visualizzerete le icone di cui avete immesso l'indirizzo. In ciascuna immagine ci sarà un collegamento che porterà rispettivamente al post precedente, alla homepage e al post successivo.