Blogger: pulsanti del Post più Recente e del Post più Vecchio fluttuanti

Come rendere fluttuanti i link Post più Recente e Post più Vecchio in Blogger mostrandoli come pulsanti fissi ai lati dell'area principale del layout

Recentemente mi sono imbattuto in una personalizzazione di un blog su Blogger che mi è piaciuta molto e che quindi ho pensato di realizzare in proprio, per poi condividerla con i lettori. In fondo a ogni pagina di Blogger ci sono tre icone di navigazione: Post più Recente, Home e Post più vecchio che non vengono praticamente usate in quanto poco pratiche.

L'idea è quella di rendere fluttuanti i due pulsanti Post più Recente e Post più Vecchio, e di visualizzarli all'incirca a metà pagina, in modo che il lettore si possa facilmente spostare da un post all'altro secondo la naturale cronologia. Non ho invece ritenuto necessario intervenire sul bottone Home che apre la Homepage.

Questi pulsanti sono utili nel momento in cui si sia aperto un post, mentre diventano inutili in pagine di etichette e di archivio. Ho anche pensato di renderli gradevoli di aspetto inserendo una trasizione CSS3,  che ne modifica i colori quando vengono puntati dal cursore. La personalizzazione ho ritenuto di applicarla solo alla versione desktop, in quanto due bottoni fluttuanti non avrebbero avuto lo spazio necessario in quella mobile.

Anche in passato mi ero occupato della personalizzazione di questo aspetto del layout. In un primo articolo avevo mostrato come sostituire tali bottoni con i titoli dei post. In un altro articolo avevo invece illustrato come mostrare, oltre ai titoli dei post, anche la miniatura della loro prima immagine. In entrambi i casi però era necessario utilizzare una libreria esterna di javascript, segnatamente la jQuery.  

La personalizzazione che invece vado a presentare non utilizza il javascript, ma solo il CSS, e quindi non incide sulla velocità di caricamento della pagina. Inoltre è piuttosto semplice da applicare al Tema di Blogger.

Oltre a calibrare bene la posizione dei bottoni fluttuanti, si possono anche scegliere i colori, per adattarli allo stile del nostro sito, e i simboli da visualizzare all'interno dei pulsanti, che possono essere quelli del minore e maggiore, quelli delle frecce a sinistra e a destra, o altri ancora, a scelta dell'utente.

Si va su Bacheca -> Tema -> Backup/Ripristino e si salva il Tema, se le modifiche non andassero a buon fine. Si va poi su Tema -> Modifica HTML e si cerca la riga </head>. Subito sopra incolliamo questo codice

<!-- Post più recente post e più vecchio fluttuanti - Inizio -->
<b:if cond='!data:blog.isMobile'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.blog-pager-older-link, .blog-pager-newer-link  {
     position: fixed;
     text-align:center;
     font-size:24px;
     font-weight:bold;
     top: 450px;
     width: 75px;
     height:30px;
     padding: 8px 2px;
     border: 2.5px solid #1FE0C9;
     border-radius: 12px;   
}
.blog-pager-older-link {margin-left: 345px;}
.blog-pager-newer-link {margin-left: -90px;}
a.blog-pager-newer-link, a.blog-pager-older-link {text-decoration:none; background-color:#fff; color:#f95b5b !important;}
a:hover.blog-pager-newer-link, a:hover.blog-pager-older-link {color:#1FE0C9 !important; background-color:#fedede;  border: 2px solid #f00; transition:all 0.3s ease 0s;}
</style>
</b:if>
</b:if>
<!-- Post più recente post e più vecchio fluttuanti - Fine -->

Si cerca quindi questa riga  <b:includable id='nextprev'> e si scorre il codice del  Tema verso il basso. Il tag <data:newerPageTitle/> è quello che inserisce la scritta Post più Recente, mentre il tag <data:olderPageTitle/> è quello che inserisce la scritta Post più Vecchio. Questi due tag di Blogger vanno sostituiti con quelli che vogliamo diventino i simboli da visualizzare nei pulsanti.

Ecco una piccola lista delle Entità che debbono essere digitate e del risultato che si ottiene:

1. &lt;&lt        per avere questo risultato       <<
2. &gt;&gt;     per avere questo risultato       >>
3. &#8592;    per avere questo risultato       ←
4. &#8594;    per avere questo risultato      →
5. &#8656;    per avere questo risultato       ⇐
6. &#8658;    per avere questo risultato       ⇒

I codici Unicode delle frecce che puntano a sinistra vanno sostituiti a <data:newerPageTitle/>, mentre quelli delle frecce che puntano a destra vanno sostituiti a <data:olderPageTitle/>. Si può scegliere a piacere uno dei tre stili mostrati sopra oppure scegliere altri simboli. Si salva il Tema.

POSIZIONAMENTO DEI PULSANTI FLUTTUANTI

Entrambi i pulsanti sono stati posizionati a una distanza di 450 pixel dalla parte alta della pagina. Si può naturalmente modificare questo numero, per mostrarli più in alto o più in basso. 

Il posizionamento più importante è però quello orizzontale. I due CSS evidenziati di giallo configurano una posizione rispettivamente di 345 pixel, per il bottone del Post più vecchio, e di -90 pixel, per quello del Post più Recente. Aprite quindi un post, che non sia l'ultimo pubblicato, per visualizzare entrambi i bottoni e per adattare questi valori al vostro layout. I numeri della distanza dalla sinistra (margin-left) adatti al vostro Tema potrebbero essere anche molto diversi da quelli che sono serviti per questo modello. Ricordate ovviamente che il bottone del Post più Recente deve stare sulla sinistra e quello del Post più Vecchio sulla destra.

Passando con il mouse sopra ai bottoni si continueranno a visualizzare i due tooltip Post più Recente e Post più Vecchio. Controllate anche che cliccandoci sopra si apra effettivamente il post precedente e quello successivo.

PERSONALIZZAZIONI DEI COLORI E DELLE DIMENSIONI

Ricordo brevemente altre personalizzazioni che possono essere modificate:

1. font-size:24px; è la dimensione dei caratteri dei simboli mostrati nei bottoni
2. font-weight:bold; è per mostrare i simboli in grassetto
3. top: 450px; è appunto la distanza dalla parte alta della pagina
4. width: 75px; e height:30px; sono le dimensioni dei pulsanti
5. padding: 8px 2px; è la distanza dei simboli dal bordo rispettivamente in verticale e orizzontale
6. border: 2.5px solid #1FE0C9; determina il colore e lo stile del bordo
7. border-radius: 12px; è l'arrotondamento dei pulsanti
8. background-color:#fff;  e color:#f95b5b;  sono colore di sfondo e colore iniziale del simbolo
9. color:#1FE0C9; e background-color:#fedede; per i colori di testo e sfondo al passaggio del mouse
10. border: 2px solid #f00; è lo stile del bordo al passaggio del cursore
11. transition:all 0.3s ease 0s; è la durata della transizione scelta in 3 decimi di secondo.

Le prime due righe del codice sono i tag condizionali, necessari per mostrare i pulsanti fluttuanti solo nella versione desktop e solo nei post. La posizione fissa dei bottoni si ottiene con il tag position: fixed;.