New Stylish Related Posts For Blogger Blogs

Blogger-Icon
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.
what-next-widget-for-blogger
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.  
Adsense-account-Id
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!

    Other Recommended Posts

  • Blogger Widgets
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???

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

REPLY
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

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

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

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

REPLY
allwyn

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

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

REPLY
Anonymous

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

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

REPLY
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 :)

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

REPLY
Pooja Sarang

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

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

REPLY
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

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

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

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

Thanks

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

REPLY
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

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

REPLY
Pooja Sarang

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

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

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

REPLY
Anonymous

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

REPLY
allwyn

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

REPLY
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

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

REPLY
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

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

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

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

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

oh! never mind. fixed the problem

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

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

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

REPLY
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:)

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

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

REPLY
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

REPLY
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

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

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

REPLY
Franklin Antony said on June 21, 2012 at 10:52 AM :

wow

REPLY

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

[netinsert=0.0.1.11.14.1]