New Stylish Related Posts For Blogger Blogs

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 39 Comments

Hi friends!! Today, I present to you the "All New Stylish Related Posts Widget For Blogger/Blogspot Blogs". The basic inspiration for designing this widget was "deluxetemplates.net". 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 two links - Related Posts Type One, Related Posts Type Two. 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. Download the following text document - Code For Stylish Related Posts Widget. Open the text document and copy the entire code present in it. Paste the code just below the line you searched in step1.
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("http://4.bp.blogspot.com/_Zt-MFCckzsc/Sq981K22-FI/AAAAAAAACNA/qP54J_2HcMQ/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("http://3.bp.blogspot.com/_Zt-MFCckzsc/Sq98mokfzuI/AAAAAAAACM4/_L_0wKNZ2TE/s400/delicious-1.png") no-repeat scroll 0 2px transparent;
padding:2px 0 2px 20px;
}
a.subscribemini {
-moz-background-inline-policy:continuous;
background:url("http://2.bp.blogspot.com/_Zt-MFCckzsc/Sq98T8eFqGI/AAAAAAAACMw/1gwnE8qOoIQ/s400/feed.png") no-repeat scroll 0 1px transparent;
padding:2px 0 2px 20px;
}
a.comment {
-moz-background-inline-policy:continuous;
background:url("http://2.bp.blogspot.com/_Zt-MFCckzsc/Sq97-VIfenI/AAAAAAAACMo/3IkSWN0C0OU/s400/comment.gif") no-repeat scroll 0 0 transparent;
padding-left:20px;
}
a.stumble {
-moz-background-inline-policy:continuous;
background:url("http://2.bp.blogspot.com/_Zt-MFCckzsc/Sq97vV2vdYI/AAAAAAAACMg/phL4ZUZgwPA/s400/stumble.png") no-repeat scroll 0 1px transparent;
padding:2px 0 2px 20px;
}
a.twit {
-moz-background-inline-policy:continuous;
background:url("http://1.bp.blogspot.com/_Zt-MFCckzsc/SyPT-xa8c5I/AAAAAAAACtQ/UOzJVxUlFTQ/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.
UPDATE 
5. Well, the reason why "Posts" did not appear was a result of a small script that we missed out in the hack. So, I'm sorry guys. To add the script, search for the following line on your blogger template.

</head>

Now, paste the following piece of code in the text document - SCRIPT FOR RELATED POSTS just above the line mentioned in step 5.
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 too since my blog is a dofollow blog:)

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Widgets