How to add "Related Articles" widget in the blogger

Share |

How to add "Related Articles" weidgets in the blogger

This article explains how you can add "Related Articles" widget to your Post in Blogger (based on JSON callback technique) makes use of your existing labeling system, as shown in figure

















Before you could install this hack:

To make this hack working, make sure you turn your "feeds" on. The setting is set to "on" in your blog by default.

Make sure your feed settings look like this (short or full) at Settings > Site Feed > Blog Posts Feed (Please note its value should not be null)

Also, make sure in "Settings"->"Archiving", "Enable Post Pages?" is set to "Yes"

After above configuration go to "Layout" or "Template" -> "Edit HTML" -> select "Expand Widget Templates"
First take the backup of the template so that if you have made any mistake you can restore with your original template.

Now find any </b:widget> in the template HTML and copy paste following code after </b: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'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</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://technical-tejash.blogspot.com*****Jan,2008****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>
<h2>Related Articles</h2>
<div id='relatedPostData'/><br/><br/>
<div id='tejash'>Widget by <u><a href='http://technical-tejash.blogspot.com'>Technical Details</a>

</u></div>
<script type='text/javascript'>

var homeUrl3 = &quot;technical-tejash.blogspot.com&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
maxNumberOfLabels = 3;
</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;relatedPostData&#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>

And after pasting it to you blog HTML template perform following steps:
As you can find span >var homeUrl3 = &quot;technical-tejash.blogspot.com&quot;;
above line in the bold in the above code. You just need to replace technical-tejash.blogspot.com with your blog's URL e.g. if your blog's URL is http://rite-mail.blogspot.com then you can change above line to:
var homeUrl3 = &quot;rite-mail.blogspot.com&quot;;

And just save the template and finally its done

Important notes if you want to make changes in the "Related Articles" widget:

Below features are advanced ones (but really easy to set up by you,)

* If you want this widget works on item pages only, then uncomment the following line i.e. take out "<!--" and "-->gt;" off this line (located at the front of the widget)

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

and also the following comments comments on this line, too, in bold:

</script>
</div>
<!--</b:if>-->
</b:includable>

* To change the maximum posts per label, change the value on this line (currently it's 4.)

var maxNumberOfPostsPerLabel = 4;

* To change the maximum labels, change the value on this line (currently it's 10.)

var maxNumberOfLabels = 10;

* To change the title from "Related Articles" to as per your requirements, change the text in bellow line:

<h2>Related Articles</h2>

* If you require to specify different maximum labels or maximum headers per label, you could do that. Look for this piece of code:

<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>

As shown in the above code, for item page, the maximum post per label is set to 100, and only first 3 labels will be displayed. It makes more sense for the item page to have more relevant header posts, and that's what this improvement is all about.

***

Congratulations! It's all done for the "Related Articles" widget

Share |