A fairly easy method of increasing page views on your blog is to add a list of related posts below each article or displaying them in the sidebar. (Adding a list below your posts will show better results.) While there is a Related Posts Plugin for WordPress there isn´t one officially available for Blogger blogs. But, as always, there is the solution. The folowing widgets offer your readers a ready-made reading list of other articles on your blog, which are of a similar theme or subject matter.
There are quite a few Related Posts Widgets for Blogger around, but the following three seem to be the best:
A. Cool Related Posts Widget just below the content of your Blogger blog
Installation:
1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.
2. Backup your template.
3. Check „Expand Widget Templates“.
4. Search for (Ctrl + F):
<div class='post-footer-line post-footer-line-3'/> ...</div>
or a similar line.
To place the widget between labels and comments look for <div class='post-footer'> and paste the code (5.) directly after said line.
5. Add the following code:
<div class='post-footer-line post-footer-line-3'/> ...</div><div id='related_posts'/>
6. Now look for:
</body></html>
7. Add the following code directly before said line:
<script src='http://www.google.com/jsapi'/><script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
8. Save your template.
Depending on whether you install the Related Posts Widget for Blogger in the sidebar or below the posts of your blog, you can customize it in a number of ways to suit your needs.
Customizing the Related Posts Widget´s Title & Number of Posts
If your blog is written in English you should feel no need to customize the widget title. But if you want to go ahead and do it anyway, here is how:
Change the original code
<script src='http://www.google.com/jsapi'></script><script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
into
<script src='http://www.google.com/jsapi'></script><script type="text/javascript">window.brps_options = { "title": "<h2>Hey! Check out my other related posts!</h2>" "max_results": 5 }</script><script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
Notice that there is a new <script> block. You can also use HTML in it, in fact you may need to (as shown above) since normal Blogger widgets use <h2> for titles. If you do not use HTML, the widget may look different. “max_results”: 5 = Number of Related Posts that are shown.
Advanced CSS Customization of the Related Posts Widget for Blogger
The DOM looks like this:
div#related_posts h2 /* By default. If you customize brps_options["title"], it will be whatever you set */ ul li
If you want to set CSS of every related post item of the list:
#related_posts ul li { /* CSS here */ font-family: Arial; font-size: 1.2em; font-weight: bold; color: #888; }
If you want to set CSS of the default title of list:
#related_posts h2 { /* CSS here */ }
Pros and cons of this widget:
Pros: customizable, looks good, works in sidebar and below posts
Con: You need to know what you are doing if you want to take advantage of customization.
B. Highly customizable Related Posts Widget for Blogger
Installation:
1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.
2. Backup your template.
3. Check „Expand Widget Templates“.
4. Search for (Ctrl + F):
</head>
5. Insert the following code just BEFORE said tag:
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
6. Find a <b:widget> tag and insert the following code just BEFORE it. This will bring our new element inside the blogger layout. You can then move it anywhere you like.
<b:widget id='Blog3' 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='status-message'>
</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>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='main'>
<div class='widget-content'>
<h5>Related Articles</h5>
<div id='123' style='padding:15px;'/><br/>
<h6>Widget customized by <a href='http://www.ebloffertricks.com'>Yellowrose</a></h6>
<script type='text/javascript'>
function init2() {
var finalurlarray = new Array();
function eliminateDuplicates(arr) {
var i,
len=arr.length,
out=[],
obj={};
for (i=0;i<len;i++) {
obj[arr[i]]=0;
}
for (i in obj) {
out.push(i);
}
return out;
}
var finalurlarray1 = new Array();
var funcvar1=0;
var bloggerService = new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var handleQueryResults = function(resultsFeedRoot) {
var blogFeed = resultsFeedRoot.feed;
var html,postTitle,entryUri;
var postEntries = blogFeed.getEntries();
for (var i = 0; postEntry = postEntries[i]; i++) {
postTitle = postEntry.getTitle().getText();
entryUri = postEntry.getHtmlLink().getHref();
html = '<a href= '+entryUri+'>'+ postTitle + '</a>' + '<br>';
finalurlarray1.push(html);
}
funcvar1++;
if (funcvar1 == filtArray.length) {
var urlarrayfinal=eliminateDuplicates(finalurlarray1);
for (var i = 0; i < urlarrayfinal.length; i++){
document.getElementById("123").innerHTML += urlarrayfinal[i];
}
}
};
var handleError = function(error) {
document.write("unable to load the related posts now");
};
var labelArray = new Array();
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
labelArray.push(textLabel);
</b:loop>
</b:loop>
var filtArray=eliminateDuplicates(labelArray);
var feedUri,query;
for (var i = 0; i < filtArray.length; i++){
feedUri = 'http://
www.ebloggertricks.com/feeds/posts/default/-/' + filtArray [i];
query = new google.gdata.blogger.BlogPostQuery(feedUri);
bloggerService.getBlogPostFeed(query, handleQueryResults, handleError);
}
}
google.setOnLoadCallback(init2);
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
</b:widget>
7. Now change the feed URL to point to your blog. The scope of customization on this is just unlimited (if you know your way around HTML).
8. Save the template.
Pros: Highly customizable, looks good, possible to insert ads into widget.
Con: You really need to know what you are doing when customizing.
C. The LinkWithin Related Posts Widget
Just go to LinkWithin and follow their instructions. (You can see the widget in action below this post).
Pros: good looking, includes thumbnails (if you have pictures within your posts), extremely easy to install
Cons: not a lot you can customize, will only show 3 -5 posts, posts not always related in the strictest sense of the word.
Whichever widget you ma choose to add to your Blogger blog, it will surely help you get more page views.
Good luck!
Related article:
Great Related Posts Widget for Blogger – Easy to Install
Google Buzz
