Inserire i titoli degli Articoli al posto di Post più Recenti e Post più Vecchio

Come sostituire la dicitura Post più Recente  e Post più Vecchio con i Titoli degli Articoli in un Blog di Blogspot.
Quando viene aperto un articolo del vostro blog su Blogger e si visita la pagina nella parte bassa, saranno ben visibili i tre collegamenti rispettivamente al Post più recente, alla Home page e al Post più vecchio. La grafica può sicuramente cambiare da modello a modello ma in definitiva non sarà molto diversa da questa.



post più recente più vecchio homepage blogger


Con questo articolo viene illustrato un sistema per mostrare i titoli dei post al posto dei generici Post più recente e Post più vecchio.. Questo dovrebbe essere il risultato finale.

 titoli post precedente e successivo

Per ottenere questo tipo di grafica, dovrà essere caricata sul blog una libreria javascript. In molti modelli può darsi che sia già presente. Per verificarlo dobbiamo andare su Design > Modifica HTML ed espandere i modelli widget e cercare il file jquery/1.4.4/jquery.min.js. Nel caso non fosse presente cercare la riga </head> dove  immediatamente sopra si andrà ad inserire ed incollare questo codice
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
Adesso dobbiamo Salvare il modello quindi andare su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incollare 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 – http://weblifeonline.blogspot.com –>

Dove i dati inseriti in questa tabella e più precisamente I valori evidenziati di rosso possono essere personalizzati e riguardano la dimensione dei caratteri, nei valori in percentuale su quelli ordinari del post, e la larghezza del link. Dopo aver apportato le modifiche cliccare su Salva, e posizionare questo elemento pagina nella parte bassa del layout del blog. Nel caso, piuttosto insolito, che non si riesca a trascinare l'elemento in quella posizione, il consiglio è di inserire un altro Aggiungi un gadget nel piè di pagina. Quindi Salvare il modello e aprire 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 si dovesse incontrare dei problemi con la visualizzazione dei titoli lunghi, si possono inserire delle classi supplementari. E questo può essere fatto in due modi diversi. Il primo consiste nella modifica delle classi
.blog-pager-older-link, .home-link, .blog-pager-newer-link
dove in genere sono riunite in un unico blocco di codice. L’altro modo senz’altro più semplice è quello di andare su Design > Modifica HTML, cercare la riga ]]></b:skin> e, immediatamente sopra andare ad  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;
}

dove si può ottenere che venga mostrata solo la parte del titolo fino a una lunghezza massima e di nasconde il resto. Naturalmente, anche in questo caso, si possono personalizzare le dimensioni come preferiamo anche in funzione del layout del blog. Come precedentemente 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

Questo tipo di personalizzazione funzionerà anche con le pagine delle etichette come pure con quelle di archivio. Adesso, se si punta con il mouse i titoli degli articoli sarà visualizzato il tooltip Post più recente e Post più vecchio.

Fonte: ideepercomputeredinternet.com

3 commenti:

  1. Great, I never knew this, thanks.

    cialis

    RispondiElimina
  2. ciao,
    ho installato questo codice. vorrei chiederti se cliccando sul titolo di un post si possa aprire il post in html. vedo che il post rimane chiuso (sopra nella barra vedo maxresult).
    insomma quando vado a cliccare sul post successivo il link è:
    http://lasciadisofia.blogspot.it/search?updated-max=2012-05-22T13:12:00%2B02:00&max-results=1

    invece vorrei che fosse:
    http://lasciadisofia.blogspot.it/2012/05/collezione-primavera-2012.html

    ho chiesto altrove ma niente.
    Grazie.

    RispondiElimina
  3. @ Veronica
    ciao, e scusa il ritardo nella risposta..
    fammi capire, da quello che mi dici hai installato il codice e, i link fondo post si vedono correttamente (per intenderci questi vanno al posto della dicitura; post più vecchi, ecc), il problema ti nasce quando vai a cliccare sopra di esso che ti compare un link praticamente chiuso. Ti chiedo il pezzetto di codice inizio post lo hai inserito immediatamente sopra la riga /head?

    RispondiElimina

Menu di navigazione per Blog colore Rosso

Menu di navigazione per Blog colore Orange e Blu

Widget Ultimi Post con elemento pagina HTML/Javascript

Widget: ultimi articoli per singola categoria, es. "Internet"