martes, 28 de mayo de 2013

Como Cambiar Los Enlaces de Navegacion Por Titulo de Articulo En Blogger

Leave a Comment

 Hola.En dia de hoy les traigo un interesante Super Truco de para los enlaces de navegacion .Estos te permiten navegar  cada entrada de tu blog ademas senalan las Entradas Recientes y Entradas Antiguas.Aparecen ya sea el nombre o con botones que dicen previo o proxima entrada.

                               Ejemplo:



Que tal si cambiamos los titulos de enlaces de navegacion por defecto que aparecen en parte inferior de los articulos por el titulo de las Articulos o entradas  haciendolo mas apelativo a la vista del lector e interesante con un simple truco de blogger .Ejemplo de como queda en la siguiente imagen:



Como implementar este truco de reemplazar los enlaces de navegacion por defecto por titulo de articulos pues con los siguientes simples pasos:

1.Entra en tu Blogger>>Diseno>>Plantilla>>Editar Html
2.Busca la siguiente etiqueta </head> y copia y pega el siguiente codigo arriba de </head>.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


3.Luego ve a Diseno>>Anadir un Gadget>>Selecciona Html/Javascript y en espacio de contenido pega el siguiente codigo.


<script type="text/javascript">
$(document).ready(function(){
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);
});
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
});
});
</script><style type="text/css">
#blog-pager{font-family: Arial,helvetica,sans-serif;font-size: 14px;}#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}</style>



4.Da Click en guardar y listo.Ya cuando entren  a tu pagina principal veran este simple truco implementado.
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario