Hoy en día, hay una gran cantidad de plantillas que utilizan los links de Entradas antiguas y Entradas mas recientes personalizados en sus blogs y para ello existen una multitud de formas para llevarlos acabo, como ejemplo esta que nos ofreció El Potro con imágenes (Vease en Ciudad Blogger), o esta otra de Oloman (Vease en Oloblogger).
Hoy os traigo otra forma de mostrarlas y consiste en reemplazar el próximo post y el anterior con el título de la entrada.
Para los que lo quieran probar sigan las siguientes instrucciones:
1.-Copia de seguridad de la plantilla por si algo sale mal.
Ofrecido por Isabel de Mama quiero ser blogger
2.- Reemplazar todo el antiguo CSS de navegación, debéis buscar el código parecido a esto:
/* navegacion */
#blog-pager {...................}
#blog-pager a.home-link{........}
#blog-pager-newer-link, #blog-pager-older-link {.......}
#blog-pager-newer-link{.........}
#blog-pager-older-link{..........}
#blog-pager-newer-link a
Y lo reemplazamos por este otro:
.enlaces{margin-top:20px;padding:0;background:#e9e9e9}
.page-izq{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;}
.page-dercho{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out}
.page-dercho:hover .pager-title-left,.page-izq:hover .pager-title-left{color:red!important}
.page-dercho a:hover,.page-izq a:hover{color:red!important;}
.page-izq a,.page-dercho a,.current-pageleft,.current-pageright{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none}
.page-izq a,.page-dercho a{color:#333;}
.pager-title-left{font-family: 'Trebuchet MS', sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}
.bpage-izq{margin:5px 10px 10px}
.bpage-dercho{margin:5px 10px 10px}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
.blog-pager,#blog-pager{clear:both;text-align:center}
.feed-links{clear:both;line-height:2.5em}
3.- A continuación buscamos el siguiente código:
<b:includable id='nextprev'>
........
........
</b:includable>
Y sustituimos todo el código por este otro:
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
</b:if>
<div class='clear'/>
</b:includable>
4.- A continuación buscamos el siguiente código que suele estar bajo el anterior:
<b:includable id='post' var='post'>
........
........
</b:includable>
Y colocamos lo siguiente justo encima del cierre </b:includable>:
<b:if cond='data:blog.pageType == "item"'>
<div class='enlaces'>
<div class='blog-pager' id='blog-pager'>
<div class='page-izq'>
<div class='bpage-izq'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Anterior</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« siguiente</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Anterior</span><br/>Este es el post más reciente</span>
</b:if>
</div>
</div>
<div class='page-dercho'>
<div class='bpage-dercho'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Próximo</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>siguiente »</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Próximo</span><br/>Este es el post más antiguo</span>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>
5.- Por último colocamos el script antes del cierre </body>:
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
Después de eso, guarde la plantilla y vea los resultados en su blog. Buena suerte ....