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) :
- Enable backlinks on your blog — an obvious, but necessary, step
- 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> - 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> - 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$>&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> - 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>‘
- Save your template and republish your blog!