» » » Cambiar el link de Entrada antigua por el título de la entrada

Cambiar el link de Entrada antigua por el título de la entrada


Para cambiar los links Entradas antiguas, Entradas mas recientes por el título de la entrada en el blog de blogger y que quede así:





Ir a Diseño ► Edición HTML► Presionar Ctrl + F, en el buscador pegar


<b:includable id='nextprev'>

Se verá un trozo de código debajo de esta linea similar a este código:


<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>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
</div>
<div class='clear'/> 

Encerrar este código dentro de los códigos condicionales:

<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>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
</div>
<div class='clear'/>
</b:if>
</b:if>

Luego buscar:

<div class='post-footer-line post-footer-line-3'>


Pegar arriba de esta linea este código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<ul class='blod-pager'>
        <li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Siguiente</strong> <span>Entradamás Reciente</span></a>
</b:if>
</li>
    <li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Anterior</strong> <span>Viendo la última Entrada</span></a>
</b:if>
</li>
    </ul>
<script type='text/javascript'>
//<![CDATA[
(function($){   
    var newerLink = $('a.newer-link');
    var olderLink = $('a.older-link');
    $.get(newerLink.attr('href'), function (data) {
     newerLink.html('<strong>Siguiente</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<strong>Anterior</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
    },"html");
})(jQuery);
//]]>
</script>
      </b:if></b:if>


Pueden cambiar el texto que esta resaltado con amarillo.

 Ahora buscar

<head> 
y justo debajo de él pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Para personalizarlo buscar

]]></b:skin>
Arriba pegar el siguiente código CSS

/*Blog Pager
---------------*/
.blog-pager {
border-top: 2px dashed #ddd;
border-bottom: 2px dashed #ddd;
 margin-bottom: 10px;
 overflow:hidden;
padding:0px;
}
.blog-pager li.next {
float: right;
padding:0px;
background:none;
margin:0px;
}
.blog-pager li.next a {
padding-left: 24px;
}
.blog-pager li.previous {
 margin:0px -2px 0px 0px;
float: left;
 border-right:1px solid #ddd;
padding:0px;
background:none;
}
.blog-pager li.previous a {
padding-right: 24px;
 }
.blog-pager li.next:hover, .blog-pager li.previous:hover {
background:#fff;
 }
.blog-pager li {
width: 50%;
display: inline;
float: left;
text-align: center;
}
.blog-pager li a {
position: relative;
min-height: 77px;
display: block;
padding: 15px 46px 15px;
outline:none;
 text-decoration:none;
}
.blog-pager li i {
color: #000;
font-size: 18px;
}
.blog-pager li a strong {
display: block;
font-size: 20px;
color: #000;
letter-spacing: 0.5px;
font-weight: bold;
text-transform: uppercase;
font-family: arial;
margin-bottom:10px;
}
.blog-pager li a span {
font-size: 15px;
color: #666;
 font-family:arial;
 margin:0px;
}
.blog-pager li a:hover span,
.blog-pager li a:hover i {
color: #555;
}
.blog-pager li.previous i {
float:left;
margin-top:15%;
 margin-left:5%;
 }
.blog-pager li.next i {
float: right;
margin-top: 15%;
margin-right: 5%;
}
.blog-pager li.next i, .blog-pager li.previous i ,
.blog-pager li.next, .blog-pager li.previous{
-webkit-transition-property:
background color;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background color;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-out;
-o-transition-property: background color;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-out;
transition-property: background color;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
.fa-chevron-right {
padding-right:0px;
}

Guardar la plantilla y que está todo listo, ahora ir a cualquier entrada y se verán los cambios.

Ver en Blog de Prueba


Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top