How to Add Related Post Widget to Blogger

Sometimes we see related posts under the article in many popular blog or website. Actually adding a related post widget has a great significance for increasing traffic and page views in website. Besides your audience can easily track their expected articles which certainly result in positively. So let's see How to Add Related Post Widget in Blogger according to their catagory in Blogspot blog and Customize it :
(1) At first go to your Blogger Dashboard>> Then go to Template>> Then Edit HTML
(2) After that you need to find </head> tag by searching with Ctrl+F . Then paste these codes immediately after </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOO06oYX5cB-zMqOGDh9DXTtogqbeLpM4ZthCC1U3eqCM8Y2PL5dIeFpTE4zgJj-A1EyiZPx52ENT1BoT4U9v3OmN8Ywd6XgWubsSVMQ1SY6A7pUCfbas7sFqxXK0qVEfnCUi9_gdMVk/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/techbutty/scripts/Related_posts_hack.js' type='text/javascript'/>

(3) Now search for <data:post.body/>
Now paste these code immediate under <data:post.body/> code

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Now you will see related post under each post according to ther label, tag or catagory.
[Notice here I have given max-results=5 which means 5 maximum number of related post will be shown. You can change this number as you wish]
Please do not forget to subscribe us.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email