Sostituire Post più recente e Post più vecchio con il Titolo dell'articolo - seconda versione -

Avevo illustrato il procedimento per sostituire a Post più recente e Post più vecchio il titolo dei rispettivi articoli. Ricevo adesso da Giorgiogal una nuova versione del javascript che rende la parte finale della pagina ancora più navigabile. Ecco l'aspetto della parte bassa di tutti i post

Si vedranno i Titoli dei due post adiacenti a quello visualizzato con le scritte Pagina precedente e Pagina successiva, espressioni che comunque potranno essere modificate. Saranno inoltre visibili anche due frecce che all'occorrenza potranno essere sostituite da altre più adatte al layout del vostro blog. Rispetto alla precedente versione è stata introdotta anche un salto di riga per visualizzare i Titoli sopra a Pagina precedente e successiva.

L'installazione è simile a quella già vista nell'altro post. Si va su Design > Modifica HTML e subito sopra a </head> si incolla la riga

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

Si salva il modello. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<style type="text/css">
#blog-pager-newer-link {font-size:80%;width:250px;text-align:right;}
#blog-pager-older-link {font-size:80%;width:250px;text-align:left;}
</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").html(newerLinkTitle + "<br><b>Pagina successiva </b><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQCpGpD8_oA-XzeAAEYULDrAtheeLM7GMdGjGJL_hosl1Hqb8LFxbNkbdBywVNt9Gyma5Fwfm5EB8eeYGQ_fJiFmai2WzNXxghlcFQxUGd825MjtYhBtB3ed0EtP3Px9kccSQLVDJnOCO/'/>");
});
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").html(olderLinkTitle + "<br><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaCReBVjoT9gT70oXLsccpB3ZXeCHXruJOS4YQBKboginJPpY0PHnnoRhJBM5peDbRLs7h_UBZGVQRuLy0g_WYwtM8XMYfuaf-MOKQy0U1hcCM0EMknF8IxY23DvOIJRb3NJPIYHXAU-nC/'/><b> Pagina precedente</b>");
});
});
//-->
</script>

Dove si possono personalizzare tutti i dati e il testo evidenziato in rosso. Come vedete Pagina precedente e successiva sono tra i tag <b> e </b> sono cioè in grassetto. Se non vi piace potete eliminare i due tag. Gli URL delle due frecce sono stati acquisiti da Picasa e possono essere sostituiti da quelli di altre icone. Salvate l'elemento pagina e posizionatelo con il mouse nella parte bassa del layout.

Ritornate in Design > Modifica HTML e cercate la riga ]]></b:skin>. Immediatamente sopra incollate questo codice

#blog-pager-newer-link {
float: right;
margin-right: 13px;
}
#blog-pager-older-link {
float: left;
margin-left: 13px;
}

Se usate il Designer Modelli potete incollarlo in Avanzato > Aggiungi CSS come mostrato nello screenshot

quindi cliccate in alto a destra su Applica al blog per salvare le modifiche. I margini evidenziati in rosso possono essere cambiati a seconda delle esigenze. Se volete vedere questa personalizzazione dal vivo andate su Questa metà della terra e aprite un qualsiasi articolo, per esempio "Un conflitto morale".