Pubblicato il 27/01/11 - aggiornato il  | 20 commenti :

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



titoli post precedente e successivo

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

elemento pagina aggiunto fondo pagina

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
design modello html blogger

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.
 


20 commenti :

  1. grazie mille,
    molto utile questo post

    RispondiElimina
  2. @TobiaAlberti
    A parte che non mi hai incollato l'URL del tuo blog e quindi non posso controllare de visu, ma non so proprio a cosa sia dovuto questo comportamento :(

    RispondiElimina
  3. @TobiaAlberti
    Ho visto che hai messo le icone, forse nel tuo modello questa personalizzazione non funziona perfettamente e ha questo fastidioso effetto collaterale.

    RispondiElimina
  4. Te lo avevo detto che era un problema del tuo modello :)

    RispondiElimina
  5. Ciao, nella pagina normale funziona tutto correttamente. Ho notato però che nella pagina riepilogativa di tutti i post di una determinata etichetta la pagina precedente è sempre la prima pagina e non quella precedente.

    RispondiElimina
    Risposte
    1. @GiancarloChieco
      Non ci avevo mai fatto caso.

      Elimina
    2. Si può correggere in qualche modo oppure la consideriamo una cosa voluta e non ne parliamo più?

      Elimina
  6. Ernesto, ho usato questo codice e funziona benissimo.
    Volevo chiederti se posso cambiare la sua posizione e metterlo tra il post e i commenti.
    E poi se fosse possibile in home page non visualizzare il link "home page".

    RispondiElimina
    Risposte
    1. @Veronica
      Su tratta nel primo caso di una cosa che si potrebbe fare ma bisognerebbe spostare tutto il blocco di codice che riguarda i tre link in un punto diverso del modello. Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2011/01/come-sostituire-in-blogger-piu-recente.html
      Nel secondo caso potresti provare, sempre consultando il post precedente, a inserire due tag condizionali nel codice della homepage in questo modo

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>

      .......

      </div>
      </b:if>

      Le due righe aggiunte sono la prima e l'ultima. Per sapere cosa sono i tag condizionali vai qui

      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

      Elimina
    2. Funziona tutto alla grande! :) Grazie tantissime.
      Solo un'ultima cosa (ultima davvero ché in questi due giorni t'ho dato da lavorare parecchio):
      nella home page ho messo un solo post. Sotto c'è il titolo di quello che viene dopo. Ecco: vorrei che a partire da quel titolo, linkando, i post si aprissero con il comment form. Si può?

      Elimina
    3. @Veronica
      Si può fare tutto però non mi sembra una cosa che possa essere di interesse generale e non può essere affrontata in un commento.

      Elimina
  7. Ernesto,
    ciao.
    Sempre io, sempre in questo post.
    Vorrei chiederti una cosa. Da quando ho inserito questo codice succede che ho notato un'impennata di click in più. Cioè: quando qualcuno entra in una pagina, ho notato che automaticamente vengono cliccate le pagine adiacenti. Io però credo che per lo più sia un fatto automatico, non so come chiamarlo, piuttosto che un vero movimento dei lettori verso i link adiacenti. è possibile? Mi sai dire qualcosa?
    Grazie.

    RispondiElimina
  8. @Veronica
    Può essere che leggere effettivamente il titolo dei post adiacenti al posto di link generici stimoli la curiosità dei lettori a leggerli. Dipende anche dal tipo di layout, dal tipo di lettori e dal tipo di blog.

    RispondiElimina
  9. scusa, ma perché mi scompare di botto Post più vecchio? io sto scrivendo in successione e alla 6a pagina non vedo più Post più vecchio. Come devo fare per stabilizzarlo sto coso?

    RispondiElimina
    Risposte
    1. Ti è successo dopo questa modifica? Mi sembra strano. Se invece la tua è una domanda di carattere generale non saprei proprio come aiutarti. Posso solo dirti che difficilmente un lettore cliccherà sei volte su Post più Vecchio
      @#

      Elimina
    2. Questa sarebbe una bella implementazione per incrementare le visualizzazioni, magari aggiungendo un po' di css per personalizzare i due titoli, peccato per la presenza del Jquery che riduce le prestazioni.

      Elimina

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