Put a Related Post widget in Blogger Blogspot

There are many limitations to a Blogger Blogspot hosted website but there is no limitations to the number of hacks one can do to improve the use of Blogger.

This tutorial on how to put a Related Post widget/plugin is a cleaner version without the links to so many people in the credits. This is important in SEO or Search Engine Optimization, there should not be too many outgoing links going to another website in your post page.

You are only giving the site another way to profit from you, they increase their PageRank at your expense. A simple thank you with a blogroll link or a donation to the originating website should be enough. But don't put their links in every page and post of your blog. You unwittingly do this if you place their code with their links in your blog. You can remove them without breaking the code.

Here is an easy way to implement/put a sanitized Related Post widget in a Blogger Blogspot blog/website:

1. In the Blogger Dashboard, Open Layout->Edit HTML->Before editing your template, backup your template first. Click on the Download Full Template link and save.

2. Expand Widget Templates and find this code:

<data:post.body/>

3. Copy the code below, and paste it after <data:post.body/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
            <div class='similar'>
                <div class='widget-content'>
                <h3>Related Posts</h3>
                <div id='data2007'/><br/><br/>
                    <div id='hoctro'>
                    </div>
                    <script type='text/javascript'>

                    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
                    var maxNumberOfPostsPerLabel = 4;
                    var maxNumberOfLabels = 10;

                    maxNumberOfPostsPerLabel = 100;
                    maxNumberOfLabels = 3;

                    function listEntries10(json) {
                      var ul = document.createElement(&#39;ul&#39;);
                      var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                                     json.feed.entry.length : maxNumberOfPostsPerLabel;
                      for (var i = 0; i &lt; maxPosts; i++) {
                        var entry = json.feed.entry[i];
                        var alturl;

                        for (var k = 0; k &lt; entry.link.length; k++) {
                          if (entry.link[k].rel == &#39;alternate&#39;) {
                            alturl = entry.link[k].href;
                            break;
                          }
                        }
                        var li = document.createElement(&#39;li&#39;);
                        var a = document.createElement(&#39;a&#39;);
                        a.href = alturl;

                        if(a.href!=location.href) {
                            var txt = document.createTextNode(entry.title.$t);   
                            a.appendChild(txt);
                            li.appendChild(a);
                            ul.appendChild(li);   
                        }
                      }
                      for (var l = 0; l &lt; json.feed.link.length; l++) {
                        if (json.feed.link[l].rel == &#39;alternate&#39;) {
                          var raw = json.feed.link[l].href;
                          var label = raw.substr(homeUrl3.length+13);
                          var k;
                          for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                          var txt = document.createTextNode(label);
                          var h = document.createElement(&#39;b&#39;);
                          h.appendChild(txt);
                          var div1 = document.createElement(&#39;div&#39;);
                           div1.appendChild(h);
                          div1.appendChild(ul);
                          document.getElementById(&#39;data2007&#39;).appendChild(div1);
                        }
                      }
                    }
                    function search10(query, label) {

                    var script = document.createElement(&#39;script&#39;);
                    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
                     + label +
                    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
                    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
                    document.documentElement.firstChild.appendChild(script);
                    }

                    var labelArray = new Array();
                    var numLabel = 0;

                    <b:loop values='data:posts' var='post'>
                      <b:loop values='data:post.labels' var='label'>
                        textLabel = &quot;<data:label.name/>&quot;;
                        var test = 0;
                        for (var i = 0; i &lt; labelArray.length; i++)
                        if (labelArray[i] == textLabel) test = 1;
                        if (test == 0) {
                           labelArray.push(textLabel);
                           var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
                                  labelArray.length : maxNumberOfLabels;
                           if (numLabel &lt; maxLabels) {
                              search10(homeUrl3, textLabel);
                              numLabel++;
                           }
                        }
                      </b:loop>
                    </b:loop>
                    </script>
                </div>

            </div>
        </b:if>

4. Click "Save Template." Want more? No, were done. That's about it. You now have a clean Related Post Blogger widget. Remember that this widget is actually "Related Posts by Categories." It will only work if you have two or more blog post in a certain category you have assigned in your blog. Bummer? I know, sorry if i told you that at this stage. But that's the best way to have a Related Post option in Blogger)...