How to Show Related Articles to your Post?

How to Show Related Articles to your Post?#

Before you proceed to follow this code, first you must save your original
template. Unless you confident and familiar with CSS coding in blog.

This code i get it from Hoctro. Thanks to him i can easily show the related
article as per post and categories.

Please go to your blog HTML code and click the Expand Widget Templates so that you can paste this code.

Usually i will put this code at the bottom of the Body Post. Please look for this widget "Blog1".

The open code will look like below:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

Scroll down and look up the ending code of the upper widget as below:

<b:include name='quickedit'/> </b:includable> </b:widget>

Now add this code at the bottom of above widget.

<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'> <b:includable id='nextprev'> </b:includable> <b:includable id='backlinks' var='post'> </b:includable> <b:includable id='post' var='post'> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> </b:includable> <b:includable id='status-message'> </b:includable> <b:includable id='feedLinks'> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable> <b:includable id='feedLinksBody' var='links'> </b:includable> <b:includable id='postQuickEdit' var='post'> </b:includable> <b:includable id='comments' var='post'> </b:includable> <b:includable id='main'> <!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --> <!-- *****************Related Articles by Labels - Take Two****************** --> <!--<b:if cond='data:blog.pageType == "item"'>--> <div class='widget-content'> <h2>Related Articles by Labels:</h2> <div id='data2007'/><br/><br/> <div id='hoctro'>Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a> </u></div> <script type='text/javascript'> var homeUrl3 = &quot;YourBlogURL.blogspot.com&quot;; var maxNumberOfPostsPerLabel = 100; var maxNumberOfLabels = 100; <b:if cond='data:blog.pageType == &quot;item&quot;'> maxNumberOfPostsPerLabel = 100; </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> maxNumberOfLabels = 100; </b:if> 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; 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 = decodeURIComponent(raw.substr(homeUrl3.length+21)); var txt = document.createTextNode(label); var h = document.createElement(&#39;h4&#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;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39; + encodeURIComponent(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> <!--</b:if>--> </b:includable> </b:widget>

Then last step is to replace this code :

var homeUrl3 = "YourBlogURL.blogspot.com";

to your own blog address.

The rest let it remain such as Hoctro.blogspot.com. Give credit to original coder ok.