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 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXxnV1lc0WpWT02AOHkRdGpV0kazSGyW_S-IwYgQxnG1HAOEtTkbNHITW3PUSFrNka_-skxD4TNO2B1h19G7q_k4XfJAj_od67L-Or4txPmao0ZTQvs-hlWjs74LuE_0UYtIi7wZdIHQ/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/AVvXsEiEy9UwLTtflOzbAc8tQEe2FE-8juStEC63ecqj2uGN8Jk7-h3tK0KNwlkNvMWpI-aiB-jz4BFmju94oIEUIiSjS-IJQmcrMjWAMB3SGHPqIYBOiq66UMcSttcXh4SFYf8t-lFQDh4bpso/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/AVvXsEj59rIpqtNLyZiges-3o49Fe4nc06bMbfXckA_gNvjGo9EHuX_e1WoPcZlB7N4nMw3BzW5IaO8vPmU3NDfSRK6C94jaGl_ArLgYovr3hyot2jwekqmwlVXGYjHF8qbdTdRPBpaHZrJgB6Q/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/AVvXsEh0mpY5jWoinVxmKGpfEJ5wit0GHY8QqPPV0l3Az8tGUbdA7-oBB8wR2QlmWY9q9C_Jaau7q0TRWUxSxWXgXbs0v7oE3G-DLQP3Cro-8QQFb-Qdt7a4wIxQVfb5GKbuaI059_qO0g8HGS0/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/AVvXsEjaDhyphenhypheno5Qf9u3VpzJAafhxX4uM323cxWFap-jK9MV1zIqyvLKeHNhGjgJBbQ6H3IbVhyphenhyphenFxJjX_OTpZ5cbD3n_QNcg9_4dHUHnqKs9ddNCc1LEiSwqkcyJQu6y7xpNt1w4W8kC9NDlcbLpE/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/AVvXsEhkfHaRDumwCbGx64ZfG2ll6gp0lkoru5y5q8JVKPcnXEv3YWUb1-9xspgu9eKIfk9uZBWmFZrheN9QpDfpT9F4Ibb5Cr3BTr97P0BBRJgC4mxEy67TkzIya1WpiJYVBWFxOi7Bt0AB08U/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?

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?

Other Recommended Posts

Sahil said on November 17, 2010 at 10:59 PM :

Thanks for sharing!!! can you please tell me what is permalinks and how to us it???

Mukund said on November 19, 2010 at 11:44 AM :

@Sahil: I would like to know what exactly you want? As far as I know, permanent links are those that link to your blog with out "nofollow" tag.

author said on December 10, 2010 at 2:55 PM :

dude I am getting the widget on the home pages and post pages both and no posts are appearing in the related posts!!

take a look here:
http://sprawlover.blogspot.com

Mukund said on December 11, 2010 at 9:35 AM :

@author: Yeah! I had a look at your blog. Send me your template via email and I will alter it!!! I hope you know my email address!!!

author said on December 11, 2010 at 2:27 PM :

@Mukund
hey i sent the template to smalwayz@gmail.com my name id is allwynmasc@gmail.com and how can I show my name in ur comments instead of author??

Mukund said on December 12, 2010 at 8:18 PM :

@author: Yeah! I received your template. I replied to the mail you sent. Use name and URL instead of posting comments as a blogspot user. Simple!!

allwyn

@Mukund
oh yea! its simple but I was wondering why they dont show my name for blogger account!

Mukund said on December 16, 2010 at 9:26 PM :

@allwyn: You need to check out what name you chose to display to the public. Check out your "Google Accounts" page!!!

Anonymous

I tried to install this. But the related post shows empty. Adsense and sharing is shown fine.

Mukund said on January 24, 2011 at 5:45 PM :

@Anonymous: You can contact me via email and I will help you sort out the problem!!!

ifootballvideo said on March 5, 2011 at 6:19 AM :

Hi..again me ..on this lovey widget..i use it to..its just amazing like first one i comment..

i got the same problem..everything works fine except relates post..doesnt show up..can you tell me how to fix this ?

and i notice..here.on subscribe..you forgot to mention that we need to change feed link..because it shows your.I did just to tell you to notice other bloggers :)

Mukund said on March 5, 2011 at 10:06 AM :

@ifootballvideo: Yeah! I checked your blog! That's not a big issue. Just contact me via email and I will fix the issue!

Pooja Sarang

Hey,,, why does the link gets hidden, when i hover mouse on the bookmark links???

Mukund said on March 17, 2011 at 7:17 PM :

@Pooja Sarang: I don't think it happens on my blog. May be you changed some parameter in CSS. Contact me via email if you cannot fix up the issue. I will try solving it!

Inpui said on April 6, 2011 at 4:48 PM :

Hi Mukund, i sent you an email but may have not notice it. So, can you please see why the related posts are not showing on my blog http://governmentjobshere.blogspot.com

Thanks

Mukund said on April 6, 2011 at 4:54 PM :

@Inpui: Yeah! I know it buddy! There is a small script which must be added apart the coding given above. Just email me and I will send you the code and its placement!

Inpui said on April 7, 2011 at 3:01 AM :

@Mukund
Hi Mukund, I've sent you the template to your email.

Thanks

Mukund said on April 7, 2011 at 6:48 AM :

@Inpui: Yeah! I received your email and I have attached the extra piece of code. You can upload the template I sent to you!

Inpui said on April 7, 2011 at 2:07 PM :

@MukundThanks, the template was not proper but with the help of Notepad++ i figured out the changes and voila... it works fine now...Thanks

Mukund said on April 7, 2011 at 7:23 PM :

@Inpui: Thanks for the comment buddy! You can always reach me via email for any help you need!

ifootballvideo said on April 19, 2011 at 10:45 PM :

MV said on July 5, 2011 at 7:58 PM :

Hi Mukund, I tried this, however "Related Posts" are not appearing. Help me please - MV

Mukund said on July 5, 2011 at 10:03 PM :

@MV: I have updated the post with the missing code. Just check step 5 in the tutorial. Your posts will appear!

Blogger Katro said on July 7, 2011 at 6:43 AM :

waww, very important but i will try, thanks alot Mr. Mukund, please visit me, friendship from Indonesia :D

Mukund said on July 7, 2011 at 7:45 AM :

@Blogger Katro: Try it on your blog and see if you like it! Hope you enjoy the other tutorials on my blog! Thanks for the comment!

keneohiaeri said on July 31, 2011 at 3:26 AM :

i have done everything mukund. but the posts still doesnt come up

keneohiaeri said on July 31, 2011 at 3:27 AM :

oh! never mind. fixed the problem

Mukund said on July 31, 2011 at 10:50 AM :

@keneohiaeri Yup! need any help? Then, just ping me on gtalk!

Ammar said on October 14, 2011 at 12:23 PM :

There had some problem with your code in my blog. But Modified it a little bit its now ok
Thanks..

Mukund said on October 17, 2011 at 2:15 AM :

@Ammar: Let me know what problem you faced so that we can fix it up - probably be useful to other bloggers as well:)

Jeypriey said on October 22, 2011 at 8:22 PM :

I've successfully added it on my blog but on the top post section. I have a question though. How can I specify the maximum number of related post that will be shown? I wanted to limit it to 4 or 5 entries only. Hope you can help.

Mukund said on October 25, 2011 at 12:09 AM :

@Jeypriey: It is possible to limit the number to 5 provided you tag each article with one keyword on your post editor.

Jackson Nwachukwu said on October 28, 2011 at 6:41 PM :

Mukund, thanks for this wonderful post. I tried it on my blog www.naijatechblog.com and it worked perfectly. However, I discovered you forgot to mention FEEDBURNER ID and Conditional Tags that will limit the widget only to Post pages, so I added it. You may need to update this post with the conditional tag

adil said on October 29, 2011 at 11:14 PM :

HI mukund..
i have done exactly what you said.. done every thing.. my template saved there is no error but still related post are not shown. please help me. i have done lot of hard work on this template. but related post widget is not appearing.. i have tried many related post widgets from may sites but nothing worked.. i think there is some problem in my template.. please look at my blog and tell me what to doo .. i shall be very very very very thank ful to you..
please help
http://adilclinic.blogspot.com

Mukund said on November 10, 2011 at 12:42 AM :

@Jackson Nwachukwu: Well, may be! It is understood when it comes to FeedBurner ID. However, the conditional tags may or may not be applied - left to the choice of the user.

Mukund said on November 28, 2011 at 12:00 AM :

@adil: Hmmm! Just hit me via email and state your problem clearly! I'll try to fix up the issue for you!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT