This hack has been superceded by this better one.

Getting Blogger baclinks to display on your main page is no picnic – wheather for peek-a-boo or permanent display. The way the script works direct from Blogger it assumes that it is running on a post page. So, after mor than a little fussing, I have come up with a hack that works for fixing this. The following will install peek-a-boo backlinks on your Blogger blog (template hackers will be pleased to know that the backlink template-tag section is still intact for your hacking pleasure) :

1. Enable backlinks on your blog — an obvious, but necessary, step
2. a – Put manual metadata in your template. Feedburner users have already done this. If you already have your metadata in your template manually for this or another reason, change this line:

   <script type="text/javascript" src="http://www.blogger.com/js/backlink.js"></script>

   To this:

   <script type="text/javascript" src="http://www.awriterz.org/etcetc/backlink.js"></script>

   Otherwise go on to 2b.

   b – Find this : ‘<$BlogMetaData$>‘, it should be somewhere near the top of your blog template. Replace it with this:

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta name="MSSmartTagsPreventParsing" content="true" />
   <meta name="generator" content="Blogger" />
   <link rel="alternate" type="application/xml" title="<$BlogTitle$>" href="<$BlogSiteFeedUrl$>" />
   <link rel="service.post" type="application/atom+xml" title="<$BlogTitle$>" href="https://www.blogger.com/atom;$BlogID$>" />
   <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID;$BlogID$>" />
   <style type="text/css">
    @import url("http://www.blogger.com/css/blog_controls.css");
    @import url("http://www.blogger.com/dyn-css/authorization.css?blogID;$BlogID$>");
   </style>
   <script type="text/javascript" src="http://www.awriterz.org/etcetc/backlink.js"></script>
   <script type="text/javascript" src="http://www.blogger.com/js/backlink_control.js"></script>
   <script type="text/javascript">var BL_backlinkURL='http://www.blogger.com/dyn-js/backlink_count.js', BL_blogId='<$BlogID$>';</script>
   

3. Put this code directly after that which you just inserted:

   <script type="text/javascript">
   //<![CDATA[
   function toggleitem (postid,linkid,newtxt) {
   var whichpost = document.getElementById(postid);
   if (whichpost.style.display != "none") {
      whichpost.style.display = "none";
   } else {
      whichpost.style.display = "block";
   }
   if(linkid) {
      var lnk = document.getElementById(linkid);
      lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
   lnk.innerHTML = newtxt;
   }
   }
   //]]>
   </script>
   

4. 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:

   <ItemPage><div style="display:block;" id="backlinks<$BlogItemNumber$>"></ItemPage>
   <MainOrArchivePage><div style="display:none;" id="bl<$BlogItemNumber$>"></MainOrArchivePage>
   <BlogItemBacklinksEnabled>
    <a name="links"></a><h4>Backlinks:</h4>
    <dl id="comments-block">
   <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$>&amp;postID=<$BlogItemNumber$>" defer="true"></script>
   <div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber<div id="blogger-dcom-block<$BlogItemNumber$>" style="display:none">
   amp;gt;" style="display:none">
   amp;gt;" style="display:none">
   amp;gt;" style="display:none">
        <dt class="comment-title">
        <span class="comment-toggler"> </span>
        <a href="<$BlogBacklinkURL$>"><$BlogBacklinkTitle$></a>
        </dt>
        <dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </div>
   <script type="text/javascript">BL_writeBacklinks('<$BlogItemNumber$>');</script>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>
   </div>
   

5. Find the code for the ‘links to this post’ link in your post footer template code and replace it with ‘<a href=”javascript:toggleitem(‘backlinks<$BlogItemNumber$>’);”>links to this post</a>‘
6. Save your template and republish your blog!