My previous backlinks hack was a quick fix to allow backlinks on the main page, since I wanted to do that. It was, however, kind of ugly, complicated, and like the ‘normal’ backlinks code broke XML well-formedness. I have, therefore, come up with a new hack that does the exact same thing, but is faster, easier, and XHTML valid. The new steps are below :
- Enable backlinks on your blog — an obvious, but necessary, step
- Put this code in the <head> section of your blog template:
<script type=”text/javascript”>
//<![CDATA[function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = ‘block’;}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != “none”) {
whichpost.style.display = “none”;
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = “javascript:toggleitem(‘”+postid+”‘,'”+linkid+”‘,'”+lnk.innerHTML+”‘);”;
lnk.innerHTML = newtxt;
}
}//]]>
</script> - Find the section in your template that starts with <BlogItemBacklinksEnabled> and ends with </BlogItemBacklinksEnabled> and replace the entire thing (these tags included) with this code:
<BlogItemBacklinksEnabled>
<ItemPage><div style=”display:block;” id=”backlinks”></ItemPage>
<MainOrArchivePage><div style=”display:none;” id=”backlinks<$BlogItemNumber$>”></MainOrArchivePage>
<h4>Backlinks:</h4>
<script type=”text/javascript”>backlink = new Array();BL_Backlinks = new Array();</script>
<script type=”text/javascript” src=”http://www.blogger.com/dyn-js/backlink.js?blogID;$BlogID$>&postID=<$BlogItemNumber$>”></script>
<script type=”text/javascript”>
//<![CDATA[
for(var i = 0; i < BL_Backlinks.length; i++) {
document.write(‘<dt class=”comment-title”>’);
document.write(‘<span class=”comment-toggler”> </span>’);
document.write(‘<a href=”‘+BL_Backlinks[i][“BlogBacklinkURL”]+'”>’+BL_Backlinks[i][“BlogBacklinkTitle”]+'</a>’);
document.write(‘</dt>’);
document.write(‘<dd class=”comment-body”>’+BL_Backlinks[i][“BlogBacklinkSnippet”]);
document.write(‘<br />’);
document.write(‘<span class=”comment-poster”>’);
document.write(‘<em>posted by ‘+BL_Backlinks[i][“BlogBacklinkAuthor”]+’ @ ‘+BL_Backlinks[i][“BlogBacklinkDateTime”]+'</em>’);
document.write(‘</span>’);
document.write(‘</dd>’);
}//end for
//]]>
</script>
<p class=”comment-timestamp”><a class=”comment-link” href=”javascript:BlogThis();”>Create a Link</a></p>
</div>
</BlogItemBacklinksEnabled> - Find the code for the ‘links to this post’ link in your post footer template code and replace it with ‘<a href=”<$BlogItemPermalinkUrl$>#backlinks” onclick=”toggleitem(‘backlinks<MainOrArchivePage><$BlogItemNumber$></MainOrArchivePage>’);return false;”>links to this post</a>‘
- Save your template and republish your blog!