Añadir enlace de salto y enlace al comentario en Blogger

Algunas plantillas no incluyen la función jump-link y comment-link. Estos nombres son unos enlaces que se suelen colocar en las entadas para hacer un salto a la entrada, o a los comentarios.

En este tutorial, explicaré cómo hacerlo bien.




Primero, tenemos que ir a Diseño | Edición de HTML, y es importante, marcar la casilla "Expandir plantillas de artilugios".

Con el buscador de palabras (para que aparezca pulsa Ctrl + F) y busca el siguiente código:

<data:post.body/>

Este valor suele repetirse más de una vez, por lo que hay que buscar el código que está dentro de:

<div class='post-body entry-content'>

Una vez encontrado el valor, debemos pegar antes del mencionado valor los siguientes códigos:

<b:if cond='data:blog.pageType == "index"'>
<!-- Inicio del Jump-link -->
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if>

<!-- Cierre del Jump-link -->

<!-- Inicio del Comment-link -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</b:if>
<!-- Cierre del Comment-link --> 
</b:if>

Previsualiza los cambios, y si está todo en orden, guardas los cambios.

Ahora, para modificar la apariencia de los enlaces, primero, observa este ejemplo:

a.comment-link {/*Enlace a los comentarios*/
atributos; 
}
a.jump-link {/*Enlace de salto de página*/
atributos;
}

Después de haberlo visto, copia este ejemplo:

a.comment-link { *Enlace a los comentarios*/
margin:10px; /*Márgenes*/
background:#b83636; /*Color de fondo*/
color:#fff; /*Color del enlace*/
border:2px solid #e7922d; /*Bordes*/
padding:4px; /*Paddings*/
float:right; /*Este código permite situar el enlace a la derecha*/
}

a.jump-link { /*Enlace de salto de página*/
margin:10px; /*Márgenes*/
background:#b83636; /*Color de fondo*/
color:#fff; /*Color del enlace*/
padding:4px; /*Paddings*/
border:2px solid #e7922d; /*Bordes*/
float:left; /*Este código permite situar el enlace a la izquierda*/
}

Recuerda que todo esto, hay que pegarlo antes de b:skin