Add Related Posts below every post in Blogger

Naqash

blogger, Blogging, Related Posts

Monday, January 13, 2014

1 Komentar

Since ther is no official plugin for related posts by blogger I will teach you how to do that by adding some scripts to the template of your blog. It is not only useful in increasing the views of your posts but it also reduces bounce back rate of the blog. The related posts are chosen by labels and tags. Posts with similar labels will be displayed as related post. So lets get to how to add this feature to your blog.

1. Login to your Blogger "Dashboard". Then go to "Template" and click on "Edit HTML".
2. Locate the following code by pressing "CTRL+F" and entering the below code in the search box.

</head>

3. Just above/before that code, paste the following code.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:130px;height:130px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note: To modify the height and width of related posts thumbnail. Change the values in RED in above code.

 4. Now locate the following code.

 <div class='post-footer'>

5. And just above the code, paste the following 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>
<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_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhBZqqOMFdxOKmxVldvMlJYVgYFuDib4O6XRJbwgcwRgRzOII7nkG2PclRC4KPERnttJH4R9Xl0aLbo_N0xl2xMe8VdgQqb5KH05PUn4J2k710fX0MvGBkC8I0rkj5_KMFjcAOo5NY9KJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Note: Replace the 4 with the number of posts you want to be displayed below every post.
          Replace "Related Posts" with the title your want for the posts.

6. Click on "Save Template" and you are done.