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
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>
61 comentarios:
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....
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!
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?
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
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.
Me lo quedo!! jajaja.
Besitos!!!
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...
Manuel gracias! a veces las "parafernalias" no son más que eso...mejor lo funcional a mi modo de ver...
Noa, ya vi tu casita, queda guapetona en el fondo negro :-)
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.
¡¡ chuli, chuli !! y sencillo.
me lo aplico..
Gracias como siempre Rosa..
Arbillas, ya la he visto, te ha quedado chuli, la verdad que esta casita queda guapa porque no tiene fondo...
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...
Yo misma, genial ;-)
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
Antonio, gracias a ti:-)
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! :)
elnota-kun. me alegro de que te hayas decidido, es muchísimo mejor.
¡Gracias a ti! :-L
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.
Nerin, me alegro que te quedara chula:D
Para el correo seguro que te sirve esta entrada
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!
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.
¡Gracias, Rosa! Eres ídolo de masas :) ya he conseguido quitar el borde de las imagenes (no sabia que se podia poner o quitar :)
¡saludos!
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/
rosanalpz, pues muchas gracias :D
Encantada de tenerte por aquí.
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 (:
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
Funciono a la primera je sere fiel a este blog muy bueno...
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".
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'
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
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.
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 :)
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>
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!!
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>
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!!!!
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/
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="#">
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?
Cristopher Yo uso un sistema distinto, algo más complejo, con un script.
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
Gocase Intenta colocando esto delante del código de Ir Arriba:
<b:if cond='data:blog.pageType == "item"'> y esto al final </b:if>
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
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>
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
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.
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.
Muchas gracias Rosa.
Lo he conseguido con tus indicaciones. Eres un encanto
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
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
Gracias Rosa !
Me funcionó perfecto y gracias de nuevo,
Slds,
Sergio
super gracias rosa
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
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.
Otravez gracias Rosa lo acabo de aplicar a mi blog,:) nada mas que me avive y le puse un efecto deslizante jeje:P
:D Ladran Sancho, señal que avanzamos!!! Gracias Rosa, algo más que implementé facilmente, un beso!
alicia-nr ¡Que ladren!... tu avanza! :D
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
Jimi Hendrix i es antigua aún mejor... quizá en lugar de p tengas div:
"div class='post-footer-line post-footer-line-1"
gracias Rosa lo aplique a mi blog y quedo bien :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).
![](//3.bp.blogspot.com/_8PJ-pgoBhWQ/TFU4B8LFyCI/AAAAAAAAISg/nmgOd4tIw1g/s1600/email-el-escaparate.png)
Los comentarios están siendo moderados.
Comentar con el formulario antiguo