Blogger y vínculos de retroceso (2)

¿Donde están los códigos de los vínculos de retroceso en la plantilla? Por varios lados, siempre dentro del elemento Blog.

En la página principal los veremos por defecto con el texto Vínculos a esta entrada y es un enlace que sólo nos llevará a la página individual del post y se posicionará en el footer:

<span class='post-backlinks post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
        <data:top.backlinkLabel/>
      </a>
    </b:if>
  </b:if>
</span>

el enlace generado es de este estilo:

http://nombre.blogspot.com/año/mes/titulo.html#links

donde #links es el nombre (anclaje) que tiene esa parte de la plantilla (¿qué es un anclaje?).

<data:top.backlinkLabel/> es el texto visible y puede ser reemplazado por cualquier otro o utilizar una imagen

Las propiedades CSS que la controlan, por lo general no están definidas y no suelen ser necesarias ya que se usan las mismas que para el resto de los enlaces del footer.

Más adelante, encontraremos el código que genera un ícono al lado de cada vínculo y con el cual podemos eliminarlo de manera similar al que vemos en los comentarios. Es algo así:

<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>

A los efectos de la personalización de nuestro blog no es un área importante así que podemos pasarla por alto.

Lo que genera el bloque donde se mostrarán los vínculos de retroceso y que sólo se muestra en las paginas individuales tiene este código:

<div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
</div>

Ahí, ya vemos que ese bloque tiene un ID (un nombre) que es con el que podremos controlarlo. Por defecto se llama backlinks-container y no suele estar incluido en las plantillas pero, no es problema, podemos agregarlo justo antes de </b:skin>. Por ejemplo, en mi caso le he puesto estas propiedades:

#backlinks-container {
  clear: both;
  background: none;
  padding-top: 20px;
}

En el código anterior no parece haber nada salvo el DIV y esto:

<b:include data='post' name='backlinks'/>

que es justamente el código que usa Blogger para indicar que ahí debe insertarse algo. Eso que inserta, lo podemos ver en el último código que es el más largo y donde encontraremos lo que falta para personalizar el área.

En una plantilla típica dice esto:

<b:includable id='backlinks' var='post'>
  <a name='links'/>
  <h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'> 
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'>
              <data:backlink.title/>
            </a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'>
              <data:post.authorLabel/> <data:backlink.author/>
            </span>
            <span class='comment-timestamp'>
              <data:post.timestampLabel/> <data:backlink.timestamp/>
            </span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' 
        expr:href='data:post.createLinkUrl'
        expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;'
        target='_blank'>
      <data:post.createLinkLabel/>
    </a>
  </p>
</b:includable>

Ahhhhhh ... renuncio.

Es lo primero que uno piensa y es razonable hacerlo pero, vamos despacio porque no es necesario modificarlo demasiado sino tratar de entender qué hace cada cosa.

<a name='links'/> es el nombre del anclaje; sólo sirve para posicionarse allí.

<h4><data:post.backlinksLabel/></h4> es el título que nos muestra Blogger por defecto y que suele tener una fuente gigante donde leemos Vínculos a esta entrada. Por defecto, es igual que el título e los comentarios pero podemos darle propiedades especiales agregándolas al CSS de la plantilla:

#backlinks-container h4 {
  /* aquí ponemos las propiedades */
}

Lo que sigue es un bucle que realiza Blogger buscando en su base de datos los enlaces que existan y mostrándolos como una lista. La etiqueta DL crea la lista y las etiquetas DT son cada una de las líneas que tienen este orden:

un ícono que cambia cuando hacemos click para mostrar que está contraido o deplegado
<data:backlink.title/> es el título del post que es un enlace al blog donde se publicó
<data:post.authorLabel/> el nombre del autor del post
<data:backlink.author/> la dirección URL del perfil del autor
<data:post.timestampLabel/> <data:backlink.timestamp/> la fecha y hora de la publicación
<data:backlink.snippet/> es un resumen del texto del post que nos enlaza y está oculto

Todo eso no tiene propiedades diferenciadas, las plantillas suelen tener propiedades genéricas que hacen que se vea igual que el resto de los comentarios. Tampoco está previsto así que deberemos agregarle clases a cada cosas que queremos cambiar.

Le agregamos una clase al título:
<a class='backlinkTitulo' expr:href='data:backlink.url' rel='nofollow'>

cambiamos la clase CSS del autor <span class='comment-author'> por otra:
<span class='backlinkAutor'>

cambiamos la clase CSS de la fecha <span class='comment-timestamp'> por otra:
<span class='backlinkFecha'>

para personalizar el contenido <data:backlink.snippet/> habrá que utilizar la etiqueta SPAN:
<span class='backlinkContenido'><data:backlink.snippet/></span>

Ahora, ya podemos colocar las definiciones en la plantilla. Otra vez, este un ejemplo personal:

a.backlinkTitulo, a.backlinkTitulo:visited {   /* el enlace del título */
  color: #778899;
  font-weight: normal;
  text-decoration: none;
}
a.backlinkTitulo:hover { /* efecto rollover en el enlace */
  color: #CCCCCC;
}
span.backlinkAutor { /* el autor */
  color: #99AABB;
  font-family: Tahoma;
  font-size: 12px;
  padding: 10px 25px 0 0;
  text-align: right;
}
span.backlinkFecha { /* la fecha */
  color: #99AABB;
  font-size: 10px;
  text-align: right;
}
span.backlinkContenido { /* el contenido oculto */
  display: block;
  background-color: #1E252D;
  margin: 7px 7px 7px 20px;
  padding: 10px;
  text-align: justify;
  width: 90%;
}

Si, como en mi caso, no queremos mostrar alguno de los datos, simplemente lo eliminamos o, mejor aún, lo "comentamos" para no perderlo si es que alguna vez queremos restaurarlo. Por ejemplo:

<!-- <data:post.timestampLabel/> <data:backlink.timestamp/> -->

Como último paso para este bloque nos queda la posibilidad de personalizar los íconos que usa Blogger por defecto y para eso, igual que alguna vez lo hicimos con el elemento Archivos, no puede hacerse igual que con el resto de las propiedades porque Blogger agrega una hoja de estilo que sobrescribe la nuestra así que, debemos esperar que la inserte y recién luego cambiarla.

Lo hacemos colocando el estilo justo después de la etiqueta <body>. En lo personal, usé las mismas imágenes de los triangulitos, les cambié de color y las subí a un servidor:

<style type='text/css'>
  .backlink-toggle-zippy {
    background-image:url(URL_icotriangle_open.gif);
  }
  .expanded-backlink .backlink-toggle-zippy {
    background-image:url(URL_icoTriangle_ltr.gif);
  }
</style>

Ahora sí, sólo nos queda cambiar el enlace que por defecto dice Crear un vínculo. Eso es lo que se muestra en el final del código, lo que está entre <p class='comment-footer'> y </p>.

<data:post.createLinkLabel/> es el texto que se muestra

Como cualquier enlace, podemos cambiar el texto o utilizar una imagen.