OK! Bloggers hoy venimos con un tutorial a pedido del usuario LORD DARHAKEXGE
Este usuario me pidió un tutorial sobre enlaces anclas, ahí varios tutoriales por la red sobre esto, aunque este
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.

Para los que no saben los Enlaces Anclas se utilizan mayormente en sitios donde su contenido es bastante extensos y para no crear otra pagina para continuar con el contenido y que el usuario no se arte de de andar deslizandoce por la entrada se utiliza los enlaces anclas. O también son utilizados para mostrar un contenido en particular 

Antes de comenzar veremos una demostración:
Demo

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 
Para ello pegamos la siguiente linea <a href="#Anclaje">Este sera el enlace tipo anclaje </a>
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: 


<a href="#commentsHolder">Agrega un comentario</a>

Eso seria todo ya que la Id de commentHolder se encuentra en nuestra plantilla y no tenemos que agregar

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)
</body>
  • 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(/^\//,'') &amp;&amp; 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

Recuerda que si no entiendes, para algo esta la caja de comentarios

- - 7 Comentarios
Tag

Comentarios (7)

  1. Hola, gracias por hacer este tutorial tan rápido,pero tengo un problema:
    El 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?

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
    2. Respecto al carácter que cambia , no ahí problema... ya que se modifica a tu plantilla.
      Respecto 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

      Eliminar
  2. 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.
    Hay 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

    ResponderEliminar
    Respuestas
    1. Ok... veremos si creamos un tutorial para que lo pides...
      Espero que sepas esperar

      Eliminar
  3. 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.

    Me 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¿?

    ResponderEliminar
  4. Carla villar Fernández27 de septiembre de 2015, 11:21

    Como se pone un anclaje para el remolque de mi padre?

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar