Pubblicato il 28/01/11 - aggiornato il  | 13 commenti :

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

pagina precedene successiva

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='http://lh3.ggpht.com/_nT13UtBmmiU/TULg8zoBtAI/AAAAAAAARnY/jCmCcvq4zOc/arrow_fwd.gif'/>");
});
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='http://lh6.ggpht.com/_nT13UtBmmiU/TULg82u4_GI/AAAAAAAARnU/5mAMVRcx_d4/arrow_bck.gif'/><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

modello avanzato css

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





13 commenti :

  1. Hai sempre una soluzione per tutti e per tutto. Ma come fa?
    Grazie...

    RispondiElimina
  2. Fatto!
    Funziona!
    Solo che l'inserimento del Css dal designer Modelli non è andato a buon fine, con il modello Simple che ho ora. MA..aggiungengo il codice direttamente nell'html, la modifica è riuscita perfettamente!

    Grazie mille!

    P.s. ho anche inserito il tuo antipixel per ringraziarti più concretamente. I tuoi articoli mi hanno aiutato dal primo vagito del mio blog ma ho aspettato di avere una grafica decente per ospitarti da me ^.^

    RispondiElimina
  3. @Sarù
    Anch'io preferisco sempre inserire i CSS nel modello invece che con il Designer Modelli che ancora non è molto affidabile per le modifiche del codice. Ti ringrazio per l'antipixel ^__^

    RispondiElimina
  4. ciao! bellissimo tip!
    ho solo un dubbio, in media più o meno quanto può appesantire il caricamento della pagina?

    RispondiElimina
  5. @Santiago
    Dopo averlo inserito puoi controllare negli Strumenti per Webmaster > Funzioni sperimentali > Prestazioni del sito
    Dipende dalla grandezza delle immagini. Con le piccole icone di questo codice praticamente non se ne accorge neppure.

    RispondiElimina
  6. Caro Parsifal grazie di questa nuova segnalazione. Sono andato sulle funzioni, ho scaricato sia page speed che firebug ma ora mi sono bloccato perchè non riesco a far partire la verifica con page speed. Help!!!!! Grazie come al solito e caffè pagato

    RispondiElimina
  7. @Stefano
    Non ho mai usato Page Speed e non serve per Blogger. Firebug è solo per i professionisti del web. Devi solo vedere quanti secondi ci mette il tuo sito a caricare. C'è un grafico. Dopo che hai inserito la nuova personalizzazione, aspetti qualche giorno, perché i dati non sono in tempo reale e guardi di quanto è aumentato il tempo di caricamento (se è aumentato). In genere i blog su Blogger sono vicini agli 8 - 10 secondi

    RispondiElimina
  8. mi hai aperto un mondo! :O non mi ero reso conto di quello strumento nuovo. Grazie mille :) appena posso ti aggiungo anch'io nei miei antipixel :)

    PS: io mio blog dice che si aggira attorno ai 4,7 secondi, però sottolinea che è più lento del 72% dei siti..
    A giudicare dalla panoramica sembrerebbe lentissimo ma se dici che il tempo medio di blogger si aggira attorno agli 8 - 10 secondi... cosa ne pensi?

    RispondiElimina
  9. @Santiago
    Diciamo che 8-10 secondi sono per i blog con molte immagini. Se si postano poche immagini e molti articoli di testo è più basso. Il tuo valore è ottimo. Il fatto che sia più lento del 72% dei siti è naturale visto che la maggior parte sono senza contenuti o quasi.

    RispondiElimina
  10. La tua indicazione mi è servita e ho fatto un pò di restyling al blog (il tempo di caricamento era troppo alto). Grazie ancora

    RispondiElimina
  11. Ciao Parsi, sai come fare per farlo apparire subito dopo il post e non in fondo, dopo i commenti?
    laggiù, se ci sono diversi commenti, diventa quasi invisibile, inutile.
    grazie maestro!

    RispondiElimina
  12. @Giorgiogal
    Troppo buono... non sono un maestro :)
    Nel modello di Blogger ci sono le tag che inseriscono Post più recente e Post più vecchio e sono quelle di cui si è modificato lo stile. Si potrebbe tentare di spostare più in alto nel template quei blocchi di codice, cioè
    < span id='blog-pager-newer-link' > e
    < span id='blog-pager-older-link' >
    Non solo queste due righe ma tutto il blocco relativo.
    Bisogna farlo con accortezza ^_^

    RispondiElimina
  13. bell'articolo,peccato che almeno per ora questa modifica non funzioni.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy