Sostituire Post più Recente e Post più Vecchio con i Titoli degli articoli in Blogger.

Se aprite un articolo del vostro blog su Blogger e andate nella parte bassa, saranno visibili tre collegamenti rispettivamente al Post più recente, alla Home page e al Post più vecchio. 

Ricordo che ho già presentato delle personalizzazioni per quella zona del template che riguardano la eliminazione della scritta Iscriviti a: Commenti sul post (Atom) e la sostituzione dei tre collegamenti con altrettante icone.

Con questo post voglio illustrare un sistema per mostrare i titoli dei post invece dei generici Post più recente e Post più vecchio. In sostanza ecco come si visualizzerà la parte bassa dell'articolo dopo questa personalizzazione

Si tratta indubbiamente di una modifica molto carina che credo interesserà quelli che tra di voi sono più attenti alla grafica ma che darà informazioni ulteriori ai navigatori del vostro sito aumentandone l'usabilità.

Dovrà essere caricata sul blog una libreria javascript. In molti modelli può darsi che sia già presente. Per verificarlo andate su Design > Modifica HTML e espandete i modelli widget quindi cercate il file jquery/1.4.4/jquery.min.js. Nel caso non fosse presente cercate la riga </head> e immediatamente sopra incollate questo codice

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

Salvate il modello. Andate su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incollate quest'altro codice

<!-- Titolo dei post adiacenti a fondo pagina - inizio -->
<style type="text/css">
#blog-pager-newer-link {font-size:90%;width:250px;text-align:left;}
#blog-pager-older-link {font-size:90%;width:250px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");
});
});
</script>
<!-- Titolo dei post adiacenti a fondo pagina - fine - www.ideepercomputeredinternet.com -->

I dati evidenziati di rosso possono essere personalizzati e riguardano la dimensione dei caratteri, in percentuale su quelli ordinari del post, e la larghezza del link. Dopo aver cliccato su Salva, posizionate questo elemento pagina nella parte bassa del layout del blog

Nel caso piuttosto raro che non riusciate a trascinare l'elemento in una tale posizione, vi consiglio di inserire un altro Aggiungi un gadget nel piè di pagina. Salvate il modello e aprite un qualsiasi post per verificare il funzionamento della personalizzazione. Nell'ultimo post pubblicato non sarà ovviamente visibile il titolo dell'articolo più recente. Nel caso in cui abbiate dei problemi con la visualizzazione dei titoli lunghi, si possono inserire delle classi supplementari. Può essere fatto in due modi diversi. Il primo consiste nella modifica delle classi

.blog-pager-older-link, .home-link, .blog-pager-newer-link

che in genere sono riunite in un unico blocco di codice. In  modo più semplice si può andare su Design > Modifica HTML, cercare la riga ]]></b:skin> e, immediatamente sopra incollare questo codice

#blog-pager-newer-link a {
  max-width:250px;
  height:30px;
  overflow:hidden;
}
#blog-pager-older-link a {
  max-width:250px;
  height:30px;
  overflow:hidden;
}

che mostra solo la parte del titolo fino a una lunghezza massima e nasconde il resto. Naturalmente si possono personalizzare le dimensioni come crediamo più opportuno in funzione de layout del blog. Come detto le tre righe centrali dei due codici possono anche essere inserite nella classe già presente nel modello in questo modo

Questa personalizzazione funzionerà anche con le pagine delle etichette e con quelle di archivio. Se si punta con il mouse i titoli degli articoli sarà visualizzato il tooltip Post più recente e Post più vecchio.

Questo articolo mi è stato ispirato dal blog cinese ETBlue.