Link di navigazione mobili con titoli dei post

Si tratta di un sistema per formattare i link di navigazione di Blogger in modo diverso dal solito, permettendoci di passare al post successivo o a quelli pubblicati in precedenza che stiamo visualizzando.
Si basa su qualcosa che abbiamo già visto in precedenza, che prevede l'utilizzo di jQuery per sostituire le etichette "Post precedente" e "Post successivo" con il titolo del post corrispondente. Questa volta, abbiamo aggiunto il CSS necessario in modo che ciascuno di questi link appaia fluttuante sul lato sinistro e destro della pagina.
Sembra essere una tendenza di questi tempi, soprattutto nei giornali digitali, usare questo tipo di link. Questo sarebbe all'incirca il risultato:

Sempre con l'obiettivo di semplificare il vostro lavoro e pensando anche ai passaggi più complessi, ho raggruppato tutto il codice in modo che sia sufficiente copiarlo e incollarlo in un unico passaggio. Il punto in cui incollarlo sarà nel template, accedendo a HTML Edit e inserendolo tra }]]></b:skin> e </head> .
Se non state attualmente utilizzando jQuery, è meglio farlo subito dopo }]]></b:skin> . Tuttavia, se avete già jQuery, la prima riga che carica la libreria dovrà essere eliminata e il resto del codice aggiunto dopo la riga equivalente che vi chiede di caricare jQuery.

<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[
$(document).ready(function(){
var mostrecent = $('a.blog-pager-newer-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(older-link); }); }); //]]></script> <style> #blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0} .blog-pager span{position:relative;display:inline-block;vertical-align:top;width:120px;height:120px;overflow:hidden;margin:0;padding:0;text-transform:none;box-sizing:border-box} .blog-pager span:before{display:inline-block;vertical-align:middle;content:"";height:100%;width:0} .blog-pager a{float:none!important;display:inline-block;vertical-align:middle;width:100%;height: auto;min-height:40px;color:#eee;text-align:center;padding:15px 15px 15px 30px;box-sizing:border-box;line-height:1.1em;font-size:14px;font-family:arial;background:rgba(0,0,0,.4);border-radius:0 10px 10px 0} #blog-pager-older-link a{float:right;padding:10px 25px 10px 10px;border-radius:10px 0 0 10px} .blog-pager a:hover{background:#000} a.home-link{display:none;padding:0} .blog-pager span:after{content:"\2039";position:absolute;left:0;font-family:Trebuchet,serif;font-size:70px;line-height:70px;top:50%;margin-top:-40px;color:#ccc;text-align:center} .blog-pager span#blog-pager-older-link:after{content:"\203A";left:auto;right:0} @media (max-width: 640px) { #blog-pager{position:relative} .blog-pager span{display:blocco;larghezza:100%;altezza:auto;margine-superiore:10px} .blog-pager a {border-radius: 10px !important;} }
</stile>
</b:se>

Tutto il codice è racchiuso in un'istruzione condizionale in modo che venga eseguito solo sulle pagine degli articoli . Nella homepage o nelle pagine dei tag, quando viene visualizzato più di un articolo, non è logico calcolare quale sia quello successivo o precedente.

fonte