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

El jump-link y el comment-link son los enlaces que se encuentran en la página principal y que muestran tanto el salto de página como el número de comentarios.

Algunas plantillas no tienen esta función incorporada, y en este tutorial les enseñaré a situar correctamente estos enlaces.

En la siguiente imagen pueden apreciar tanto el jump-link como el comment-link




En "Diseño | Edición HTML" marcaremos la opción '' Expandir plantillas de artilugios''.

Deberás buscar la siguiente línea:

<data:post.body/>

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

Una vez encontrado el valor, pegaremos los siguientes códigos debajo de este:

<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 la plantilla.

Paso 2: Personalizando los enlaces:

Para modifical la apariencia de los enlaces, puedes crear las definiciones de la siguiente forma:

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

Veamos un 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*/
}

 Importante: Los valores en verde se pueden eliminar posteriormente, son sólo comentarios.