Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Agregar iconos de navegación al blog -39-

Iconos de navegación.- Son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones o flechas, cuya función es ayudar al visitante a navegar por nuestra página.
Ejemplo:
Photobucket - Video and Image Hosting Photobucket - Video and Image Hosting Photobucket - Video and Image Hosting

1. Para agregar los iconos de navegación tendrás que ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios. Luego buscas el includable con el id nextprev.

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

2. Una vez ubicado <b:includable id='nextprev'>, tienes que reemplazar todo el código anterior por lo siguiente:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

3. Por otro lado, si tu quieres cambiarlo por algún texto, tienes que reemplazar:
- <img src='http://...left.gif'/> (Entradas antiguas) por tu texto.
- <img src='http://...right.gif'/> (Entradas más recientes) por tu texto.
- <img src='http://...home.gif'/> (Página principal) por el texto que deseas.

Nota: Te voy a proporcionar algunos iconos que he subido a Photobucket para que los pegues en tu blog, pero si no te gustan, entonces tendrás que utilizar un buscador y escribir iconos de navegación

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-1.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-1.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-1.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-2.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-2.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-2.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-3.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-3.gif" />

Photobucket - Video and Image Hosting
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-3.gif" />

Via: Hoctro's Place

40 Comentarios:

eli_! dijo...

Buenas!!
Tu blog me ha servido de mucha ayuda para implementar el mio.
Cambié a la nueva versiópn y se me ocurrio editar mi plantilla y ha sido un parto, pero con tu ayuda, he podido modificar de a poco los cambios.

Quisiera hacerte una consulta, desde que cambié, en mi blog, aparece la opción de editar (con un gif de desatornillador).

Existe la opción de ocultarlo??
Gracias de antemano!!

Elisa

Teresanco dijo...

buena info, queda mejor el iconito que eso de entradas antiguas, Veré si cambiarlo =)

Por cierto Elisa, si no me equivoco eso solo lo ve el dueño del blog, los demás no. Si estas en tu cuenta lo ves, si no no. No creo que sea necesario eliminarlo ^^

Muy buena la info!

Knucklesx dijo...

En la nueva version donde debo colocar el codigo por que no me sale el b:includable id='nextprev'

Andrés dijo...

Hola.
Eli: Que bueno que mi blog te este ayudando y te hayas cambiado a la vez a la nueva versión de Blogger, porque es mas sencillo de usar y eso del gif de un desatornillador (editar), como menciona Teresanco eso lo ve el autor del blog.

Teresanco: Que bueno que mi blog te este ayudando.

Knucklesx: En todas las plantillas incluyen el código que menciono en la publicación, cuestión de buscarlo con paciencia, simplemente sigue los pasos. Por ejemplo, he obviado el paso de ir a plantilla, luego edición de HTML y después clic en expandir plantilla de artilugios, eso creo que lo saben todos.
En todo caso si se necesita agregar esta parte que menciono, diganlo.
Bye.
PD: Gracias a los 3 por la visita.

Anónimo dijo...

MUY buen blog!! te queria comentar una cosa e seguido los pasos y me salio perfectamente EL PROBLEMA es que me salen los iconos juntos en la esquina izquierda abajo y me gustaria ponerlos separados como en tu blog si no te importaria me lo podrias explicar y por ultimo hay un truco que no encuentro por ningun lado !!! y justamente es :
hacer que los comentarios salgan en una ventana NUEVA Y pequeña como la de tu blog y no grande con ese color salmon que viene de serie en blogger !!
bueno gracias un salu2

Andrés dijo...

Hi.
Anonimo: Que raro que te salga asi, seria bueno que me pases la dirección de tu blog para ver que pasa y en cuanto a tu pedido estare publicamdo sobre eso mañana.
Bye.
PD: Gracias por tu visita.

A_lex ▼_▼ dijo...

hola andres pues e puesto eso de los iconos de navegación, pero también tengo un problema puesto que no se puede navegar con ellos cual es el codigo completo para eso, por que no e podido poner eso de entradas antiguas nunca, te dejo el link de mi blog: http://t-compartireprogramas.blogspot.com/
me puedes ayudar?

Andrés dijo...

Hola.
A_lex ▼_▼: He visto tu blog y me parece que has pegado el código en otro lugar, porque no deberia salirte asi, mi explicación esta clara. Lo mas probable es que hayas hecho algo mal y el código completo es lo que he publicado al comienzo y luego reemplazas por el código que te proporciono al final.
Otra cosa porque tu sidebar (columna lateral) esta al final, supongo que debes haber puesto algo demasiado grande en la columna principal o sea en donde escribes tus artículos.
Bye.
PD: Gracias por la visita.

Cam dijo...

Revisa radio blog club ! me gusta tu blog luego !
saludos

A_lex ▼_▼ dijo...

andrés pues gracias pero necesito algo mas especifico, por que realmente no se nada XP si tienes un mail donde poder comunicarme contigo para que me expliques con mas calma porfavor ya que sino lo quieres poner aqui tu mail pues en mi blog encontraras mi mail, de antemano te doy las gracias, saludos a todos XD

MacTrucos dijo...

hola Andres !! soy el anonimo de los iconos al lado jajaj si quieres pasate y me comentas a que se debe desde ya gracias

Andrés dijo...

Hi.
Alex: Te escribi y te ayudare en ese cambio, que supongo que la mayoria lo ha hecho.
Aunque me encataria que alguien me diga si lo ha hecho o no.

Mactrucos: Visite tu pagina que bueno me diste la dirección, para revisar tu blog.
He visto que a tu blog le has hecho bastantes cambios y se ve muy bien.
Los iconos te salen asi porque has borrado una cierta parte de codgo en tu palntilla, asi que tienes que agregar lo siguiente:
En
/* Comments
-------------------------------*/

agregas esto casi al final

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

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

#blog-pager {
text-align: center;
}

(en comments)

y se resuelve casi todo, hay un pequeño detalle, asi que una vez hecho esto, vuelves hacer lo que he publicado sobre agregar iconos de nav..... Solucionado el problema.
Después me cuentas como te fue.
Bye.
Gracias por la visita.

MacTrucos dijo...

gracias Andres !! alfinal no se si dejarlo asi!! gracias igual por ayudarme salu2

El Vengador Tóxico dijo...

Un artículo muy útil, a la altura del resto del blog. ¡Ya lo he aprovechado! ¡Gracias!

Caminarsingluten dijo...

Gracias Andres por toda tu información, que nos facilita a todos la labor en blogger.

Un saludo.

Caminante dijo...

Muy bueno el dato... gracias compadre!

yue_sayuri dijo...

Gracias a tus consejos hemos ido haciendo algunos arreglillos a nuestro blog. Gracias por facilitar tantos datos ha sido de gran ayuda ;D

Matías dijo...

andres el blog es genial y me ha ayudado un monton! pero hay algo que no logro hacer y me parece q necesito ayuda.

tengo como 90 entradas en mi blog y ya está tardando bastante en cargar, por eso quiero que se vean solo 30 y se pueda ir a entradas anteriores... el codigo esta en la plantilla, pero no aparecen los links, y si lo cambio por el de los botones, tampoco aparecen! no sé que habré tocado pero no se ve nada al fondo del blog donde deberían estar estos botones... entonces no hay barra de navegación =S

si tenés tiempo entrá a mi blog y fijate si podés adivinar cuál es mi problema, desde ya te lo agradezco!

saludos desde cordoba, argentina

Matías

Matías dijo...

o sea me aparece ek suscribirse a (atom), pero arriba de eso donde tendría que estar la barra de navegación, sean los links o los botones que pusiste vos, no me aparece nada =(

Andrés dijo...

Hi.
El vengador, caminar..., caminante, Yue_sayuri, gracias a ustedes por la visita y este blog está para brindar la ayuda que necesitan.

Matías: Con respecto a las entradas para que salgan 15, 20 ó 25, anda a Etiquetas (en mi blog), clic en Preguntas frecuentes y busca: ¿Cómo puedo modificar el número de entradas que se muestran en mi blog?, si deseas le pones 7 o 15 sea dias o entradas, con eso reduces los post para que se ven en la pagina principal, porque he ingrsado y se demora demasiado, lo mas recomendable es haya máximo 7 quizas hasta menos, depende de ti. Porque el poner que s ecargue toda la pagina con 3o es demasiado quizas para lgunos normal si su velocidad de internet es rapida, pero no todos tenemos una una alta velocidad o mejor dicho rapida, lo que a veces demora en cargar mas son las imagenes.
Lo de agregar iconos de navegación es probable que hayas pegado mal el código, en todo caso has una cosa lo que has borrado sustituye por el código que estaba antes, justo en el post he puesto lo que tinen que sustituir entonces lo que vas hacer es volver a ponerlo en tu blog. Para que te guies busca esto <!--Post feed links -->, mas abajo hay código, todo esa porción o parte termina en </b:includable>, recien ahi pones el código que vas a sustituir. Espero que me hayas entendido. Después me cuentas que fue.
Bye.
Gracias por la visita.

Matías dijo...

ya se como modificar el numero de entradas q se muestran y tambien se donde va el codigo, lo pegué bien. debe ser que toqué algo más en la template y armé quilombo. ya me voy a fijar bien. igual gracias por tu ayuda!

Matías dijo...

ahora si lo arreglé, se ve que cambiando algo más toque algo...a si que puse "Restablecer plantillas de artilugios a los valores predeterminados"... y volví a hacer esto de los botones y lo de las entradas expandibles... saqué lo del ranking porque nadie lo usaba y hacía que el blog tardara mucho en cargar XD, pero ahora anda todo bien!!

éxitos!!

Andrés dijo...

Matías: Que bueno que pudiste arre tu arreglar tu blog, encontraste una manera facil de arreglarlo, todo, bien. Pero siempre es bueno de fijarte bien de lo que haces, hacerlo con calma, paciencia, por eso existe una vista previa.
Bye.

Ángel dijo...

¿Puedo agregar botones de navegación con la plantilla tradicional, sin artulugios?
Gracias

Andrés dijo...

Hi.
Angel: Si te refieres con la plantilla clasica o sea con la plantilla antigua, no se puede. Pero si te refieres sin artilugios, quizas es cuestión de encontrar en donde está el código. Déjame intentarlo.
Gracias por la visita.
Bye.

DOMINIO DIGITAL dijo...

hola andres quiero hacerte una pregunta como puedo poner el logo de un a pagina de un amigo para q cundo lo toque al logo se habra esa pagina no se si esta pregunta va aca pero disculpame
el logo es el de esta pagina www.delcarmenweb.com.ar pero yo lo tengo en mi pc se puede hacer eso medinate un codigo o alguna opcion gracias

Mónica dijo...

Hola!, en primer lugar enhorabuena por tu blog de ayuda es genial. Tenía una pregunta. Mi blog tiene la plantilla antigua ya toda configurada, pero me gustaría incluir el típico navegador al final del blog ("entradas antiguas, pagina principal,entradas recientes) pues al tener la plantilla antigua no me lo muestra. No me importa que sea con iconos pero si me gustaría q me diera la opción de navegar asi. Muchas gracias de antemano, un saludo.

Osacra dijo...

excelente amigo, me vienes ayudando bastante, sigue asì, te dejo mi blog para q me visites http://osacra.blogspot.com

andru dijo...

Amigo!
e colocado el codigo y se ve bien, PERO por alguna razon...los iconos estan cambiados, es decir el de la derecha esta en la izquierda y visceversa.
Si ves mi blog veras que e modificado la columna de la derecha a la izquierda, tendra algo que ver esto????
En un solo dia le e cambiado un monto de cosas y bastante que busque ayuda por la web y jamas consegui algo tan simple y completo como este blog, Excelente trabajo
Saludos

Johan dijo...

Excelente ayuda, ya estaba queriendo cambiar hace tiempo las minúsculas letras "Entradas Antiguas" y "Entradas Recientes" que nadie lograba ver en mi http://ritmoblog.com. Ahora ya están mucho mejor, mas bien trataré de hacer las mias aún más grandes :) Saludos y gracias.

JESY2474 dijo...

Vieras que puedo ubicar el codigo que mencionas y lo reemplazo por el otro, y obtengo este error:

Se ha encontrado más de un artilugio con el ID: HTML1. Los ID de artilugio deben ser exclusivos.

Ayudame por favor, gracias

Daniel Kaimanta dijo...

Andres, permitime felicitarte desde Buenos Aires. Mi blog es algo diferente gracias a tus consejos. También aprendí a visitar otros blog por curioso y he sacodo cosas interesantes. Reproductores automaticos de música, maneras mas atractivas de ver enlaces, pero con tu ayuda he podido hacer de mis blog (son como ocho) algo muy atractivo.

Y la felicitación es mas amplia ya que lo haces como decimos por acá "de onda" de pura buena persona.
Gracias... se te extrañó.
Saludos

MR the web dijo...

La verdad es que me re sirvio la informacion y gracias a ti pude arreglar mi blog.
El problema que tengo es que me aparecen los iconos como tu explicaste pero me sigue apareciendo abajo del icono escrito en texto.
Si me pudieras ayudar te lo agradeseria enormemente.
Si puedes por avor contestame a sermartin@adinet.com.uy
Desde ya muchas gracias y suerte con tu blog.



Saludos Martin

dougmah dijo...

Gracias por el aporte es buenisimo :)

Liиux dijo...

La neta me sirvió mucho este aporte, un saludo porque estáaaaaaaaaaaaa delujo!!

un 1000000 para ti compa

;)

M.K dijo...

Hola!!! Increíble tu página, estaba hecha un caos debido a que no sabía como insertar los botones de navegación en mi blog. 1000 gracias por tu aporte. Ahora tengo una pregunta ¿cómo puedo mostrar los comentarios con el mismo formato con que los muestras en tu blog? De antemano gracias por tu ayuda!!!

Yatch dijo...

Hola, bueno soy nuevo en esot de los blogs, tengo un blog es muy sencillo
pero no puedo encontrar ese codigo para poner los botenes de navegacion mi blog es http://spacero-news.blogspot.com/

carlos dijo...

Buscás accesorios para el blog, tienes que ir a pczeros. Vas a encontrar cronómetros, relojes digitales y analógicos, calendarios, animaciones, fraces, y todo lo que te imagines para agregarle al blog. Después me cuentan... Yo ya puse un calendario en el mío y quedo 10 puntos!. SSaaLLuuDDooSS

Anónimo dijo...

Hola e probado muchas paginaciones y ninguno me sirve, solo este, el unico incoveniente es que me gustaria que tuviera numeracion, como podria ponerselo???

Gracias por todo, tienes un blog estupendo!!

Jeannine CEDEÑO dijo...

HE NAVEGADO DESDE LA TARDE Y SOLO HASTA ESTE MOMENTO QUE ENCONTE TU PAGINA PUDE REALIZARLO UNA SOLUCION DIRECTA Y COMPLETA MUCHAS GRACIAS !!!!

Related Posts with Thumbnails
Últimos Post