Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger

Marzo 19th, 2007 | Publicado por Francisco en Blogger | 22 Comentarios

El nuevo Blogger incorpora tanto en la página principal, etiquetas y entradas idividuales un pie de navegación, es decir, enlaces a “Entrada más reciente”, “Entradas antiguas” y “Página principal” sin formato y sin estilo. En este artículo te mostraremos como personalizarlo.

Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

Activa la opción “Expandir plantillas de artilugios” y en el campo de texto busca el siguiente 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 + "_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>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
<b:else/>
<b:if cond='data:newerPageUrl'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
</b:if>

</b:if>
</DIV>

Este es el código encargado de mostrar los enlaces de navegación. Sí te das cuenta corresponden aca uno de los links:

<data:newerPageTitle/> - Corresponde al texto “Entrada más reciente”
<data:olderPageTitle/> - “Entradas antiguas”
<data:homeMsg/> - “Página principal”

Personalización:Cambiar el texto por otro. Para remplazar el texto por otro de nuestro agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, por ejemplo, para el link de entradas recientes sustituimos completamente “<data:newerPageTitle/>” por “Artílos más recientes” directamente.Cambiar texto por imagen. Para sustituir el texto por una imagen podemos seguir metodología anterior y remplazar cada etiqueta por su imagen correspondiente. A continuación te damos un ejemplo creado por Blogyweb y que puedes usar libremente con sólo remplazar el código inicial con este:

<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'> <img alt='data:newerPageTitle' src='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/s1600/botong_atras.gif' /></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'> <img alt='data:olderPageTitle' src='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/s1600/botong_adelante.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img alt='data:homeMsg' src='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/s1600/botong_home.gif'/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

</b:if>
</div>

Dar formato a los links. Si lo único que quieres es darles un mejor formato a estos enlaces modifica los atributos de las siguientes clases:

#blog-pager-newer-link - Para “Entrada más reciente”
#blog-pager-older-link - Para “Entradas antiguas”
#home-link - Para “Página principal”

Respuestas

Feed | Dirección de Trackback

Palita:

Marzo 25th, 2007 a las 4:23 am (#)

Hola, me gusto mucho su pagina.
Tengo una duda.
Baje la plantilla que ustedes ofrecen aqui en su web, ya la aplique a mi blog y todo bien hasta ahi.

Tienen un articulo de “Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger”

En el campo de texto hay que buscar cierto codigo,para poderlo modificar, pero no lo encuentro, no viene en la platilla, me podrian explicar que puedo hacer en este caso.

Muchas gracias de antemano.
Francisco:

Marzo 26th, 2007 a las 2:40 am (#)

Hola Palita!

Se paso especificar un detalle, despúes de que entras en “Edición de HTML”, activas la casilla “Expandir plantillas de artilugios “. De este modo te aparece el código que tienes que remplazar. Espero no tengas problema!
Dr. Fest:

Abril 19th, 2007 a las 11:54 pm (#)

seria bueno que expliques como colocaste un iconito al lado de las etiquetas en tu blog, queda muy bien… aunque sea escribime y contame… mauroh @ gmail . com
excelente blog!
saludos
Francisco:

Abril 20th, 2007 a las 6:53 am (#)

Gracias por los comentarios Dr. Fest, sobre tu duda, pues ver como hacerlo aca:

http://blogyweb.blogspot.com/2007/04/poner-una-icono-en-la-lista-de.html

Saludos!
Dr. Fest:

Abril 20th, 2007 a las 7:37 pm (#)

gracias por tu tan pronta respuesta! pero mi duda es acerca del iconito de etiqueta que tenés abajo los post… me tiene loco ese tema… busque en todos lados y no encuentro como hacerlo.

Saludos y gracias nuevamente
Francisco:

Abril 20th, 2007 a las 11:48 pm (#)

El caso es muy similar, solo aqui la clase sería:

.post-labels {
padding-left: 18px;
background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rigu3BN7pYI/AAAAAAAAAlU/nUrCXI295F4/s1600/tag_green.png) no-repeat center left;
}

Si tienes otra duda la vemos en el artículo sobre este tema en link que te dí. Saludos y espero no tengas problema!
Xavi:

Mayo 1st, 2007 a las 2:16 pm (#)

Funciona a la perfección. La verdad es que siempre quise modificar algunas cosas del Blogger y una de esas era el pie de navegación.

Muchas gracias por compartir estos conocimientos con los demás.
Francisco:

Mayo 4th, 2007 a las 4:00 am (#)

Me alegro te halla servido Xavi!
Jpapollo:

Junio 6th, 2007 a las 11:00 pm (#)

Yo use el codigo 2, y todo va bien, al parecer… pero en el index no me deja ir a las anteriores… q pasa?
Jpapollo:

Junio 6th, 2007 a las 11:06 pm (#)

Estuve viendo… y funciona es en IE en FIREFOX no va, en este blog tampooco… solo va en IE
.::. " César " Amante De GNU/LINUX || "Software Libre" .::.:

Junio 12th, 2007 a las 5:26 am (#)

gracias, me funciono de perlas, muchisimas gracias …

espero a los demas les funcione = q a mi.
Ninoska:

Julio 7th, 2007 a las 4:28 am (#)

Está muy buena tu web felicitaciones.
Te cuento , tengo un problema … con el boton OLDERPOST cuando está en la pagina principal, lo apreto pero no carga los post anteriores, pero si copio el link que tiene el boton y lo pongo en el browser ahí si funciona…
no entiendo porque pasá eso…
F1 F1 please
pedrox:

Septiembre 27th, 2007 a las 5:39 pm (#)

oye me sañe un error al avansar de pagina ´:(

Push-Button Publishing
Lo sentimos, pero no hemos podido llevar a cabo tu petición.

Al notificar este error al servicio de asistencia de Blogger o al grupo de ayuda de Blogger:

* Describe lo que estabas haciendo cuando recibiste este error.
* Proporciona el siguiente código de error e información adicional.

bX-qx7owu

Información adicional

uri: /

Esta información nos ayudará a detectar tu problema específico y solucionarlo. Disculpa las molestias.

Página principal | Acerca de | Zumbido | Ayuda | Idioma | Desarrolladores | Artículos
Condiciones del servicio | Privacidad | Política de contenido | © 1999 – 2007 Google
pedrox:

Septiembre 27th, 2007 a las 5:42 pm (#)

cuando intento pasar de pagina me da error

Lo sentimos, pero no hemos podido llevar a cabo tu petición.

Al notificar este error al servicio de asistencia de Blogger o al grupo de ayuda de Blogger:

* Describe lo que estabas haciendo cuando recibiste este error.
* Proporciona el siguiente código de error e información adicional.

bX-qx7owu
D4nt3:

Diciembre 18th, 2007 a las 3:15 am (#)

Error bX-b5phpk

Ni idea e intentado de todas formas pero siempre el me da problemas :S solamente ese da problemas al sustituirlo espero pueda a ver una solucion porque asi nada mas las letras queda bien feito gracias por su atencion prestada de antemano
Antonio:

Enero 4th, 2008 a las 6:00 am (#)

Gracias de nuevo.

Sin dudarlo este blog es mi referencia obligada de consulta para en cuanto al diseño del mío se refiere.

En cuanto pueda crearé un enlace, es lo menos que puedo hacer.

Un saludo y enhorabuena por el trabajo.
Jenny:

Febrero 18th, 2008 a las 11:14 am (#)

Excelente pagina! Te felicito! me esta ayudando muchisimo!
HanMdq:

Mayo 7th, 2008 a las 2:07 pm (#)

Muchas gracias, es la primera vez que encuentro un tutorial tan bien explicado.

Saludos
jesus:

Junio 28th, 2008 a las 11:22 am (#)

hola , ante todo les doy mis mas cordiales gracias .
hace tiempo trataba de eliminar el link de las entradas antiguas de mi blog .
aunque justamente este no es un temas que trate de ello , pude obtener la ubicacion del codigo que me hacias falta para borrar .
gracias de cualquier forma …
http://www.exploradorweb.blogspot.com
geancarlo:

Julio 2nd, 2008 a las 8:14 pm (#)

hola que tal, una pregunta, e logrado poner el codigo que publicaste en mi blog, ahora bien este mismo codigo no quiero que aparesca en la parte inferior, sino el la parte superior donde comiensan mis post entradas, lo e intentado cambiando de posicion pero nada me podria ayuda rpor vaor gracias de antemano
Kyle Xy:

Julio 14th, 2008 a las 8:23 am (#)

Muy bueno, me ha ido de maravilla, si quieres ver el resultado lamiradaescrutadora.blogspot.com
halı yıkama:

Julio 19th, 2008 a las 9:32 am (#)

thanks

Deja tu comentario

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios no estén fuera tema, no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán eliminados. Recuerda que puedes usar nuestro foro para otros temas y preguntas.

Palita:

Marzo 25th, 2007 a las 4:23 am (#)

Hola, me gusto mucho su pagina.
Tengo una duda.
Baje la plantilla que ustedes ofrecen aqui en su web, ya la aplique a mi blog y todo bien hasta ahi.

Tienen un articulo de “Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger”

En el campo de texto hay que buscar cierto codigo,para poderlo modificar, pero no lo encuentro, no viene en la platilla, me podrian explicar que puedo hacer en este caso.

Muchas gracias de antemano.

Francisco:

Marzo 26th, 2007 a las 2:40 am (#)

Hola Palita!

Se paso especificar un detalle, despúes de que entras en “Edición de HTML”, activas la casilla “Expandir plantillas de artilugios “. De este modo te aparece el código que tienes que remplazar. Espero no tengas problema!

Dr. Fest:

Abril 19th, 2007 a las 11:54 pm (#)

seria bueno que expliques como colocaste un iconito al lado de las etiquetas en tu blog, queda muy bien… aunque sea escribime y contame… mauroh @ gmail . com
excelente blog!
saludos

Abril 20th, 2007 a las 6:53 am (#)

Gracias por los comentarios Dr. Fest, sobre tu duda, pues ver como hacerlo aca:

http://blogyweb.blogspot.com/2007/04/poner-una-icono-en-la-lista-de.html

Saludos!

Abril 20th, 2007 a las 7:37 pm (#)

gracias por tu tan pronta respuesta! pero mi duda es acerca del iconito de etiqueta que tenés abajo los post… me tiene loco ese tema… busque en todos lados y no encuentro como hacerlo.

Saludos y gracias nuevamente

Abril 20th, 2007 a las 11:48 pm (#)

El caso es muy similar, solo aqui la clase sería:

.post-labels {
padding-left: 18px;
background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rigu3BN7pYI/AAAAAAAAAlU/nUrCXI295F4/s1600/tag_green.png) no-repeat center left;
}

Si tienes otra duda la vemos en el artículo sobre este tema en link que te dí. Saludos y espero no tengas problema!

Xavi:

Mayo 1st, 2007 a las 2:16 pm (#)

Funciona a la perfección. La verdad es que siempre quise modificar algunas cosas del Blogger y una de esas era el pie de navegación.

Muchas gracias por compartir estos conocimientos con los demás.

Mayo 4th, 2007 a las 4:00 am (#)

Me alegro te halla servido Xavi!

Jpapollo:

Junio 6th, 2007 a las 11:00 pm (#)

Yo use el codigo 2, y todo va bien, al parecer… pero en el index no me deja ir a las anteriores… q pasa?

Junio 6th, 2007 a las 11:06 pm (#)

Estuve viendo… y funciona es en IE en FIREFOX no va, en este blog tampooco… solo va en IE

.::. " César " Amante De GNU/LINUX || "Software Libre" .::.:

Junio 12th, 2007 a las 5:26 am (#)

gracias, me funciono de perlas, muchisimas gracias …

espero a los demas les funcione = q a mi.

Ninoska:

Julio 7th, 2007 a las 4:28 am (#)

Está muy buena tu web felicitaciones.
Te cuento , tengo un problema … con el boton OLDERPOST cuando está en la pagina principal, lo apreto pero no carga los post anteriores, pero si copio el link que tiene el boton y lo pongo en el browser ahí si funciona…
no entiendo porque pasá eso…
F1 F1 please

pedrox:

Septiembre 27th, 2007 a las 5:39 pm (#)

oye me sañe un error al avansar de pagina ´:(

Push-Button Publishing
Lo sentimos, pero no hemos podido llevar a cabo tu petición.

Al notificar este error al servicio de asistencia de Blogger o al grupo de ayuda de Blogger:

* Describe lo que estabas haciendo cuando recibiste este error.
* Proporciona el siguiente código de error e información adicional.

bX-qx7owu

Información adicional

uri: /

Esta información nos ayudará a detectar tu problema específico y solucionarlo. Disculpa las molestias.

Septiembre 27th, 2007 a las 5:42 pm (#)

cuando intento pasar de pagina me da error

Lo sentimos, pero no hemos podido llevar a cabo tu petición.

D4nt3:

Diciembre 18th, 2007 a las 3:15 am (#)

Error bX-b5phpk

Ni idea e intentado de todas formas pero siempre el me da problemas :S solamente ese da problemas al sustituirlo espero pueda a ver una solucion porque asi nada mas las letras queda bien feito gracias por su atencion prestada de antemano

Antonio:

Enero 4th, 2008 a las 6:00 am (#)

Gracias de nuevo.

Sin dudarlo este blog es mi referencia obligada de consulta para en cuanto al diseño del mío se refiere.

En cuanto pueda crearé un enlace, es lo menos que puedo hacer.

Un saludo y enhorabuena por el trabajo.

Jenny:

Febrero 18th, 2008 a las 11:14 am (#)

Excelente pagina! Te felicito! me esta ayudando muchisimo!

HanMdq:

Mayo 7th, 2008 a las 2:07 pm (#)

Muchas gracias, es la primera vez que encuentro un tutorial tan bien explicado.

Saludos

jesus:

Junio 28th, 2008 a las 11:22 am (#)

hola , ante todo les doy mis mas cordiales gracias .
hace tiempo trataba de eliminar el link de las entradas antiguas de mi blog .
aunque justamente este no es un temas que trate de ello , pude obtener la ubicacion del codigo que me hacias falta para borrar .
gracias de cualquier forma …
http://www.exploradorweb.blogspot.com

geancarlo:

Julio 2nd, 2008 a las 8:14 pm (#)

hola que tal, una pregunta, e logrado poner el codigo que publicaste en mi blog, ahora bien este mismo codigo no quiero que aparesca en la parte inferior, sino el la parte superior donde comiensan mis post entradas, lo e intentado cambiando de posicion pero nada me podria ayuda rpor vaor gracias de antemano

Kyle Xy:

Julio 14th, 2008 a las 8:23 am (#)

Muy bueno, me ha ido de maravilla, si quieres ver el resultado lamiradaescrutadora.blogspot.com

halı yıkama:

Julio 19th, 2008 a las 9:32 am (#)

thanks