How To Add Related Posts Widget In Blogger?

Increasing page views is very important for a blog. People will stay on your blog more time if you give them some easy navigation steps. Such as inter post linking, related post widget, feature posts etc. In this tutorial we will learn how to add related post widget in your blogger blog. This will show your similar posts titles under each post on your blog. When a reader finishes a post he/ she will see the related posts list and will read further posts on your blog. This is one way to hold a visitor for more time. Of course this will help to reduce your blog’s bounce rate.

UPDATE: How To Add Related Posts Widget With Thumbnails In Blogger Blog?

how to add related post widget

This related post widget find similar posts according by your post tags. So it’s important to tag your posts with proper keywords. This is also knows as post labels. This widget fetches the similar posts from those posts which have the same label tags as current post. I hope you understand.


Now come to the setup process...

1. Log into your blogger account

2. Click on your blog title

3. Click Template from left side menu

4. Backup your template before editing

5. Click Edit HTML, Click Proceed

6. Search for </head> by pressing Ctrl+F

7. Now paste the following code just above/ before </head> tag

<!--Related Post Widget www.shinemat.com Starts-->
<style> 

#sm-related-posts { float : left; width : 470px; margin-top:18px; margin-left : 4px; margin-bottom:15px; font : 12px Arial; font-weight: normal; margin-bottom:8px; }

#sm-related-posts .widget { list-style-type : none; margin : 5px 0px 5px 0px; padding : 0px; }

#sm-related-posts .widget h2, 

#sm-related-posts h2 { font-size : 18px; font-weight: normal; margin : 5px 7px 0px; padding : 0px 0px 5px; } 

#sm-related-posts a { text-decoration : none; }

#sm-related-posts a:hover { text-decoration : underline; }

#sm-related-posts ul { border : medium none; margin : 10px; padding : 0px; } 

#sm-related-posts ul li { display : block; background : url(&quot;http://3.bp.blogspot.com/-YBu32upj9PY/UQV2iZPbw4I/AAAAAAAACy4/GeTcA4VeMG4/s1600/sm-related-post-icon-1.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 23px; margin-bottom : 5px; line-height : 2em; border-bottom:1px solid #C0BABA; } 

#sm-related-posts ul li:hover { display : block; background : url(&quot;http://2.bp.blogspot.com/-vizHE6UaMSs/UQV2iklpq3I/AAAAAAAACy8/UCpQTzyvoj8/s1600/sm-related-post-icon-2.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 23px; margin-bottom : 5px; line-height : 2em; border-bottom:1px solid #C0BABA; }

</style> 

<script src='http://saimoomcodes.googlecode.com/files/related_posts_widget_for_blogger-user-shinemat.js' type='text/javascript'/>
<!--Related Post Widget www.shinemat.com Ends-->

8. Now search for <data:post.body/>

9. Paste the following codes after/ below of <data:post.body/>

<!--Related Post Widget www.shinemat.com Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sm-related-posts'>
<font face='Arial' size='4'><b>Related Contents: </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=06&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget www.shinemat.com Ends-->

10. Now click Save Template button, and you are all done.


Note:
You can select the number of maximum related posts in list. Just change max-results=06 (red highlighted) to any number.
Default number is 06.

That's all. If you get any problem regarding this tutorial fell free to ask me. I am here to help you with smile. Have fun!
If you enjoyed this post and wish to be notifyed next time whenever a new post is published, then please Subscribe to Email Updates!

1 comments :

nice post thanks for posting bro!!
please add more likethat again!
i love this blog!
Online Pokies and Casinos in Australia - FREE Bonuses
more info visit this link

@@@ peliautomaatteja@@@

Comment icon Say Something About This Post

Hi, Your are most welcome and feel free to share your comment(s). We will try to response your comment(s) as soon as possible.

Please DON'T spam here. Spam comments will be deleted just after our review.

Thank You For Being With Us.

 
 

What You Like To Read On ShineMat?

Join, Like & Follow Us




DMCA.com

Take A Break...