Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Flechita para volver arriba con efecto deslizante sin scripts externos

Con este truco colocaremos una flechita o un icono que nos permita volver al inicio o la parte superior del blog.

Obtendremos el mismo resultado que al realizar el truco "flechita para volver arriba" pero esta vez, con un efecto deslizante, prácticamente igual al que utilizábamos en este otro tutorial pero sin necesidad de alojar scripts externos en la plantilla: una instalación de lo más simple.

Puedes comprobar el resultado pulsando la flechita en la esquina inferior derecha del Balcón, una vez te hayas deslizado hasta el final de la página.


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y encima inserta este script:

<!-- Volver arriba deslizante blcn-->
<script language='javascript' type='text/javascript'>
var bl_subirdesliz;
function bl_clicsubir() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -40);
bl_subirdesliz = setTimeout(&#39;bl_clicsubir()&#39;, 8);
}

else clearTimeout(t);
}
</script>
<!-- Fin volver arriba deslizante blcn-->

Ahora, justo encima de la etiqueta </body> inserta este código:

<a href='#' onclick='bl_clicsubir();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='ir arriba'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEvs2zlybZLNg_bQhRC9VAC487Ujcjy9JpVXmnhyShxQGtoNuK4IpcVQlUC2lGviyvqTyU_aXwLk5Q6Bc8JxJ_duouiJa7nWYgTRLxFVGQ-FCrWd7i9MVfIP9xLPoUhSNJ9c5A-YDvgo/s320/blsubir.png'/></a>

Como resultado obtendrás la flechita en la esquina inferior derecha. Para cambiar su posición, sigue estos pasos:

- Flechita en la esquina superior derecha:

Cambia el atributo bottom por top.

- Flechita en la esquina inferior izquierda:

Cambia el atributo right por left.

- Flechita en la esquina superior izquierda:

Cambia el atributo right por left así como bottom por top.

Puedes sustituir la imagen por cualquier otra, reemplazando la la línea en color gris con la URL de tu icono [+].

Si en lugar de una imagen prefieres mostrar una palabra borra dicha línea gris y escribe el texto.

La flechita al final de tus entradas

Es probable que prefieras mostrar la flechita o icono en el pie de tus artículos. Para ello, en lugar de introducir el código antes de la etiqueta </body> lo haremos antes de una de estas dos etiquetas (en tu plantilla únicamente aparecerá una de las dos):

<div class='post-footer-line post-footer-line-2'>

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

Y haciendo uso de esta otra línea...

<a href='#' onclick='bl_clicsubir();return false' style='float: left' title='ir arriba'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEvs2zlybZLNg_bQhRC9VAC487Ujcjy9JpVXmnhyShxQGtoNuK4IpcVQlUC2lGviyvqTyU_aXwLk5Q6Bc8JxJ_duouiJa7nWYgTRLxFVGQ-FCrWd7i9MVfIP9xLPoUhSNJ9c5A-YDvgo/s320/blsubir.png'/></a>

El icono se alineará a la izquierda del pie del post. Para alinearlo a la derecha, cambia left por right.

Guarda la plantilla y habrás terminado.

Fabiana dice...

Genial, me viene bien ya que segun decias en otros posts con jquery y scriptaculous no funciona bn. Pero este no necesita nada de eso... ¡Miil gracias!

Luis dice...

Hola Jaime, se que mi consulta no tiene que ver con el articulo, pero te quiero pedir una opinion. Tu tienes habilitada la opcion de expandir y contraer los articulos, por medio de un script +/- pero si utilizas una entrada estatica, cuando las personas dan click en el enlace de la entrada estatica, ella no se expandera y se vera como +/-, y la persona tendria que expandirla como un articulo aplicado con script +/-.

Existe alguna solucion para arreglar eso? Y si deseas puedes intentar con tu propio blog y veras a lo que me refiero. Si logras solucionarlo estare esperando esa entrada con animos. Gracias. :D

Jaime Trujillo Escobedo dice...

Así es Fabiana. Además este truco no retrasará el tiempo de carga del blog ya que el script, además de no ser externo, es bastante corto.

¡Saludos!

Haideé Iglesias dice...

SOS Jaime :), Hace tiempo que te sigo desde Reader.
Me ha surgido un inconveniente -relativo pues se pueden dejar comentarios desplegando la entrada desde el título- en una entrada anterior pulsé la opción de no dejar comentarios desde la ventana de "Creación de entradas" y luego fui a configuración y puse "Ocultar". Ayer subí una nueva entrada y aunque cambié todo no salen la opción de comentario debajo de la entrada. ¿Qué puedo hacer? Si es que se puede hacer algo. Es curioso, porque también había hecho lo mismo en el otro blog, mas no ha surgido esto.

Te dejo la dirección de uno. Se puede pasar de uno a otro pulsando mi fotografía. Estoy con una cámara haciendo una foto.
Http://mirandoenelmundo.blogspot.com

Gracias de antemano.
Un cordial saludo.

felix dice...

Buenas tardes Jaime...

Queria acerte una consulta si fueses tan amable. Resulta que en la plantilla de mi blog, arriba, tiene dos opciones que son INICIO y CONTACTO. Estoy loco literalmente ;O porque no soy capaz de que al pulsar CONTACTO, aparezaca un formulario para contactar o en el peor de los casos una ventana que indique mi mail.

Recibe un abrazo Jaime

Aurora dice...

Hola Jaime, aunque sobre todo espero con muchas ganas el post sobre crear menús con pestañas, hay un tema pequeñito que me da problemas: que los párrafos empiecen la primera línea con sangría. Aunque ponga espacios, al publicar se eliminan.
He leido que hay una forma engorrosa que es poner &nbps varias veces y que eso coloca espacios, pero seguro que se puede automatizar esto un poco. Si no, en cualquier caso esto es secundario. Lo del menú sí que me tiene loca de verdad... :) Saludos

Jaime Trujillo Escobedo dice...

Luis, entiendo perfectamente lo que me quieres decir. Verás, por el momento no he dado con la manera de hacer que el truco funcione también con entradas estáticas, por lo que, hasta que encuentre el procedimiento de "arreglarlo" te recomendaría que en lugar de usar entradas estáticas que ofrece blogger, hicieses uso de entradas normales con propiedades destintas (ver entrada al respecto).

Muchísimas gracias por haberme informado.

Jaime Trujillo Escobedo dice...

Tranquila, Haideé Iglesias, daremos con la solución. Supongo que te refieres a la desaparición del enlace "X comentarios" en el pie de tus entradas, concretamente en el pie de los artículos del blog "Mirando el mundo".

Si es así, haz lo siguiente para recuperar el enlace ;)

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<div class="post-footer-line post-footer-line-1">

Ahora, justo debajo añade este código:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Haz vista previa y guarda la plantilla si el enlace vuelve a verse.

Jaime Trujillo Escobedo dice...

Felix Casanova, acabas de darme una idea para una entrada. Su título será: Crear un apartado de contácto en el blog.

Pronto podrás verla publicada y aplicarlo así en tu blog.

¡Abrazos!

Jaime Trujillo Escobedo dice...

Aurora, ¿Podrías indicarme la dirección del blog? Así podré ver de lo que se trata realmente y muy probablemente dar con una solución.

En cuanto al menú desplegable... ¡Paciencia! ^^.
Ya estoy preparando la entrada pero aún no la publicaré: prefiero tardar un poco más y explicarlo todo paso a paso que dar un par de instrucciones y que resulte agobiante ;).

Luis dice...

Gracias Jaime me funciono a la perfeccion, solo queda esperar que puedas solucionar el problema de las estaticas, para que no aparezcan con la opcion expandir y contraer. :D Gracias de nuevo.

Jaime Trujillo Escobedo dice...

Me alegro mucho Luis. Cierto, haber si durante el verano logro arreglarlo o dar con una solución.

BiBliOpEquE dice...

GRACIAS JAIME, necesitaba una flechita que funcionara en las plantillas nuevas de Blogger. Y ésta, finalmente ¡¡fue para arriba!! ALELUYA

Pero, te cuento, pegándolo encima de head y body, como dices, la flecha no anduvo, lo puse “antes de” y salió la flecha disparada. La semántica es muy traviesa a la hora de poner estos indescifrables códigos….. ;) , aunque confieso, las nuevas plantillas son muy, muy, muy quisquillosas

Me retiro infinitamente agradecida.

Abrazo argentino.

Marcelo Mendoza dice...

Jaime sigo agradeciendo tus grandes aportes. Felicitaciones ;)

Jaime Trujillo Escobedo dice...

¡A quedado perfecto, Los peque de la BiBliO! Es cierto que las nuevas plantillas son algo extrañas pero debemos acostumbrarnos al "nuevo blogger" que está naciendo.

De veras, la flechita en tu blog queda muy bien, además es de tamaño reducido por lo que es discreta y útil a su vez.

Abrazo español.

Jaime Trujillo Escobedo dice...

¡Un placer Akiles!

GHOST62 dice...

me sirvio mucho gracias

Jaime Trujillo Escobedo dice...

Gracias a ti, Ghost62.

Anónimo dice...

muchisimas gracias, ya lo he agregado a mi blog...

<a href="http://jonnivan.blogspot.com/>Mi Blog</a>

Jaime Trujillo Escobedo dice...

Me alegra que lo hayas instalado, Anónimo. La flechita se ve muy bien.

Nota: Al incluir un enlace, no escribas la barra de cierre al final de la primera línea ya que un enlace únicamente se puede cerrar con </a>.

JAVI dice...

Eres un crack, amigo.. puse la flechita y ya de paso un texto "Sube parriba" jajaja.
Un saludo y gracias

Jaime Trujillo Escobedo dice...

Y el resultado es maravilloso, Delio. Gracias a ti por comentar.

Alex494 dice...

Muchas gracias Jaime por este truco!! muy facil de instalar, gracias.

Jaime Trujillo Escobedo dice...

Alex494, no solo es fácil de instalar sino que posee la ventaja de no depender de una librería externa por lo que su funcionamiento no afectará en modo alguno al cargar la página (al contrario que con las librerías externas, que se alojan en lugares ajenos al blog y tardan en cargar).

Anónimo dice...

Hola Jaime, felicitarte por tu ayuda como siempre. Tengo un problemilla y es que el deslizamiento de la barra al pinchar sobre a flecha no lo hace correctamente.

Si puedes echarle un vistazo te lo agradecería. Muchas gracias y un saludo y feliz año nuevo. :)

http://unamiradaemprendedora.blogspot.com/

Jaime Trujillo Escobedo dice...

Anónimo, al parecer la solución más rápida es la de aplicar este otro truco pues el actual parece no encajar bien con la plantilla que utilizas.

También puedes probar con esto otro ya que el funcionamiento será correcto al 100%.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo