28 junio 2014

Reemplazar los links Entradas antiguas, Entradas mas recientes por el título de la entrada.

Reemplazar los links Entradas antiguas

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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 == &quot;item&quot;'>
<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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>siguiente &#187;</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 = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>


Después de eso, guarde la plantilla y vea los resultados en su blog. Buena suerte ....

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

Que bueno yo intentaba hacerlo y ya me ahorreel trabajito gracias antonio

Hola si me puedes ayudar gracias tengo un blog pero quisiera agregarle un slider que aparezca en todas las entradas en la parte superior lo vi en unos de tus blogs de pruebas peor no logro ubicarlo si puedes te agradeceria.

Ediilar no se concretamente a cual slider te refieres.

hola antonio:
mi amigo esta estudiando y quiere ser programador que le aconsejas?
que es bueno y que no?

Mira este es el blog y donde tienes el slider esta debajo de la cabecera http://prueba.amorsevillista.com/2011/10/reyerta-entre-aficionados-del-atletico.html si puedes ayudarme te lo agradeceria


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"