How To Add Related Post Widget For Blogger (2 Ways)

Hello mates, Hope you are fine. Today i am with a gadget for blogger. Also that gadget is About Related Posts beneath your each post. As you realize that the amount of gadgets are vital for your website for better positioning and seo. Related post is a benevolent gadget for seo, on the grounds that it constrains your guests to investigate your website. At the point when a guest visits your blog entry and he loves it, then he will like to investigate your others post in that name. With the related post gadget your blog's activity will likewise increment because of your blog's guests action.

It is anything but difficult to include this gadget in your online journal.

A few layouts have default related post gadget in it. At the same time some have not. Then again if didn't like that related post gadget than you can undoubtedly redo and include this gadget in your site. You need to simply alter your Blog's HTML and a few codes. Also than you can appreciate with the immense gadget that i have posted here.

There are 2 sorts of the Related Post gadget.

One is with thumbnails and other is withoust thumbnials (just content) Both are extremely suitable for web journal. Presently its upto you which will be best one for your website. Furthermore your blog's perspective ought to be brilliant.


With Thumbnails :

Steps:

1. Sign in To Blogger.
2. Go to Template in dashboard section.
3. Click on Edit Html. (Download Template For Security)
And search for the following code.

 ]]></b:skin>

Now add below codes just above it.

 <!--Related Posts with thumbnails Scripts and Styles Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts-text {font-size: 0.9em !important;font-weight: 700 !important;line-height: 1.45em !important;font-family: Helvetica,Arial,sans-serif !important;width: 100px;padding-left: 3px;height: 105px;border: 0pt none;margin: 3px 0pt 0pt;} #related-posts h2{font-family:verdana !important;font-size:18px !important;font-weight:bold;margin:9px 0px !important;color:#666 !important;border-bottom:0px !important;border-top:0px !important;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;  }#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><!-- www.bloggersky.com --><script type='text/javascript'>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2wHprUm9-ejfP8tJ-dou_NYRA7Oev8jnGuC4V87M3pEWFIqTovmLLcTue-ZIOKZPjLAzz9IRD9485-uT21ngTWeyogCo7zXnUP_MlXs1JwDPMiishU78zTY4J1u97-PNuLKc7bFNIxqM/s1600/no_image.jpg&quot;;var maxresults=5;var splittercolor=&quot;#DDDDDD&quot;;var relatedpoststitle=&quot;You Might Also Like:&quot;;</script><script src='https://googledrive.com/host/0B-dv4rsl5_uZXzg0Z1FOVWhLSFk' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

After doing this. Search For the following code.

 <data:post.body/>

Now add the below code Just Below the above code.

 <!-- Related Posts with Thumbnails Code Start-->  <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>  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop><!-- www.bloggersky.com --><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>    </div><div style='clear:both'/></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggersky.com'><img alt='Blogging World' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHo61V55d4O55xu6dsvFHIji5gro3BeNK8flf2FF9OnHIGJuLBUyfMGmeKsYItxjLUv_b__8Xmswb79xfXSzdfEsqqJQ-S0heZESHx8gIE2nCfHAOKV2kPliCFjddtIqJBTGofihz8JRwm/s1600/best+blogger+tips.png'/></a></b:if></b:if>    <!-- Related Posts with Thumbnails Code End-->

Now Save Your Template and You are done.

Without Thumbnails:

For adding related post widget without thumbnails is very easy. You have to just use the below code in your blog's Layout. Follow the below steps:

Steps:
1. Go to Blogger.
2. Proceed To Layout.
3. Click On Add A Widget.
4. Now Paste the Following Code in it.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>

5. Now save. And Done.

Feel free to leave a comment.