Pure Bluish Related Posts Widget for Blogger

Related Posts Widget would display links to other posts of the same Category/label, within your Blog. By adding it, most of your readers could find a topic of their interest in the related posts and hence they would stay on your blog for longer periods. I highly recommend adding this Widget to your blog.

How to add the New Related Posts Widget?

Follow the following steps to add the new "More Professional looking" Related Posts widget beneath your Posts on your blogger blogs.

Backup your Template.
Go to Blogger Dashboard >> Design >> Edit HTML.
Check the box beside "Expand Widget Templates".
Look for <head>
Place the following code just beneath the <head> tag: (This step is basically for adding the Google Font API for the "H2 heading Font" of the Related Post Widget. So don't miss this step)


<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky'
 rel='stylesheet' type='text/css'/>

Now look for </head>
Add the following code before the </head> tag:


<!--MBNStartsRelatedPosts--> 
<style> 
#related-posts 
{ 
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 12px 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 
{
font : 20px Fontdiner Swanky; 
font-weight : normal;  
margin : 5px 7px 0; 
padding : 0 0 5px; 
} 
#related-posts a 
{ text-decoration : none; 
} 
#related-posts a:hover 
{ text-decoration : none; 
} 
#related-posts ul 
{ 
list-style:none;
} 
#related-posts ul li 
{
display : block; 
background: transparent url(http://i1141.photobucket.com/albums/n581/fskhan619/bullet-blue-icon.png) no-repeat scroll 0px 4px; 
    margin: 0 0;
    padding: 0 0 0.8em 20px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
} 
#related-posts ul li:hover{     
background: transparent url(http://i1141.photobucket.com/albums/n581/fskhan619/bullet-green-icon.png) no-repeat scroll 0px 4px; 
}
</style> 
<script language='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>');
document.write('<a rel="dofollow" href="http://www.mybloggernews.com" style="float:right;font-size:10px;">Blogger Widgets</a></font>');
}
//]]>
</script>
<!--MBNEndsRelatedPosts-->

Now search for <data:post.body/> (if you can't find it then look for <div class="post-body">)
Paste the following code just beneath the code you looked for:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Fontdiner Swanky' 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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Thats All, You are done. :)

Customize your Widget

If you want to display any other text in place of "Related Posts" then simply replace it with any text you want.
If you want to display more than 5 Related Posts, Simply Replace "5" with any value you want.

Enjoy Pals!

Pure Bluish Related Posts Widget for Blogger

How to add the New Related Posts Widget?

Customize your Widget

0 comments:

Confused? Feel free to ask