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 -->
<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;
}
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.
Niente da fare. Non sono riuscito....
RispondiEliminagrazie mille,
RispondiEliminamolto utile questo post
@TobiaAlberti
RispondiEliminaA 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 :(
@TobiaAlberti
RispondiEliminaHo visto che hai messo le icone, forse nel tuo modello questa personalizzazione non funziona perfettamente e ha questo fastidioso effetto collaterale.
Te lo avevo detto che era un problema del tuo modello :)
RispondiEliminaCiao, 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@GiancarloChieco
EliminaNon ci avevo mai fatto caso.
Si può correggere in qualche modo oppure la consideriamo una cosa voluta e non ne parliamo più?
EliminaOnestamente non ne ho idea :)
EliminaBene. Grazie comunque.
EliminaErnesto, ho usato questo codice e funziona benissimo.
RispondiEliminaVolevo 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".
@Veronica
EliminaSu 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
Funziona tutto alla grande! :) Grazie tantissime.
EliminaSolo 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ò?
@Veronica
EliminaSi può fare tutto però non mi sembra una cosa che possa essere di interesse generale e non può essere affrontata in un commento.
Va bene. Grazie di tutto.
EliminaErnesto,
RispondiEliminaciao.
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.
@Veronica
RispondiEliminaPuò 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.
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?
RispondiEliminaTi è 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@#
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