New Stylish Related Posts For Blogger Blogs

Hi Friends!! Today, I present to you the "All New Stylish Related Posts Widget For Blogger/Blogspot Blogs".The main idea behind developing this widget is to increase our Adsense revenue, pageviews (primary reason for related posts widget) and to make our blog look more professional.

If you want to look at the earlier versions of the related posts widget posted on my blog, then visit the following links - Related Posts widget for blogger (based on Labels). The latest version of related posts widget comes with added features like "What's Next?" and  "Google Adsense".

Take a look at the screen shot below to preview the widget.

Are you excited with the widget shown above??? Want to add this  to your blog, then just follow the steps mentioned below. Please create a back up of your template before you install this widget.

To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.
1. Expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template". Now, search using "CTRL+F" for the following line:

<data:post.body/>

<div style='clear: both;'/>

</div>

2.Copy the code below. Paste the code just below the line you searched in step1.

<div class='cps'>

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--

google_ad_client = &quot;pub-YOURADSENSECODE&quot;;

google_ad_host = &quot;pub-1556223355139109&quot;;

/* 468x15, created 10/15/10 */

google_ad_slot = &quot;2917101792&quot;;

google_ad_width = 468;

google_ad_height = 15;

//--&gt;

&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;

src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;

&lt;/script&gt;</div>



<div id='end'>

<ul class='actions'>

<h3>What&#39;s Next?</h3>

<li><a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Digg it</a></li>

<li><a class='stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>StumbleUpon</a></li>

<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Save on Del.icio.us</a></li>

<li><a class='subscribemini' href='http://feeds2.feedburner.com/EverythingAboutBlogging' rel='nofollow'>Subscribe via RSS</a></li>

<li><a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' rel='nofollow'>Leave a comment</a></li>

</ul>

<ul class='tips'>

<h3>Other Recommended Posts</h3>

<li><div style='display:none;'><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></div>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></li></ul>

</div>

Note: Replace "YOUR ADSENSE CODE" text in the file with your Account ID. Account ID will be found in the top right corner of the Adsense Dashboard. Take a look at the screen shot below for better understanding.  

3. Now, its time to add the CSS part for your widget. Search for the following line in your template.

]]></b:skin>

4. Copy the following code and paste it just above the line mentioned in step3.

.cps {
background:none repeat scroll 0 0 #ddd;
border-top:3px solid #000;
margin-top:5px;
padding:10px;
width:570px;
}
#end {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #f9f9f9;
border-bottom:3px solid #000;
border-top:3px solid #000;
float:left;
font-family:arial;
font-size:12.2px;
margin:0 0 40px;
padding:14px 0 12px 25px;
width:565px;
}
.actions {
float:left;
margin:0 20px 0 0;
padding-left:0;
padding-top:0;
text-align:left;
width:23%;
}
.tips {
float:left;
margin:0;
padding-left:0px;
padding-top:0;
text-align:left;
width:65%;
}
#end ul.tips li {
-moz-background-inline-policy:continuous;
background:url() no-repeat scroll 0 3px transparent;
margin:0 0 9px;
padding-left:14px;
margin-left:-34px;
}
a.digg {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSIDQBgfp0gVwN63nLzJsdcQw7muoN95XbJ4wI9vdmCnSROxWGSVI1mdaaurDRGe_dhV69FQ11eIu3K_lHAkL9vwqW4EHIM_FJ_Hn935nnmNix0WqyPCFMDxdd0ocRIXqZsYMVDrT_XiM/s400/digg-1.png") no-repeat scroll 0 1px transparent;
padding:2px 0 2px 20px;
}
#end ul.actions li {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
margin:0 0 9px;
}
#end ul li {
}
#end ul {
list-style-type:none;
}
a.delicious {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBuQHHa6roc-wplm7pff63sqxy4JTV_1kUdiyBlMcGCp_3kgYGKvssSDOT3J6Cummv0V3I4ktfOF7Msy5N2XYtpQVjNoFVPbhCxAD4jHWk2YIcf4FyDYEHdE2YbS3l8tjRt_V_cRDCt8/s400/delicious-1.png") no-repeat scroll 0 2px transparent;
padding:2px 0 2px 20px;
}
a.subscribemini {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUaElrclNfciKdLeTYt7QocFGiYQq9YrQE3db39h2d_6Kwe-sNOvg2DwddOYMx6wOHqNp7BkbsJJR8ta_Qu11ZR8xCr66MEkMMEqI4Ezwf2kOPQKrfghq6kBunqV-Lo33S_O-QVqGdNU/s400/feed.png") no-repeat scroll 0 1px transparent;
padding:2px 0 2px 20px;
}
a.comment {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaHGhgYkQxqaCvQKaz8J79zCi3c_HGTfhCDd76DHae6TKxa1WupSLSEqhBDedQQZ0BmTK05wNQBEaTdWfAR-4kMoGgYAdf1tXGAYS8cbFGAn_2UoJm8ID6pCYOEm4rjPmMnCL3SnFe7I/s400/comment.gif") no-repeat scroll 0 0 transparent;
padding-left:20px;
}
a.stumble {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUX6aFbZL64SZyi7-Z9IF9AMpiTq8xp_RVHBsrqLa1137cQ68UjE-tdXDgtthdW41YjPV7kxCLeTgLTnC8jKGrnPCZ4FMoJmlYxSaVK7ejwNGJpytREMn9ZVFneYxpYn2aVWRwqIq7Bak/s400/stumble.png") no-repeat scroll 0 1px transparent;
padding:2px 0 2px 20px;
}
a.twit {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsRX5bDvho1mV-2nyDroJlVkEx43HMkjLcu7ScyHt40GVJDVS_DDwPaS15EfQezeYlv4tQTbExEA2UByfLg5eBUqdwwwwjZD0pFCtbGvs1myj6qxmhE27umGdiYSKqfcotEfaNmYSlo8/s400/twitter_16.png") no-repeat scroll 0 0 transparent;
padding-left:20px;
}
#end h3 {
color:#000000;
font-size:13px;
margin-bottom:11px;
margin-top:4px;
font-weight:bold;
}
.hidden {
display:none;
}

Note: If you wish to change the background or the border color, then change the codes highlighted in green. For any other customization regarding this widget, leave your comments below and I will try to customize them as you wish.
5. Now, its time to add the javascript part for your widget. To add the script, search for the following line on your blogger template.

</head>

Now, paste the following piece of code just above the line mentioned in step 5.

<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>

6. That's it!!! Save your template. View the widget on your post pages.

Note: You need to view the post pages to view the widget. That is, click on any of the posts in your blog to view the final result. You cannot find them on the home page of your blog.

I hope you enjoyed this post and the widget as well!!! Please share your views about the widget via comments!!! We love to here from you. More over, you gain backlinks for your comments :)