Related Post Widget for Blogspot Made Easy

Using similar technique as the general purpose blogspot related article widget, integrating it to the blogger templating engine is easy. Here's how.


1. Setup styles.

Paste the following style snippet on your style sheet. Your style sheet could be on an external .css file, within the HEAD tag, or within the <b:skin><![CDATA[/ style here /]</b:skin> Blogger template tag.

#blogtips-blogger-related-title{
 font-size:18px; 
 font-style: 'Arial, Sans-serif';
}
#blogtips-blogger-related{
 list-style:none;
}
#blogtips-blogger-attribution {
 list-style:none;
}

2. Choose the location of your related post widget.

Usually, it can be found below the post body. So we will be doing the same in this tutorial. First make sure that the "Expand Widget Templates" checkbox is checked (can be found thru Blogger->Design->Edit HTML on the upper right corner of the text area). Find "".

3. Paste the snippet below. No changes necessary. You can however control the number of related posts to show by reducing or increasing the variable setting "limit".

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--START Related Post Widget//-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var blogger_url  = &quot;<data:blog.homepageUrl/>&quot;;  //your blog URL
var label    = [<b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;,</b:loop>]; //your post lables 
var limit    = 5;           //number of items to list
</script>
<script src='http://bloggerwares.googlecode.com/files/related-posts-label-widget-1.0.js' type='text/javascript'/>
<div>
<h2 id='blogtips-blogger-related-title'>Related Links:</h2>
<ul id='blogtips-blogger-related'/>
<ul id='blogtips-blogger-attribution'>
<li><a alternate='Related Post Widget' href='http://bloggerjutsu.blogspot.com/2010/07/related-post-widget-for-blogspot-made.html' style='font-size:11px;font-style:&apos;Arial&apos;'>Related Post Widget for Blogspot</a></li>
</ul>
</div>
<!--END Related Post Widget//-->
</b:if>

Note: The <b:if cond='data:blog.pageType == &quot;item&quot;'> is to make sure that the related post widget shows on the article pages only .

4. Advance usage.

You can experiment with layout and style to suite your theme. You can also embed Advertisements and change the location of the snippet within <b:includable id='post' var='post'></b:includable> tag. Take note that the snippet will work only within that includable tag or something similar that exposes post data (<data:post.*>, * implies all post fields).

Related Links:

• Related Post Widget for Blogspot