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



ESCRITO POR WitCho

¡Hola! Mi nombre es Juan González y tengo 20 años. He fundado este sitio para ayudar a todas las personas que se inician en el mundo del Blogger. Aquí encontrarás diversos aportes, herramientas, efectos (jQuery), trucos y JSON, para que tu blog vaya mejorando día a día, así de fácil.



Si este artículo te gustó, por favor selecciona alguno de los siguientes servicios para compartirlo:



  • Vemos otro post cualquiera por si le encontraras alguna utilidad?



  • ¿Quieres seguir obteniendo trucos iguales que este? Entonces, suscríbete a nuestro RSS Feed.

    Por favor, ingresa tu correo electrónico

    ¡Mira que fácil! No has tardado nada, y a partir de ahora, podrás recibir tods nuestras entradas por correo.








    Antes de realizar ningún cambio, te recomendamos que "respaldes" la plantilla, para evitar, así, futuros problemas. Quizá, en algún momento te sirva de ayuda en algún... apreto


    Ir al centro | Ir arriba | Ir abajo



































    Logo de Android Honeycomb creado con propiedades de CSS3 por Manz (Emezeta blog), y después modificado por Juan