73

Cambiar el texto de los enlaces de navegación

Enlaces de navegacion
Son varios los que me han consultado sobre como cambiar los enlaces de navegación que se muestran al pie de nuestras entradas en forma de enlace de texto : "Página principal -> Entradas antiguas -> Entradas más recientes", por otro texto más acorde con sus gustos o necesidades.

[1] Nos situamos en nuestro panel de Blogger, Edición Html y marcamos la casilla para expandir la plantilla de artilugios.
Localizamos esta línea de código para orientarnos:

<b:includable id='nextprev'>

[2] Justo debajo de esa línea estará el código donde hemos de aplicar los cambios:
<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>

<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>
<div class='clear'/>
</b:includable>

[3] Hemos de sustituir dentro de este código directamente, por el texto que queramos mostrar en cada caso, las etiquetas:

<data:newerPageTitle/> (Entradas más recientes)

<data:olderPageTitle/> (Entradas antiguas)

<data:homeMsg/> (Página principal)


Puedes consultar también como sustituir esos mismos enlaces por una imagen o icono.

Entradas Relacionadas:

73 comentarios:


PedroX

Gracias Rosa
Gracias Rosa
Gracias Rosa

Yo fui uno de los que te pedi esto..
Ya voy inmediatamente a cambiarlo

Saludos!!

PedroX

Ya! Listo

Gracias Otra Vez!!!

Antony

Hola! Muy bueno el truco...

Marcos

Graicas por el truco.

El diseño de tu blog está excelente

www.tublindaje.net

Loly

Hola Rosa, no se si te gustan los memes, pero te he pasado uno, por si te apetece seguirlo.
Perdón porque el comentario no se refiere a la entrada (evidentemente tienes licencia para borrarlo, sobra que lo diga, tú lo sabes mejor que yo, pero que no me molestaré, vaya). En mi blog puedes ver de qué se trata.

Un saludo.

Anónimo

Pedrox, cuanto me alegra que ya lo tengas hecho :D

Un abrazo y gracias por seguir por aquí :-L

Anónimo

Antony, gracias por pasarte.

Un abrazo.

Anónimo

Poder, pues muchas gracias :D

Anónimo

Loly, no, la verdad es que me gustan muy poco, je,je, pero alguna vez he hecho alguna excepción...veré de que se trata, y gracias. ;-)

Camila

Hola, me ha encantado tu blog, lo leí casi todo, pero hay muchas cosas que no puedo aplicar, creo que es porque mi plantilla no es de las originales de blogger.
en este caso por ejemplo, debajo del codigo que habia que buscar no esta el segundo que tu pusiste. osea, solo aparece el primer codigo y despues nada :(


si me pudieras ayudar seria genial, gracias desde antes por este genial espacio

Anónimo

Camila , tendrás que enviarme el código completo de tu plantilla, ya que a través de su código fuente no puedo comprobar esa parte...

Hazlo con los artilugios expandidos y a ser posible desde el blog de notas.

Anónimo

Rosa muy bueno el truco y lo mejor es que lo explicas de manera muy sencilla felicitaciones, pero en el afan de personalizar mi blog me preguntaba si se podia cambiar la firma de tu blog por una imagen?¿,
ya que encontre una pagina que genera firmas y quisiera colocarla en lugar de las letras

Anónimo

Hola Rosa, sé que esto es un blog de ayuda para la plataforma Blogger, pero me supongo que se puede hacer algo parecido con Wordpress. Si tiene alguien algún conocimiento sobre esto, ya me lo dierais. Gracias.

Anónimo

STBAN, si me da tiempo hoy, explico eso en una entrada...

Anónimo

Vino, pues no, a decir verdad no tengo idea si esto es posible en Wordpress, lo siento.

Anónimo

Vino quiero decirte que para wordpress no creo que valdria ya que en wordpress no puedes editar el codigo html de ninguna manera.Yo antes estuve en Wordpress pero al final me resulto un pokito mierda perdonpor la palabra.
Rosa te kerria preguntar algo Se puede banear a alguien del blog? contestame kuando puedas

Anónimo

Anónimo, no, no puedes bannear a nadie del blog.

Anónimo

Las puedo sacar?

Anónimo

RUCCOS, ¿Eliminar los enlaces? se puede, pero estarás limitando enormemente la navegación en tu blog...

Rosalina Huaranga Morales

Hola rosa y se puede ocultar estos links?... gracias de antemano...

Anónimo

Rosalina Huaranga Morales , si, pueden ocultarse, aunque no lo recomiendo, ya que facilitan enormemente la navegación...

Localiza esto en la plantilla:
#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Y cambialo así:
#blog-pager-older-link {
float: right;
visibility:hidden;
display:none;
}

#blog-pager-newer-link {
float: left;
visibility:hidden;
display:none;
}
#blog-pager {
text-align: center;
visibility:hidden;
display:none;
}

Panic

buenas rosa, vera, no acabo de entender que es exactamente lo que tengo que sustituir...donde pongo las nuevas palabras que quiero utilizar? gracias y un saludo

Anónimo

panicadas, lo que se sustituye son las etiquetas que ves en el último paso, se borran y se escribe directamente el texto donde estaba cada etiqueta.

Sabrina.

Rosa, intenté pero me aparece error. Localizé el primer código y abajo copie lo que dijiste y cambié las palabras.. pero me aparece esto:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:includable" must be terminated by the matching end-tag "".

Anónimo

sabrina, no tienes que copiar nada abajo.
Tienes que sustituir cada etiqueta por el texto que vas a mostrar.
A ver, en ese código hay una etiqueta que dice:
<data:newerPageTitle/> tienes que borrar eso, solo eso, y donde estaba eso poner por ejemplo "Entradas más nuevas" o lo que sea.
Lo mismo para "Entradas más viejas" borrando esto <data:olderPageTitle/> y colocando el texto en su lugar.
Y lo mismo con el "Página principal" <data:homeMsg/>

Yoyorz

Hola Rosa me gusta mucho el blog y lo frecuento demasiado.

Pues si me podrias decir como poner estos enlaces de navegacion ???

Te Dejo mi blog para que cheques

Texto enlace

y podrias decirme como hacerle para ponerle a mi blog una imagen en ves de un texto en los comentarios ??

Gracias desde ya...

Anónimo

Themasteralex El enlace que has dejado no es correcto y tu perfil no está habilitado, así que no puedo mirar tu blog...

Yoyorz

perdon el blog es

MeGaDeSc

Ayudame porfavor . Gracias

Anónimo

Themasteralex Localiza esto en tu plantilla:

#blog-pager-older-link {
display: none;
}
#blog-pager {
display: none;
}

Lo borras y en su lugar colocas esto:

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Para cambiar el "comentarios" por una imagen, ten en cuenta que no solo es un texto, sino un enlace "vivo" es decir, cuando no hay comentarios pone 0, pero cuando los hay pondrá 1 por ejemplo, si colocas una imagen en su lugar, lo que diga ahí será algo fijo, no marcará el número de comentarios.
Lo más adecuado es que uses algo así:
http://elescaparatederosa.blogspot.com/2008/12/enlace-comentarios-en-una-imagen.html

Yoyorz

Gracias Rosa,

pero lo de los comentarios no era eso lo que yo te decia, sino era poner una imagen en los comentarios en ves de:

"Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja un enlace a tu blog:

EJEMPLO POST "


pues casi como los emoticonos yo quero poner una imagen que diga gracias por comentar, me ayudas?? o puedo hacerlo como pones los emoticonos pero en ves de los emoticonos pongo mi imagen??

GRACIAS POR LO ANTERIOR

GRACIAS GRACIAS GRACIAS GRACIAS GRACIAS GRACIAS

Anónimo

Themasteralex
La imagen de mis emos la he incluido directamente en el código del formulario. Expande las plantillas de artilugios y localiza esta línea:
<p><data:blogCommentMessage/></p>

Justo debajo colocas la url de la imagen así:
<img src="url de la imagen"/>

Yoyorz

Gracias muhcas gracias rosa¡¡¡¡¡


hay una cosa mas que te quiero pedir espero no te moleste :p pues a otro blog que tengo le quiero quitar o de entradas antiguas y ponerlo como un estilo wordpress aqui vi el articulo pero no le entiendo muy bien siento que aqui tu le das mas detalle te paso el link

Paginacion para blogger

GRACIAS MY MUY BUEN BLOG EL QUE TE TRAES

Anónimo

Themasteralex Si, he visto el artículo en Vagabundia y decidí no publicar sobre eso precisamente porque el mismo Jmiur decidió retirarlo de su blog después de haberlo instalado. No anda bien en Blogger.
Yo lo mantengo aún instalado en otro de mis blogs y por más que lo he intentado, se salta páginas, las repite...vamos que no funciona correctamente.

Yoyorz

ohhhh nimodos bueno gracias rosa por todos tus consejos y una vez mas tu blog es de lo mejor

Gustavo Gopar

Hola Rosa, espero me puedas ayudar. Le estoy haciendo un blog de pintura a mi primo, tengo 3 etiquetas por indice temático y en una superé las 20 entradas y las otras quedan como entradas antiguas y no aparecen entonces en la página y no es lo deseado, (me pone como tope 20 de entradas en cada página) me dijeron de cambiar por iconos de navegación pero no tengo ni idea para que ello suceda y quede bien. la dirección de blog es:
http://rafaenpuntillismo.blogspot.com


Te agradezco muchísimo tu valiosa ayuda. Te envío un saludo muy cordial.Gustavo

Anónimo

ggopar Supongo que te han hablado de cambiar los enlaces de navegación por unos iconos , es decir, en lugar de "entradas antiguas" por ejemplo, se vería una imagen (una flecha o lo que sea) pero no habría diferencia en el número de entradas...
Puedes ver como hacer eso en esta entrada:
http://elescaparatederosa.blogspot.com/2007/03/iconos-de-navegacin.html

Blogger por defecto, solo permite mostrar 20 entradas al pinchar en los enlaces de navegación (entradas antiguas, entradas anteriores), lo que si puede hacerse es, independientemente de que en la página principal muestres (como es tu caso) una sola entrada, conseguir que al pinchar en esos enlaces, se muestren las máximas permitidas (20). Esto puedes lograrlo desde esta entrada:
http://elescaparatederosa.blogspot.com/2008/05/controlar-el-nmero-de-entradas-en.html

También podrías agregar un menú y en los enlaces del menú colocar la dirección de las etiquetas, es decir, si tienes una etiqueta con 40 entradas por ejemplo que se llama "paisajes" en el menú pondrías "paisajes" en una de las pestañas enlazando con la url de esa etiqueta, con lo que, al pinchar ahí, se mostrarían todas las entradas etiquetadas como "paisajes".
Para añadir un menú puedes ver arriba en mis etiquetas, donde dice "Menú" varias entradas con distintas opciones.

Gustavo Gopar

Rosa, te agradezco mucho tus sugerencias. Antes que me contestarás vi un post sobre hacerlo con menú en tu blog, muy bien explicado y lo hice así fácil y me resultó muy bien y volvieron a aparecer los dibujos que no estaban por sobrepasar los 20 por defecto. Lo hice fácil pero ahora con tus sugerencias del menú lo voy a estudiar bien para hacerlo de pronto de otra forma para que quede más vistoso más útil. Te agradezco de corazón la información que me brindaste.
Todo lo mejor y lo bueno para tí.
Gustavo

pd: si vuelves a ver el blog me dices que te pareció

Manuel Alberto

Hola Rosa, otra vez yo por aquí. Tengo el siguiente problema. Quiero cambiar el color de los enlaces de navegación. Intenté colocando text-color debajo de #blog-pager-older-link (y de los otros afines) pero no resultó. Que estoy haciendo mal.
Segunda consulta. Quiero darle color al fondo del widget que contiene la fecha del post. Coloqué un background debajo de .main .widget, luego de separarlo del .sider .widget, pero el color de fondo se "desborda" del widget hacia el lateral izquierdo del post. Cómo lo resuelvo?.
Si puedes, mira el blog para que aprecies mejor los problemas.
Saludos y un fuerte abrazo.

Anónimo

Manfenix El enlace al blog no sirve...

Para dar color al fondo de la fecha, tendrás que añadir el background en h2.date-header {

En cuanto a los enlaces de navegación, tendrás que añadir CSS solo para ellos, por ejemplo:
#blog-pager-older-link a{
color: #fff;
}
#blog-pager-older-link a:hover{
color: #ccc;
}

Manuel Alberto

Aquí está Rosa, http://avibert.blogspot.com

Anónimo

Manfenix Supuse que era para ese...te sirve mi respuesta anterior entonces...

Manuel Alberto

Aplique el código para cambiar el color de los enlaces de navegación, pero se pierde el vínculo. Voy a intentar cambiar el color de fondo de esa zona para mejorar el aspecto de los enlaces. Te mantendré al tanto de lo que suceda. Muchas gracias como siempre. Saludos y un fuerte abrazo. :P

Manuel Alberto

Rosa, he logrado cambiar el color de los enlaces de navegación.
Coloqué "color:.." debajo de #blog-pager y esta vez se aplicó.
También pude cambiar el fondo de la fecha de entradas.
Esto de experimentar con la plantilla se está volviendo casí
una manía...:O. Gracias por tu ayuda. Y hasta pronto...

Anónimo

Manfenix Engancha, te lo digo por experiencia :D

Manuel Alberto

Solucionado el problema de la posición de la fecha, ahora encuentro otro problema con los enlaces de navegación. Se muestran asi:

Entradas recientesPagina principal Entradas anteriores.

Probé colocando un margin-left en #blog-pager a, pero no se separan los títulos.

Manuel Alberto

Perdón en el comentario anterior no se reflejó el problema.
Entradas recientes está pegado a Página principal.

Manuel Alberto

Recién me di cuenta que esto sucedio quizás al aumentar el tamaño de la fuente.
Solo me quedaría, para mantener ese tamaño, eliminar el "mas" de Entradas mas recientes.
En qué parte del código está esa frase?

Anónimo

Manfenix Si pones el código entre /* y */ el navegador no lo interpreta...ya te he dicho antes que eso es para marcar datos.

Anónimo

Manfenix No existe la frase como texto, es una etiqueta que la muestra y que puedes cambiar por el texto que quieras...precisamente es lo que explico en esta misma entrada (paso [3])

Manuel Alberto

Perdón por la distracción..:S.

Angelica

Hola Rosa, interesante tu Blog. Te invito a visitar el mío www.cuadroclinico.blogspot.com
Saludos y que estés bien.

Gixman

Hola, muy bueno el truco, Como podria cambiar el tamaño de la letra?

Anónimo

Gixman Si lo haces así, el tamaño de la letra se adapta al que tengas colocado para el resto del cuerpo del blog...

Ronald Gordon

Hello Rosa, ahora por aqui... es que en si no entiendo que es lo que tengo que sustituir...

Anónimo

Ronald Pues lo que ves en elpaso [3]...
Por ejemplo la etiqueta <data:newerPageTitle/> la borras y la cambias por el texto que va a salir ahí, en lugar de "Entradas más recientes"... no se explicarlo mejor.

Anónimo

Estimada Rosa,
Tengo un problema con los iconos de navegación, no sé por qué han dejado de funcionar, es decir cuando le das click en "entradas antiguas" no aparece nada, y "entradas recientes" se queda en la misma entrada :(
Me podrías dar una mano con esto?
cariños Rosa! :D

Anónimo

Mauro De León En que blog?? En el Unicornio yo ni veo esos enlaces...

Anónimo

En ese Blog Rosa, cuando pinchas en "contacto" (que es una entrada corta) aparecen los enlaces va' en realidad los he sustituido por imágenes, "Flecha Entradas Antiguas" "Home/Inicio" y "Flecha Entradas Recientes" en ese orden, justo debajo de "Contacto". Yo los veo en IE y Mozilla, espero que los puedas ver Rosa y me puedas decir a que se debe el inconveniente. Gracias por todo como siempre.

Anónimo

Ha! a propósito quiero comentarte que logré un muy buen resultado en un Blog de pruebas modificando la plantilla sólo con tus consejos :D te hice una "modesta distinción" en la sidebar ;) si querés mirá El Misterio del Silencio. Cariños!

Anónimo

Mauro de Leon Ahora entendí :D

Te explico...
Has hecho una entrada que no lleva título y le has puesto la etiqueta con el nombre de "contacto".
Has enlazado en el menú, en la pestaña de contacto, NO la entrada, sino la ETIQUETA.
Cuando pinchas en el contacto del menú, no vas a la entrada, sino a la página de etiquetas de contacto, así que cuando pinchas en los iconos, es lógico que no encuentre nada antes ni después, ya que NO hay más entradas con esa etiqueta...

Para que funcionasen como dices, en el menú tendrías que colocar el enlace a la entrada, es decir, la url que sale en el navegador cuando pinchamos en el título de la entrada precisamente.
Como esa entrada no lleva título, tendrías que ponérselo para obtener la url, una vez la tengas puedes editarla y volver a dejarla sin título.


P.D. La distinción tiene poco de modesta :D...no hacía falta tanto la verdad...
El blog te ha quedado muy bien;)

Resurgimiento Porteño

Gracias Rosa! sos una genia! ya me pongo a editar esos enlaces para que funcione, agradezco la atención de responder a semejante burrada me has desasnado.
Y pienso que todos debemos agradecer de la mejor manera el aporte maravilloso que hacés, aunque seguramente todo el mundo Blogger te lo dice...me asombra la capacidad que tenés para responder tán rápidamente y concretamente, es todo tán fácil de comprender cuando los decís vos.
Graciaaaaass Rosita :)

Anónimo

Hay Rosa no me dí cuenta que estaba logueado con otra cuenta! :O Soy Mauro De León ;)

Anónimo

Mauro De León :D:D:D

Juan Manuel Aguiar

Gracias Rosa! Sigues siendo de mucha ayuda para mi. Acabo de estrenar plantilla en el blog. Me parecería genial que la visitaras y me dieras tu opinión experta. Gracias y que tengas un excelente día!
Mi blog es:
http://www.parabolastecnologicas.com.ve/

miiroux

Gracias, Rosa!! Tarde tres dias en encontrarlo aqui... jaja, soy un pesimo buscador, y eso que estaba ansioso por cambiarlos...

Por cierto, hacia mucho que no dejaba mensaje, soy un malagradecido, gracias a ti mi blog es justo como lo imagine. Deberian darte un premio, o algo... XD

De nuevo, gracias!!! Te pondré en los creditos de mi blog

Anónimo

Muy buen blog, me gustó =)! Tengo una pregunta, como puedo hacer que mi firma sea una imagen, así como la tuya por ejemplo..? Espero que puedas responder..

Anónimo

hola rosa me funciono bien cambiarle la navegacion pero ahora te queria preguntar como cambio el color de link de entradas antiguas y eso que no sea azul, lo quiero cambiar a otro color como blanco ya que el fondo de mi blog es casi negro

olle otra cosita pequeña en el formulario de comentarios donde dice "publicar comentario en la entrada" y donde dice el numero de comentarios aparece de colo negro y el fondo de mi blog es negro y no se ve como puedo cambiar de color como a blanco?

espero tu respuesta :)

Anónimo

Luixom Veo que tu segunda consulta está resuelta.

En cuanto a los enlaces de navegación, como su propio nombre indica son enlaces y por eso toman el color de los del resto del blog, tendrías que añadir algo así en el CSS:

#blog-pager-newer-link a{
color: #fff;
}
#blog-pager-older-link a{
color: #fff;
}
#blog-pager a{
color: #fff;
}

Anónimo

grasias rosa siempre ayudando a los demas :)

Isaac Chavero

Hola Rosa, observo que en tu plantilla (que siempre es una fuente de inspiración) has colacado delante o detras de "entrada más reciente" y "entradas más antiguas" flechas <<
>>.

He intentado añadir las flechas pero me da mensaje de error, tan solo puedo cambiar el texto ¿cómo puedo añadir las flechas, tal como tu las tienes?

gracias

Anónimo

IsaacTienes que escribir en texto plano, es decir, el símbolo que corresponde a cada flecha.
Sería este para cada una, pero escrito todo junto, lo pongo aquí separado para que no se interprete:

& g t;

Isaac Chavero

Muchas gracias, creo que todo lo que sea incluir textos en vez de imagenes acelera la carga del blog

Anónimo

Isaac Chavero Y así es! :D

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S