Image Add A Customized Related Posts Widget In Blogger

Related Posts Widget is one of the MUST-HAVE widgets in a blog.This serves as a helpful guide to readers for topics that may be related to the current post/entry.

How It Works.

Generally, the widget is based on Category or Label. Once the blog author labeled the post (regardless whether it's single or multiple labels), all posts that fall under such category will be seen in the Related Posts Widget.

Related Posts Widget Appearance.

The appearance may vary.

Some hacks show segregation of posts based on category; each category name is labeled for easy reference.

courtesy of:
3 Columns Blogger Template



On the other hand, other hacks show a combined list of related posts for a neater and more refined look. Like this one:

courtesy of:
Blogger Accessories

Customized Related Post Widget.

While the categorized Related Posts widget for multiple labels look orderly, some bloggers (like myself) prefer to have the related posts in one tidy list.

DCBlog has a fantastic hack on how to do this in his post - Hacking Related Posts. What's great about his hack is that the customization is fairly simple and the overall look is truly nice and pretty elegant. Below is an example of how it looks in my blog.

His hack is a combination of the following blogs' hacks:
SCRIPT: Related Posts Widget For Blogger With CSS
CSS: A blogger hack to show related posts before each blogger posts
BLOGGER CODE: How to show related posts/articles in blogspot blogs

To read more about this hack, check out DCBlog's Hacking Related Posts

How To Add Customized Related Post Widget in Blogger.

This one is based on DCBlog's Hacking Related Posts.


NOTE: BACKUP YOUR TEMPLATE!


(1) Go to Layout. Edit HTML.
(2) Before the closing tag of

]]></b:skin>

insert this CSS code from Bloganol.

/*-- related posts --*/


#related-posts {
float : left;
width : 450px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px; }


#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0; }


#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
margin : 5px 7px 0;
padding : 0 0 5px; }


#related-posts a {
color : #1566a7;
font-size : 11px;
text-decoration : none;}


#related-posts a:hover {
color : #99cc00;
font-size : 16px;
font-weight: bold;
text-decoration : none; }


#related-posts ul {
border : medium none;
margin : 10px;
padding : 0; }


#related-posts ul li {
display : block;
background : url() no-repeat 0 0;
margin: 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc; }

For more tips on customizing this CSS, check out DCBlog's post..

(3) Before the closing tag of

</head>

add this script from Blogger Accessories

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

(4) Search for this line of code:

<p><data:post.body/></p>

(5) Underneath this line, insert this blogger code from Realtrix

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'>
<b>Related Posts :</b>
</font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><data:label.name/>
<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&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

The text "Related Posts" may customized:

<b>Related Posts :</b>

(6) Save Template.
(7) View Blog.

Here is the result:

Credits go to: Bloganol, Blogger Accessories, and Realtrix for creating wonderful hacks; DCBlog for putting them together to create another fantastic hack.



Blogs of Note that have Related Posts Widgets Hacks:
Jackbook
PurpleMoggy
Scrapur
Hoctro's Place
EverybodyGeek