The Blog Eazy: 5 Related Post Blogger Widget for Blogspot Blog

How Show Related Posts Below Each Blog Post?

The related posts Widget, as the title says, this Widget will generate the list of related posts. this Widget can be added either on the homepage (under each posts) or inside the post. By placing this related posts Widget, there is a chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger

Add Related Posts Manually To Blogger

<!DOCTYPE html>
<br />
<b:if cond='data:blog.pageType == "item"'> /* remove this */<br />
<style type='text/css'><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
<br />
#related-posts h2{<br />
font-size: 18px;<br />
letter-spacing: 2px;<br />
font-weight: bold;<br />
text-transform: none;<br />
color: #5D5D5D;<br />
font-family: Arial Narrow;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
border-right: 1px dotted #DDDDDD;<br />
color:#5D5D5D;<br />
}<br />
#related-posts a:hover{<br />
color:black;<br />
background-color:#EDEDEF;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPRE4qggfXKAg-Bz9Y9NqyYIRuk13EtWpRMGEBqwXfsIgFDv8cKxmJ-4UI3EhbMxTm10cBezztiPOfuKU67Gzd7xi82Y8FBhuS3gemx-8zshb-9wCnkpCUHdbSxJrQyZecGROlX-yufE/s400/noimage.png";<br />
var maxresults=5;<br />
var splittercolor="#DDDDDD";<br />
var relatedpoststitle="Related Posts";<br />
</script><a href="https://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a><br />
<script src='https://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/><br />
</b:if> /* remove this */<br />
<br />

Customization
Remove
1)<b:if cond='data:blog.pageType == "item"'> /* remove this */
2)</b:if> /* remove this */
- portion to add this Widget to Homepage

Place the URL of the image in quotes to display if there is no image in the post.
1) vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPRE4qggfXKAg-Bz9Y9NqyYIRuk13EtWpRMGEBqwXfsIgFDv8cKxmJ-4UI3EhbMxTm10cBezztiPOfuKU67Gzd7xi82Y8FBhuS3gemx-8zshb-9wCnkpCUHdbSxJrQyZecGROlX-yufE/s400/noimage.png";

Change the value var maxresults=5; to change the number of posts to be displayed

Change the color of the splitter line between posts. change var splittercolor="#DDDDDD";

Change the Name of the title, change- var relatedpoststitle="Related Posts";

Add To Post Footer
Find <div class='post-footer'> and copy the below code above it

<!DOCTYPE html>
<b:if cond='data:blog.pageType == "item"'><br />
<div id='related-posts'>
<br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != "true"'><br />
</b:if><br />
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><br />
<script type='text/javascript'><br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs("<data:post.url/>");<br />
</script><br />
</div>
<div style='clear:both'/>
<br />
</b:if><br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br />
<a href='https://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMHLD-13sx317tXQokgcDDp6JhR-48psPCMmUTWd3Noo1pT9tZkSi_J9IftyeOY0HuPKGkOJiEZB96O69E2M4iXxMOFqWhGBnn4B9kPHS0aAoyZ2hYd3hlW29WyWZ6HNEfmVmGA1xyQU/s1600/1x1juice.png'/></a><br />
</b:if></b:if><br />

Remove <b:if cond='data:blog.pageType == "item"'> and </b:if>
to add related posts to the homepage too.

Change max-results=6 to change the number of posts that should be displayed

We hope this article will help you. If so you may like and share this post with your friends.

The Blog Eazy

5 Related Post Blogger Widget for Blogspot Blog

How Show Related Posts Below Each Blog Post?

Add Related Posts Manually To Blogger

No comments:

Post a Comment

People are Searching

5 Related Post Blogger Widget for Blogspot Blog

How Show Related Posts Below Each Blog Post?

Add Related Posts Manually To Blogger

No comments:

Post a Comment

People are Searching

Subscribe