Related Posts Widget for Blogger / Blogspot

This widget will show related posts(You might like also…) section below every post page.The related posts titles are fetched from current post page label[s].

This Widget also increases SEO and Pageviews of your blog.

How To Install Related Posts Widget ?

There are three sections in this widget 1)CSS 2)JavaScript 3)Widgetcode

NOTE: Please BackUP your template Before installing

Login to your blogger
Then Go to Layout > Edit HTML
Check Expand Widgets

Now Add Bellow CSS code Right before ]]></b:skin> tag

#related-posts {
    padding:10px;
    display:block;
    clear:both;
}
#related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.75em;
    margin-top: 0;
    padding-top: 0;
}
#related-posts a:hover{
    text-decoration:underline;
}
#related-posts ul{
    list-style-type:none;
    margin:10px 0;
    padding:0;
}
#related-posts ul li{
    background: url("http://3.bp.blogspot.com/_nDNgmK8FIyI/TBZPJNFuX6I/AAAAAAAAAHE/GMkhjBBbwLk/s320/w2barrow.gif") no-repeat scroll left center transparent;
    display: block;
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-top: 0;
}

Now add Bellow JavaScript Right before </head> tag

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://way2blogging.github.com/blogger-widgets/w2b-related-posts.js' type='text/javascript'/>

# If you want to change the title of your widget you can edit Bellow line in above code

var relatedpoststitle="Related Posts";

Now find Any one of Bellow lines

<div class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-1'>

Add Below Widget code just after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

var maxresults=5;

# Change maxresults you want to be show

Save Your Template.

Take a look at your post pages. It must have Related posts widget.

You can Customize your widget by changing CSS.

If you have any doubts While installing you can contact me via comments

Do you Like this Article?

Get Subscribe to Free Email Updates!!

*Your email address will not be shared with anyone.

22 Comments on “Related Posts Widget for Blogger / Blogspot” Add Comment

Ozl January 25, 2011 4:42 am #

Thanks!

enn Qaa February 10, 2011 7:40 pm #

awsome!

Roma Rahul Gupta May 18, 2011 6:27 pm #

Thanks a lot!!!!
Awesome explanation.
After a long search…..I got this becoz of this blog.

jayrweblog May 30, 2011 7:52 am #

Thanks. I'm gonna try this one.

Mang PAbloy June 25, 2011 3:15 pm #

Thanks. installed in my blog. and doing great! http://makisale.blogspot.com

Aazib August 5, 2011 8:00 pm #

Thank you for this useful post. I have been searching this lately but. I have a question. Please tell me How can I end the gap between the links. It's a huge gap and I think reader will disturb. checkout my blog please http://tutorialstips.blogspot.com

Md.Shoeb September 8, 2011 11:59 am #

Thank you very much….

Bithi October 27, 2011 3:48 am #

I am searching these kinds of article for 30 minutes which I got here. Really interesting post. Thanks for sharing this. I shared in my twitter account for friends. Thanks again dud. Cheersâ€¦ I invite you to visit my blog: http://update-softwares.blogspot.com/

Varinder Pal Singh November 10, 2011 9:59 am #

Thanks Dude Great Work.Keep Posting

Awesome……………:)

Nina Kunni November 22, 2011 6:40 pm #

I need help, dont know where to find the tag and install

Have A Nice Day Friend December 9, 2011 2:52 pm #

Its Appearing Double Time Harish, What To Do

Assort Info December 22, 2011 6:25 am #

damn good! most appreciable, visit,
http://assortinfo.blogspot.com

csaballos January 6, 2012 8:49 am #

No pude. Creo que es el Ãºltimo paso donde me equivoco, porque encuentro dos lÃneas. Una aparece asÃ:
1.

Could you help me, please…

csaballos.blogspot.com

a1uls March 4, 2012 7:34 pm #

i can’t fine or please help me

a1uls March 4, 2012 7:36 pm #

code “p class=’post-footer-line post-footer-line-1″ cannot fine help me

Reply

Harish March 20, 2012 10:56 am #

please check the Expand Template Widget Checkbox while editing the template.

Kumar April 5, 2012 6:58 pm #

Template saved but widget not working….pls suggest…

Reply

Harish April 10, 2012 1:22 am #

i didn’t find any codes in your blog!?

Blogger Tricks May 30, 2012 9:42 am #

In the blog you have lots of useful information, thank you again

Ram October 15, 2012 7:57 pm #

i folllowed evrything clearly, but not working for my present template, it was worked for my previous template. is this depend on template?

Sourav Pal October 17, 2012 11:24 am #

Its working, Thanks, keep posting and help a newbie blogger

Mahesh October 26, 2012 10:23 am #

Hello bro i done all steps correctly but still this widget not work in my blogs.
please check my blogs template.why this is not work in my blogs.
thanks

Blogger Widgets | Tips | Tricks | Templates : Way2Blogging

Related Posts Widget for Blogger / Blogspot

How To Install Related Posts Widget ?

Do you Like this Article?

Get Subscribe to Free Email Updates!!

22 Comments on “Related Posts Widget for Blogger / Blogspot” Add Comment

Leave a Reply Click here to cancel reply.

Subscribe

Search

Recent Posts

Categories

Links

Friends

Popular Posts

Recent Comments