Adding 'Links to This Post' in the Postfooter

4/04/2010

The text by the arrow above is the 'Links to this Post' link, or a Backlink in your postfooter section. If clicked, it'll show all the blogs/pages that are linked to that particular post of yours. Some of my older templates don't have this.

To have it on your blog, follow the instruction below. Backup the template file first just in case something goes wrong and you want to revert back to the old file.

Find this code in your xml file (use your search function):

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&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>
</span>

This code is for the Comment link next to the Backlink. What you have to do is to paste a new group of code before (or after) the Comment link code, depending whether you want the Backlink to appear on the left or right of the Comment link.

If you want the Backlink on the left of the Comment link, put the code in red before the Comment link code, like the example below. The red code places the Backlink in the postfooter.

<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>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&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>
</span>

If you want it after, or on the right, of the Comment link, paste the red code below the Comment link code:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&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>
</span>
<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>


It's not done yet. You have to turn on the Backlink in the Blog Post Edit tab. Click on the small left-button for Links to this Post to turn it on.


It's pretty much done, but you might want to tweak the CSS code to change how the links, Backlink and Comment links, appear in the postfooter. Say, you might want to change its borders, colors, etc.

To do this, find the .post-footer .post-comment-link a {...} tag in your XML file. The whole code may look like this:

.post-footer .post-comment-link a {
margin: 0px 0px 0px 7px;
padding: 0px 0px 0px 9px;
border-left: 1px solid $postfooterTextColor;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

This is where you might want to change if you want to change the appearance of both links, Comment and Backlink. For example, the border-left: 1px solid $postfooterTextColor; places a border just on the left side of the link.

0 comments:

Post a Comment

  © Blogger template Noblarum by Ourblogtemplates.com 2009

Back to TOP