Step 1: Add a HTML/Javascript Gadget
From your dashboard go to layout, page elements. Click 'Add a Gadget' and choose a HTML/Javascript gadget. Put 'Related Posts' in the title and put the following javascript in the contents box:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});
</script>
Step 2: Position the gadget
After saving the gadget, click and drag the gadget to position it just below your post area (see image below).
We are done. Related post links will now automatically appear below each post.
The script has a number of configuration options:
| Option | Description | Default value |
|---|---|---|
| blogURL | Other Blog URL or leave empty to aggregate yours | '' |
| maxTags | max tags to look for on the page | 5 |
| maxPostsPerTag | max posts to be aggregated per tag | 5 |
| maxPosts | Specify a max. to remove extra posts that are least relevant or set to 0 to keep them. | 5 |
| containerSelector | jQuery Selector to find a container to append widget at the end of it, Use 'div.post-body' to have widget appended at the end of your post body. or leave empty so widget is placed where you called it | '' |
| tags | don't specify any and tags are read from page content. or specify a fixed list to aggregate like \\. also setting it to empty array will make it work as recent widget all the time. | null means not fixed |
| loadingText | Text to be displayed until widget is loaded. for example 'loading..' | '' means no loading text |
| loadingClass | CSS class will be set on list until widget is loaded which you can use it set a AJAX icon on the background. for example 'related-posts-loading' | '' means no CSS class |
| relatedTitle | H2 Title to be used for related posts widget. To disable title output set this to empty. | 'Related Posts' |
| recentTitle | H2 Title to be used for recent posts widget when there are no tags on the page. Set this to empty and widget is canceled. | 'Recent Posts' |
| postScoreClass | A CSS class prefix to be used to style posts based on relevancy. If you set to 'related-link' and maxTags=5 then related links can have classes like ('related-link1' to 'related-link5') | '' so feature is disabled |
| onLoad | true so widget is loaded on window load so widget is loaded after all page content(like images) is loaded. or false and widget is loaded after document is ready(before images) | false |
| relevantTip | For demo purpose you can show each post relevancy as a tool tip. set to '\d relevant tags!' and '\d' is replaced with number of tags in common. | '' |
