usuario me pidió que sea desplazable, la mayoría de los tutoriales que se encuentran en Internet son bastantes abruptos, ¿Que quiere decir abruptos? que no se desplazan si no que bajan directamente hacia los enlaces tipo ancla, en este tutorial le daremos un poco mas de delicadeza.
OK! como vemos ahí dos tipo de anclajes uno para la caja de comentarios y otro en un texto.
Comencemos explicando el anclaje en el texto
- Paso 1: Primero que tendremos que crear nuestro enlace
Una ves ello esto pegaremos o redactaremos nuestro texto. Ya redactado nuestro texto buscamos la linea que queramos que se desplace nuestro enlace ancla.
Ejemplo.
......An harum equidem maiestatis nec. <div id="ancla">....At has veri feugait placerat, in semper offendit praesent his. Omnium imp....</div>....at vidisse dolores ocurreret nam.....
Solo debemos de agregar la etiqueta <div id="Anclaje"> y su etiqueta de cierre </div>En la demo vera mejor lo que quiero decir
Si queremos que se desplace por un sector del blog, como la caja de comentarios buscaremos la div de nuestra caja de comentarios
¿Como hacemos eso?
Fácil
En una entrada damos clic derecho, inspeccionar elementos, clic en la lupa: selector de elementos, y buscamos el elemento a que queramos que sea un enlace anclaje, en mi caso sera la caja de comentarios.
Ejemplo seria:
Por ultimo agregaremos el código JQuery que hará que esto se desplace delicadamente
- Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
- Paso 3: Justo por encima de </body> pegamos el código JQuery
<script type='text/javascript'>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
- Paso 4: Guardamos los cambios realizados y listo a disfrutar
Hola, gracias por hacer este tutorial tan rápido,pero tengo un problema:
ResponderEliminarEl efecto no me funciona y al mirar el script en la plantilla veo que cambia el carácter ' por & #39; dime eso es normal? y como podría corregirlo?
Disculpa pero ya no es necesario ya vi cual es el problema, al parecer le hice algo a la plantilla y por eso no funcionaba
EliminarRespecto al carácter que cambia , no ahí problema... ya que se modifica a tu plantilla.
EliminarRespecto a que no te funciona, trata que no se te cambia la URL. Por algunas razones blogger te agrega un URL predeterminada, cuando vallas a publicar tu entrada vuelve a fijarte en enlace ancla no se modifique
<div id="ancla">
Saludos
Hola!! me gusta mucho tu blog, me es de mucha utilidad... me gustaria hacerte alguna consulta ya que es algo que he buscado por todas partes y no encuentro respuesta alguna.
ResponderEliminarHay alguna de forma de el dagdet linkwhith centrarlo? y la palabra "10"comentario hay forma de centrarla y cambiarle el tamaño?
Espero alguna repuesta,gracias anticipadas.
www.27forever.es
Ok... veremos si creamos un tutorial para que lo pides...
EliminarEspero que sepas esperar
Hola amigo, he estado buscando algo asi, y tu le atinaste al clavo, solo que yo tengo un pequeño detalle, mi web no es un blog, es una pagina que usa javascript, que al momento de teclearle al menu en el lugar quye ubique el ancla no me muestra el contenido, tengo que darle click a menu inicial primero, ahi es donde me despliega el contenido y despues ya funciona el ancla, pero ya dentro del menu.
ResponderEliminarMe marca un error de sintaxis en la linea:
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
y dice: es posible que la sugerencia para el codigo no funcione hasta que resuelva el error
Podrias ayudarme porfavor¿?
Como se pone un anclaje para el remolque de mi padre?
ResponderEliminar