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

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

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

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

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




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ì