Imagino che abbiate visto link di navigazione tra i post (come " Post più recente - Post più vecchio" ) su alcuni siti, che invece delle normali didascalie includevano altre cose come icone, frecce e simili.
È molto facile da fare su Blogger, ma non è così facile sostituire quelle etichette con i titoli dei post corrispondenti , in particolare quelli pubblicati subito prima e subito dopo quello che state leggendo.
Beh, ho detto che non era così facile, ma jQuery semplifica molto le cose. Si tratta solo di andare ai post collegati, guardare i loro titoli e visualizzarli al posto delle etichette originali. Questa è l'idea, e detta così, può sembrare laborioso o quasi impossibile, ma per cose del genere, JavaScript esiste.
Una volta fatto ciò che spiegherò in dettaglio più avanti e con un po' di CSS, i link originali verranno sostituiti con qualcosa di simile a questo:
La prima cosa che dobbiamo fare -e l'unica cosa se siamo d'accordo con lo stile dei precedenti per i nuovi link- è aggiungere questo codice subito dopo ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(documento).ready(funzione(){
var mostrecent = $('a.blog-pager-newer-link').attr('href');
$('a.blog-pager-newer-link').load(mostrecent + ' .post-title:first', function() {
var mostrecenttitles = $("a.blog-pager-newer-link:first").text();
$('a.blog-pager-newer-link').text('◀' + recenttitles);
});
var oldmass = $('a.blog-pager-older-link').attr('href');
$('a.blog-pager-older-link').load(oldest + ' .post-title:first', function() {
var oldtitle = $('a.blog-pager-older-link').text();
$('a.blog-pager-older-link').text(oldertitle + '▶');
});
});
//]]></script>
</b:se>
Come sempre quando si utilizza jQuery, se la libreria è già caricata per qualcos'altro, è possibile eliminare la prima riga per evitare di duplicare il caricamento.
Per chi fosse curioso, spiegherò tutto questo.
Innanzitutto, questo codice è racchiuso in una condizione in modo che venga eseguito solo quando ci troviamo su una pagina di tipo post, poiché non ha senso su altri tipi di pagine come homepage, pagine statiche e navigazione per tag, ad esempio.
Il resto è un'idea tanto buona quanto semplice: utilizziamo il link da ogni pagina di destinazione per raggiungerla. Una volta lì, leggiamo il titolo del post e infine sostituiamo le etichette originali con quei titoli.
Spiegandolo più in dettaglio, il flusso del programma sarebbe il seguente:
- La funzione viene eseguita con .ready per poter lavorare senza problemi con gli elementi una volta che sono completamente caricati ed evitare così errori se sono ancora disegnati a metà.
- Creiamo quindi la variabile mostrecent , in cui inseriamo l'indirizzo del link della voce successiva a quella visualizzata, che viene estratto direttamente dal link originale.
- Successivamente, utilizziamo .load con l'indirizzo del post successivo, ma questa volta per navigare virtualmente verso di esso e leggere il contenuto del primo titolo che troviamo. Nel codice, questo è espresso come .post-title:first . Normalmente, ce ne sarà solo uno, ma per sicurezza.
- Ora salviamo solo il testo di quel titolo, eliminando qualsiasi codice che potrebbe essere incluso in un'altra variabile chiamata mostrecenttitle .
- Infine, prendiamo il testo che forma il collegamento "Voce più recente" e lo sostituiamo con il titolo che abbiamo salvato poco prima.
La seconda metà è esattamente la stessa, ma con il link "Older".
Come ho detto, un'idea felice che ottiene risultati molto efficaci con poco. Vorrei menzionare la persona che l'ha ideata originariamente, ma circola su Internet da diversi anni e compare in così tanti posti che non saprei proprio dire chi sia.
Con quanto sopra, tutto funzionerà correttamente, ma poiché i titoli sono di lunghezza variabile e generalmente più lunghi dei link standard originali, ho pensato fosse opportuno eliminare quello che portava alla Home (per quello abbiamo già l'intestazione e forse qualche altro link in un menu) e distribuire i restanti due lungo la larghezza del blog. Inoltre, già che ci siamo, voglio che il tutto sia anche responsive (RWD) e con un piccolo effetto hover . Per
farlo, basta aggiungere questo CSS al template, preferibilmente alla fine di quello che avevamo già per altri scopi.
#blog-pager {
larghezza: 100%;
margine: 10px auto;
dimensione carattere: 0;
altezza della riga: 0;
allineamento del testo: centro;
}
.home-link {
visualizzazione: nessuno;
}
#blog-pager-link-più-nuovo, #blog-pager-link-più-vecchio {
float: nessuno;
visualizzazione: blocco in linea;
larghezza: 49%;
altezza: 80px;
margine: 0,5%;
imbottitura: 10px;
sfondo: #eee;
colore: #000;
text-transform: maiuscolo;
box-sizing: border-box;
}
.blog-pager-link-più-nuovo, .blog-pager-link-più-vecchio {
visualizzazione: blocco in linea;
larghezza: 100%;
margine: 0;
imbottitura: 0;
dimensione carattere: 16px;
altezza della riga: 18px;
font-weight: grassetto;
allineamento verticale: centro;
}
[id^="blog-pager-"]:prima {
contenuto:"";
display:blocco-inline;
larghezza:0;
altezza: 100%;
allineamento verticale:centro;
}
#blog-pager-newer-link:hover, #blog-pager-newer-link:hover a, #blog-pager-older-link:hover, #blog-pager-older-link:hover a {
sfondo: #000;
colore: #fff;
decorazione del testo: nessuna;
}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover {
stile del carattere: corsivo;
}
@media (larghezza massima: 640px) {
#blog-pager-newer-link, #blog-pager-older-link {larghezza: 100%; margine: 2px 0;}
}
Commenti
Posta un commento