Pubblicato il 14/12/11e aggiornato il

Come eliminare o cambiare di posizione a Post più Recente, Home e Post più vecchio su Blogger.

Alla fine del post in quasi tutti i modelli di Blogger ci sono i tre link Post più recente, Home page e Post più vecchio. Se si è aperto il primo articolo mancherà ovviamente il primo link. Si tratta di un sistema di navigazione all'interno del blog che mi risulta essere poco usato. Tanto che in alcuni template si è preferito optare per una navigazione basata sulla numerazione delle pagine.
A seguito di uno scambio di opinioni con la mia amica Soffio di Dea ho pensato fosse utile scrivere un articolo per illustrare come spostare o eventualmente nascondere questi tre link. Ricordo che ho già pubblicato un post su come sostituire questi collegamenti con delle icone.

COME NASCONDERE TUTTI E TRE I LINK
I collegamenti in questione hanno più o meno questa forma
link-blogger-navigazione
e si trovano nella parte bassa dell'area del post sotto al link o al modulo per postare i commenti. Si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Prima è sempre consigliabile fare un backup di sicurezza del template. Il codice che mostra i link è formato da una sola riga
<b:include name='nextprev'/>
Per nascondere alla vista tutti e tre i link si utilizza il tag display:none; e si modifica il codice in questo modo
<div style="display:none;">
 <b:include name='nextprev'/>
  </div>
come mostrato nel seguente screenshot
link-navigazione-blogger
Dopo che si è salvato il modello, i tre collegamenti risulteranno invisibili ai navigatori.

COME MODIFICARE LA POSIZIONE DEI TRE COLLEGAMENTI POST PIU' RECENTE, HOME PAGE E POST PIU' VECCHIO
La riga di codice dei tre link, nella posizione in cui si trova nativamente, è già compresa tra dei tag condizionali che consentono di vedere i collegamenti solo nei post. Se vogliamo modificare la posizione dobbiamo aggiungere a questa riga appunto dei tag condizionali in questo modo
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:include name='nextprev'/>
   </b:if>
per mostrare i link solo negli articoli. Vediamo ora in quali posizioni si possono inserire.

METTERE I LINK TRA LA FINE DEL POST E L'INIZIO DEI COMMENTI
Occorre sempre andare in Modello > Modifica HTML > Procedi e espandere i modelli widget. Il codice colorato di verde deve essere incollato subito prima di
</b:includable>
  <b:includable id='status-message'>
Dopo aver salvato il modello si avrà un effetto di questo genere
navigazione-blogger


INSERIRE I LINK DI NAVIGAZIONE PRIMA DI CIASCUN POST
Per inserire i collegamenti nella parte alta, prima del contenuto dell'articolo, occorre sempre incollare il codice colorato di verde subito sotto questa riga
<b:includable id='post' var='post'>
o subito prima di quest'altro codice
<div class='post hentry'>
Non sto a ripetere che occorre espandere i modelli widget e salvare il modello. I link saranno allora così posizionati
posizionamento-link-navigazione


COME INSERIRE I LINK DI NAVIGAZIONE AL DI SOPRA DI TUTTI GLI ELEMENTI DEL BLOG ESCLUSO L'INTESTAZIONE
Se si opta per visualizzare i link sopra anche alla data degli articoli, forse è il caso di togliere i tag condizionali e di mostrare i collegamenti di navigazione in tutte le pagine del blog. Il codice da incollare in questo caso sarà semplicemente questo
<b:include name='nextprev'/>
che dovrà essere incollato sotto alla riga
<b:includable id='main' var='top'>
In questo ultimo caso si otterrà questo risultato
link-navigazione-blogger[5]



COME PERSONALIZZARE L'ASPETTO DEI TRE LINK DI NAVIGAZIONE
La classe che sovrintende all'aspetto dei tre collegamenti di navigazione è blog-pager. Possiamo quindi creare un CSS per mettere un background o modificare il colore dei link visitati o puntati dal mouse. Si può anche inserire un bordo anche arrotondando gli angoli (questo visibile con Chrome, Firefox e Internet Explorer 10). Detto codice andrà incollato sopra alla riga ]]></b:skin> e potrebbe essere simile a questo
/* STILE DEI LINK DI NAVIGAZIONE */ #blog-pager {
background:#ffeae9; /* Colore di sfondo */
border:2px dotted #003366; /* Stile del bordo */
padding:10px;
/* Bordi arrotondati */ border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#blog-pager a {
background:#ffeae9; /* Colore di sfondo */ color:#940f04; /* Colore dei link */ }
I parametri colorati possono essere modificati ricordando i codici dei colori e lo stile dei bordi. Il valore 8px rappresenta il raggio di curvatura dell'arrotondamento. Dopo aver salvato il modello, l'aspetto dei tre link diventerà più o meno così
personalizzare-link-navigazione




19 commenti :

  1. Ciao Ernesto non vorrei sembrarti pedante , ma mi sa che nel primo esempio (come nascondere tutti e tre i link), hai saltato dopodisplay:none; una " nella modifica del codice , mentre lo screenshot è giusto.Ciao

    RispondiElimina
  2. @Massimiliano
    Hai perfettamente ragione. Ti ringrazio moltissimo perché magari i meno esperti non avrebbero potuto salvare il modello. Il tempo è sempre troppo poco e questo succede quando si scrivono i post troppo di fretta :(

    RispondiElimina
  3. Una domanda che magari non c'entra niente con questo post: come faccio a modificare una categoria in blogger (etichetta). Metti caso che voglio correggere un errore di ortografia avendo gia pubblicato in questa categoria parecchi post (ovviamente la cosa più semplice è entrare nel post e fare la correzione manuale uno a uno).
    Grazie

    RispondiElimina
  4. @Hugo
    E' successo a tutti di creare delle etichette con errori di battitura. Leggiti questo post su come gestire queste problematiche
    http://www.ideepercomputeredinternet.com/2011/10/come-sostituire-una-etichetta-con-un.html
    con annesso video-tutorial.

    RispondiElimina
  5. Ernesto pardon ma per metterli invece nell'area footer in basso a tutto? Si può?

    RispondiElimina
  6. @Soffio di Dea
    Sì certo, individui l'inizio del footer nel tuo modello e subito sopra ci incolli la riga di codice dei tre link oppure anche alla fine del footer. Fai delle prove salvando il modello, è la cosa migliore.

    RispondiElimina
  7. sì infatti hai ragione devo provare, per ora ho messo il n° di pagine... poi ala fine vedo cos'è meglio. Altro quesito per te: in molti template ho visto che il primo articolo è più grande di quelli sottostanti. Ho capito che va inserito in elementi di pagina... ma credo ci sia poi un codice da inserire nel template. Quando avrai tempo e se avrai voglia... :) grazie di tutto come sempre, kiss

    RispondiElimina
  8. Complimenti per il post! Io però preferisco tenerli. Noto che quando sono in altri blog di blogger li sfoglio di frequente. Perciò voglio che chi visita il mio blog deve avere un certo orientamento cronologico. :)

    RispondiElimina
  9. Ho provato a spostare in altra zona i link per gli altri post, dopo aver precedentemente sostituito i termini "post più recente" "post più vecchio" con i nomi dei post.
    E' comparso un problerma. Il nome del post più vecchio è ripetuto dalle due alle quattro volte di seguito una sotto l'altra. Cosa posso fare?

    RispondiElimina
  10. @Giancarlo Chieco
    Rimetti le cose come stavano prima, almeno che non ti riferisca alla homepage e che tu ti sia dimenticato di inserire i tag condizionali

    RispondiElimina
    Risposte
    1. Ernesto, sai, anche io ho lo stesso problema. viene ripetuto il link del post più vecchio.

      Elimina
    2. Io ho usato questo codice però
      http://www.ideepercomputeredinternet.com/2011/01/sostituire-post-piu-recente-e-post-piu.html

      e sto provando a cambiare la posizione con il codice che consigli quassù.

      Elimina
  11. Ciao Ernesto...

    sto riscontrando un problemino con una cosa che volevo realizzare...

    come puoi vedere nella home page va tutto bene, ma aprendo un articolo vorrei che nel piccolo box a destra i due link puntassero all'articolo precedente e quello successivo se presenti...

    cosa dici è possibile?

    ti lascio il link del blog...http://www.lucachirico.com

    RispondiElimina
    Risposte
    1. I link per puntare all'articolo precedente e successivo esistono sono Post più recente e Post più vecchio. Potresti tentare di adattarli. Mi sembra però una impresa. Ti lascio un link che potrebbe esserti utile
      http://www.ideepercomputeredinternet.com/2011/12/come-eliminare-o-cambiare-di-posizione.html

      Elimina
  12. Gent.mo Ernesto, ho seguito la procedura da te indicata in questo post per cancellare il link home page.
    Nella pagina principale il link home page è sparito come puoi constatare tu stesso visitando questo link: http://www.donatelloamabile.com/
    invece in una delle pagine statiche che sto creando e collegherò alla pagina principale non riesco in nessun modo a far sparire il link "home page" e nemmeno il collegamento a google+ come puoi vedere: http://www.donatelloamabile.com/p/design.html
    ho provato anche ad incollare:
    #blog-pager {
    display:none;
    }
    nella sezione “Design”>Designer di modelli” nel menu “Avanzato”>”Aggiungi CSS” senza alcun risultato. Come risolvere? grazie.

    RispondiElimina
    Risposte
    1. Su due piedi non saprei come risolvere. Se continua a vedersi nelle pagine statiche. Sei sicuro che modificando la riga

      <b:include name='nextprev'/>

      in questo modo

      <div style="display:none;">
      <b:include name='nextprev'/>
      </div>

      si vedono sempre anche nelle pagine statiche?
      @#

      Elimina
  13. grazie come sempre col tuo aiuto risolvo. è possibile eliminare il collegamento dell'header della pagina statica di prova (http://www.donatelloamabile.com/p/design.html) alla home page? cliccando sulla header, come adesso avviene, non vorrei tornare alla home page. Posso modificare qualcosa per rendere quella intestazione non linkata? grazie

    RispondiElimina
    Risposte
    1. Cliccando sull'header in qualsiasi pagina si va sempre alla homepage. Si potrebbe analizzare il tuo modello per vedere se fosse possibile togliere il link ma francamente non vedo l'importanza di una tale modifica.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.