Let's Try Learn to Display Related Posts

How to display related posts

Related Posts is the title of the post and related naming is usually based on the displayed label (category), Realated Post is usually a link that show the exact posting single comment in the fields below. The advantage of the post with a related, of course, will make it easier for visitors to our blog to find related articles without having to go and open the pages one by one in the link label.

Let's try to the following ways :

Step I

Entry on the Templates -> Edit HTML -> then enter the javascript code below to above the code </head> -> do not forget saved

<script type="text/javascript"><br /><br /><br />//<![CDATA[<br /><br />var relatedTitles = new Array();<br /><br />var relatedTitlesNum = 0;<br /><br />var relatedUrls = new Array();<br /><br />function related_results_labels(json) {<br /><br /> for (var i = 0; i < json.feed.entry.length; i++) {<br /><br /> var entry = json.feed.entry[i];<br /><br /><br /> relatedTitles[relatedTitlesNum] = entry.title.$t;<br /><br /> for (var k = 0; k < entry.link.length; k++) {<br /><br /> if (entry.link[k].rel == 'alternate') {<br /><br /> relatedUrls[relatedTitlesNum] = entry.link[k].href;<br /><br /> relatedTitlesNum++;<br /><br /> break;<br /><br /><br /> }<br /><br /> }<br /><br /> }<br /><br />}<br /><br />function removeRelatedDuplicates() {<br /><br /> var tmp = new Array(0);<br /><br /> var tmp2 = new Array(0);<br /><br /> for(var i = 0; i < relatedUrls.length; i++) {<br /><br /><br /> if(!contains(tmp, relatedUrls[i])) {<br /><br /> tmp.length += 1;<br /><br /> tmp[tmp.length - 1] = relatedUrls[i];<br /><br /> tmp2.length += 1;<br /><br /> tmp2[tmp2.length - 1] = relatedTitles[i];<br /><br /> }<br /><br /><br /> }<br /><br /> relatedTitles = tmp2;<br /><br /> relatedUrls = tmp;<br /><br />}<br /><br />function contains(a, e) {<br /><br /> for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br /><br /> return false;<br /><br />}<br /><br /><br />function printRelatedLabels() {<br /><br /> var r = Math.floor((relatedTitles.length - 1) * Math.random());<br /><br /> var i = 0;<br /><br /> document.write('<ul>');<br /><br /> while (i < relatedTitles.length && i < 20) {<br /><br /><br /> document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] <br />+ '</a></li>');<br /><br /> if (r < relatedTitles.length - 1) {<br /><br /> r++;<br /><br /><br /> } else {<br /><br /> r = 0;<br /><br /> }<br /><br /> i++;<br /><br /> }<br /><br /> document.write('</ul>');<br /><br /><br />}<br /><br />//]]><br /><br /></script>

Step II

Entry on the Templates -> Edit HTML -> do not forget to check the Expand Widget Templates -> find the code below.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels'
var='label'>

<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop>

</b:if>

If you have met them, enter the red code between the code above like this.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels'
var='label'>

<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

After that, don't forget to save again.

Step III

Entry on the Templates -> Element -> page and then make a new elemet or click on "Add a Page Element" -> copy-paste the code below and be sure to give the name of the title eg, "Related Articles" -> then do not forget to save .

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

So that Related post does not appear on the main page and only appear on the single post page so we need addition of some code, follow this way:

Entry on the Templates -> Edit HTML -> do not forget to check the Expand Widget Templates -> find the code below, as an example, where before I give "Related Articles", if it is found put the two red code into the code below.

<b:widget id='HTML99'
locked='false' title='Related Articles' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>


<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Finish,,,don't forget to save your work,

Let's try it now,,,Happy Blogging,,^_^

Posted in: articles,embed code,hack,related posts,tips and trick,widgets