61

Volver arriba en cada post y en pie de página

Facilitará a nuestras vistas el poder "volver arriba", es decir, ir al inicio de la página desde cada post con un simple click, sin tener que andar usando la barra de scroll cuando terminan de leer un post.
Buscamos en el html de la plantilla esta parte, que es donde yo creo quedará mejor:

<p class='post-footer-line post-footer-line-1'/>

Y justo encima, agregamos esta línea:

<a href='#' title='Volver Arriba'>Ir arriba</a>

Justo antes de: <p class='post-footer-line post-footer-line-3'/> también quedaría bien, la colocación va en función de los gustos de cada uno.

También podemos usar una imagen, un icono pequeño sería lo adecuado, solo hemos de sustituir el texto "Ir arriba" por la url de nuestro icono: <img src="url del icono"/>

Este es el código que yo estoy estaba usando, con la url de imagen de la casita incluida, por si queréis usarlo tal cual lo veis en El Escaparate, es decir colocado a la derecha del pie de la entrada. Lo he colocado justo después de: <div class='post-footer'>

Código
<!--Casita ir arriba -->
<a href='#' title='VOLVER ARRIBA'><img align='right' src='http://img66.imageshack.us/img66/1698/houserq1.png'/></a>

Nota
Lo que pongais en "title" es lo que se leerá al poner el cursor sobre el icono, en un pequeño cartel emergente.
La primera línea del código <!--Casita ir arriba --> la he añadido para una vez colocado en la plantilla poder localizarlo fácilmente si es necesario.

Volver Arriba al pie de página

Si queréis usar el icono al pie de la página además de en cada entrada o solo al pie del blog, colocamos este código en nuestra plantilla, casi al final de todo su código, antes de  </body>:

<a href="#" style="bottom: 0px; position: fixed; right: 0px;" title="Volver Arriba"><img src="Url_de_la_imagen"/></a>

Entradas Relacionadas:

61 comentarios:


Fini

Cada día aprendo más con tu blog, algunas cosas las utilizo y otras no, pero todas son interesantes. Te leo siempre aunque no te deje muchos comentarios pero hoy si, aunque solo sea para saludarte....

Rosa

Fini, y así es como debe ser. Hay que pensar en lo que verdaderamente necesitamos o es más adecuado para nuestro blog y no "liarse" a instalar de todo, porque lo único que conseguiremos será sobrecargar el blog.

¡Gracias por el saludo!
¡Un abrazo!

Gabriel

Hola, Rosa:
Una consulta: quisiera centrar los datos de mi perfil en la parte de Mis datos personales en mi blog (soymosquero.blogspot.com). Podrías ayudarme con esto?

Pau

yo puse un gatito... era que no jijiji :D
Con respecto al mostrar ocultar había probado trucos de otros y no me salían el tuyo si :) pero después vere si lo aplico mi problema es que quiero que se vean las imagenes de los perfiles en los comentarios, antes me salia y ahora no puse el truco de gema y nada no resulta buuuu como lo puedo solucionar? :D
besos buena semana

Manuel Márquez

He descubierto tu blog muy recientemente, a través del del compañero Josep, y, verdaderamente, se trata de una fuente de información tremenda para introducir mejoras y añadidos en el propio blog. Intentaré seguirlo con regularidad, y, como bien señalas, introducir aquello que pueda servir para mejorar el mío (que, a nivel de "parafernalias", es auténticamente espartano).

Un abrazo.

Noa

Me lo quedo!! jajaja.
Besitos!!!

Rosa

Pau, para lo de los comments, solo conozco ese truco (el mismo de Gem@) yo tuve que quitarlo del Escaparate porque dejó de funcionar, el caso es que en "cabreada" funciona de perlas...no se si será la plantilla, algún script añadido o sabe Dios...

Rosa

Manuel gracias! a veces las "parafernalias" no son más que eso...mejor lo funcional a mi modo de ver...

Rosa

Noa, ya vi tu casita, queda guapetona en el fondo negro :-)

Rosa

Gabriel, he visto lo que dices, al no mostrar la imagen el texto se va hacia la derecha, supongo que será cosa de ajustar paddings en el profile...en cuanto tenga un ratillo lo compruebo.

Arbillas

¡¡ chuli, chuli !! y sencillo.

me lo aplico..

Gracias como siempre Rosa..

Rosa

Arbillas, ya la he visto, te ha quedado chuli, la verdad que esta casita queda guapa porque no tiene fondo...

Yo misma

Otra cosa más que te tomo "prestada" para la decoración navideña! Mi icono es un poco grande, pero es lo bueno que tienen las plantillas Minima, que en estas cositas puedes pasarte un poco. Además, desde cuándo la decoración navideña es discreta??? El 7 de Enero ya volveré al blog espartano...

Rosa

Yo misma, genial ;-)

Antonio Herrera

Hola de nuevo.

Como no hay dos sin tres, ni tres sin cuatro en mi caso vuelvo a hacer uso de tu ayuda.

¡Ah! Muy agradecido por tu ilustre visita, me ha hecho especial ilusión.

Hasta pronto.
http://defotosyotros.blogspot.com

Rosa

Antonio, gracias a ti:-)

elnota-kun

Rosa, acabo de conocer tu blog, y te estoy muy agradecido por todo. Aunque parezca raro a estas alturas, hace sólo dos días que me he decidido a mudarme a la nueva versión de blogger, porque tenía miedo de perder mi plantilla clásica, que la tenia muy modifiada a mi gusto. Gracias a tus trucos me decidí a dar el salto, y en este poco tiempo he recuperado la mayoría de las funciones (adaptadas al blogger nuevo gracias a tus trucos) y he añadido novedades que no conocía y que hacen más cómodo y atractivo mi blog (al menos para mi gusto :)

¡un saludo muy grande, y muchas gracias! :)

Rosa

elnota-kun. me alegro de que te hayas decidido, es muchísimo mejor.
¡Gracias a ti! :-L

Nerim

Acabo de aplicar la casita en mi blog y me ha quedado genial, muchas gracias por tu ayuda, vamos a tener que hacerte un monumento.

Quiero poner una imagen para que me puedan enviar correos directamente, solo que no se como hacerlo, me podrias indicar como se hace?.

De nuevo muchas gracias.

Rosa

Nerin, me alegro que te quedara chula:D
Para el correo seguro que te sirve esta entrada

fry

Rosa, me pasa una cosa extraña: si miras mi blog (www.rostruo.blogspot.com) verás que he añadido el código para poner un icono de volver arriba en cada post, pero resulta que me sale un cuadro enmarcando el icono (que se supone que tiene fondo trasparente). Esto me pasa incluso si copio y pego el código de la "casita" de tu blog. ¿A qué puede deberse?.

Además, parece ser que en Opera no me funcina bien del todo (me imagino que eso es culpa de Opera, en Firefox va bien, aunque sigue viendose el "cuadro" alrededor de la imagen). ¡Un saludo!

Rosa

Fry, de extraño no tiene nada...tienes aplicado en el css el código para que tus imágenes en los posts se vean con borde, el post-footer forma parte de los post y es por eso que cualquier imágen que pongas ahí también tendrá borde.

Guiándote por esta entrada podrás hacer que esa imagen se vea sin borde, o eso, o quitar el borde a todas las imágenes de las entradas.

fry

¡Gracias, Rosa! Eres ídolo de masas :) ya he conseguido quitar el borde de las imagenes (no sabia que se podia poner o quitar :)

¡saludos!

rosanalpz

Hola Rosa,
He descubierto tu blog y estoy encantada: ¡la solución a todas mis dudas! Enhorabuena por tu blog y por tu ayuda. Me está sirviendo de mucho para mi blog.


http://aycandicorner.blogspot.com/

Rosa

rosanalpz, pues muchas gracias :D
Encantada de tenerte por aquí.

Rosalina Huaranga Morales

Hola Rosa... recien conoci tu blog... me hace feliz saber que hay gente como tu... jeje ...

sabes este post habla sobre ir al inicio... pero se va al inicio de la pagina en general...

porque mira yo tengo varios post (digamos 10)... leo el post 5 (digamos que es largo) y quiero volver al inicio del post 5... y no al inicio de la pagina en general...

please respondeme...

Gracias (:

Silvi

Gracias a este blog todo el tiempo le estoy añadiendo mejoras al mío. Así que no me cansaré de dar las gracias :D

Diego Arenas

Funciono a la primera je sere fiel a este blog muy bueno...

Wakinnebis

Una duda que me ha surgido Rosa, yo tengo mi pie de entrada alineado a la derecha, ¿como hago para poner "Ir Arriba" alineado a la izquierda y en la misma linea que el "Publicado por..."?.
PD: En mi caso, he puesto "INICIO".

Rosa

Wakinnebis, tendría que colocar el código de "inicio" pegado al del "publicado por" que es este:
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Y en el código del "inicio" cambiar el img align='right' por img align='left'

GOCASE

Rosa en mi caso en donde o encima de que codigo debo de incluir esta casita o imagen puesto q tus codigos rara vez son los mismos de mi plantilla plantilla

Gracias

Rosa

Gocase, mis explicaciones son siempre para las plantillas originales de Blogger, así que en las otras en ocasiones el código no es igual e incluso podría no estar...

En este caso, la línea que hay que localizar, SI está en tu plantilla ya que la veo desde su código fuente.

GOCASE

Rosa mil gracias lo estaba haciendo mal, ahora me funcina perfecto solo q con ma stiempillo cambiare la imagen por una de fondo transparente, ahhh y como utilizo el truco de leer mas seria posible esconder la casita en la pagina principal y q solo aparezca en las paginas individulaes de cada post?

Mil gracias de nuevo sos fantastica :)

Rosa

GOCASE, pones justo delante del código de la casita esto:
<b:if cond='data:blog.pageType =="item"'>

y justo al final esto </b:if>

GOCASE

Mira asi quedaria el codigo lo he puesto de esas dos maneras Error 2

Asi quedaria el codigo( cambiando los )( por <>) pero no me da q he hecho mal, tambn puse el codigo antes de Casita y nada y despues de casita donde esta el codigo y nada... q pasara? MMM

Ademas porq ya me sale un link de texto q me dice IR ARRIBA q antes no decia? me ayudas porfa!!!

PD: disculpa q haya hecho captura de pantalla en word eso es un pecado capital Html en word q pena!!

Rosa

GOCASE, perdona :$ ha sido un error mio.

Es así:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!--Casita ir arriba -->
<a href='#' title='VOLVER ARRIBA'><img align='right' src='http://img66.imageshack.us/img66/1698/houserq1.png'/></a></b:if>

GOCASE

Rosa no creas q soy un desagradecido, jeje es q solo hasta el dia de hoy me quedo un tiempito y ahora me funciona de maravilla, muchas gracias!!!!

Christopher Sebastian Rodriguez

Hola Rosa me ayudas nuevamente jeje debido a eso te lo agradesco enlazandote, bueno cambiando de tema fue muy facil colocar este codigoo pero la casita lo cambiare por otra imagen pero eso no es por lo que escribo este comentario, mira quiero poner un boton ir arriba pero flotante en el blog asi como esta ahora en mi blog de pruebas pero el problemas es que no sube solo actualiza el blog, en fin te pido una ves más auxilio XD aqui mi de pruebas http://thewallofchristopher.blogspot.com/

Rosa

Cristopher Has colocado en el código del botón tu dirección del blog:
<a href="http://thewallofchristopher.blogspot.com/"> y lo que tienes que poner es <a href="#">

Christopher Sebastian Rodriguez

Rosa ademas una curiosidad en tu blog el ir arriba lo hace deslizandose lentamente pero en el blog donde lo he puesta lo hacer muy rapido. ¿Por que?

Rosa

Cristopher Yo uso un sistema distinto, algo más complejo, con un script.

GOCASE

Rosa otra vez yo molestandote con esto de ir arriba, como te dije en mi ultimo comentario por aca todo marchaba a la perfeccion, ahora veo q hay otro problema.

Mira navengando por mi blog de pruebas pase a entradas antiguas y vi que en esta pagina se muestra el ir arriba en cada resumen de cada entrada cosa q estaba solucionado o por lo menos q en la principal no se muestra, lo unico que quiero es q exclusivamente el IR ARRIBA se vea cuando cada entrada este expandida y no en la principal.

Te adjunto donde puedes ver lo q esta pasando

blog de pruebas

Rosa

Gocase Intenta colocando esto delante del código de Ir Arriba:
<b:if cond='data:blog.pageType == "item"'> y esto al final </b:if>

GOCASE

Rosa ya lo he intaentado en todos los sitios donde puedo añadir este codigo y siempre me sale

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 "div" must be terminated by the matching end-tag "

me ayudas en donde lo coloco exactamente o q ocurre?

Gracias

Rosa

Gocase En mi caso tengo la casita colocada después de <div class='post-footer'> y acabo de colocarla como te digo sin ningún problema:

<b:if cond='data:blog.pageType == "item"'>
<a href='#' title='VOLVER ARRIBA'><img align='right' src='http://img66.imageshack.us/img66/1698/houserq1.png'/></a>
</b:if>

librosquemuerden

Hola Rosa! Paso a dejarte un millón y medio de gracias por todos los trucos geniales que compartes en este blog, te invito a ver el mio para que me digas si te gusta cómo va quedando!

Es un blog dedidado a escritores independientes de argentina (yo mismo soy uno de ellos)

Hasta pronto y gracias otra vez!!!

Sebastián

CEIP NTRA_SRA DE LOS DOLORES

Hola Rosa:
estoy intentando incluir el icono "ir arriba", pero buscando en mi plantilla, no aparece ninguna frase de las que propones que busquemos para insertar el código.
Mi blog era:
http://colealomartes.blogspot.com
Saludos y gracias por tu ayuda.

Rosa

CEIP Probablemente lo estás haciendo sin expandir las plantillas de artilugios...te digo esto, porque <div class="post-footer"> está en tu plantilla seguro.
También puedes ponerlo después de:
<div class="post-footer-line post-footer-line-1">
Si te es más fácil de localizar esta línea...pero recuerda expandir artilugios.

CEIP NTRA_SRA DE LOS DOLORES

Muchas gracias Rosa.

Lo he conseguido con tus indicaciones. Eres un encanto

Sergio Gil

Hola Rosa !

Coloque los códigos y gracias !

Me podrías regalar el script para alojarlo en mi plantilla para que suba mas lento ?

Gracias anticipadas,

Sergio

Rosa

Sergio Para este efecto no se usa un script, solo una "orden" desde un a href..

Si te refieres a que el efecto sea como en mi blog, entonces hablas de esto:
http://elescaparatederosa.blogspot.com/2009/04/volver-arriba-con-efecto-deslizante.html

Sergio Gil

Gracias Rosa !

Me funcionó perfecto y gracias de nuevo,

Slds,

Sergio

Nafire

super gracias rosa

DarkLord

buenas, sabes como hacer para ocultar o eliminar los carteles de (entradas antiguas, pagina principal y entradas mas recientes)?... si lo sabes me vendria bien una mano...gracias...y slds

Rosa

DarkLord Pues haces lo que indico en esta entrada, pero al revés :D
http://elescaparatederosa.blogspot.com/2009/03/recuperar-los-enlaces-de-navegacion.html

En lugar de quitar eso que digo allí, tu lo añades.

Bilosony2™

Otravez gracias Rosa lo acabo de aplicar a mi blog,:) nada mas que me avive y le puse un efecto deslizante jeje:P

alicia-nr

:D Ladran Sancho, señal que avanzamos!!! Gracias Rosa, algo más que implementé facilmente, un beso!

Rosa

alicia-nr ¡Que ladren!... tu avanza! :D

Jimi Hendrix

Hola Rosa,

No consigo encontrar la línea

"p class='post-footer-line post-footer-line-1"

en la plantilla. ¿Es debido a que todavía estoy usando las plantillas antiguas?

La copio y la pongo tal cual la tienes, pero no la encuentra.

Muchas gracias

Rosa

Jimi Hendrix i es antigua aún mejor... quizá en lugar de p tengas div:

"div class='post-footer-line post-footer-line-1"

Kiralisimo

gracias Rosa lo aplique a mi blog y quedo bien :D

Publicar un comentario en la entrada

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