Related posts at the end of every blog post will let your readers explore your website more effectively. This related post html code will provid related posts with thumbnails at the end of every blog post you make.
Here’s the method to do this
Go to blogger dashboard>Design>EDIT HTML
Tick EXPAND WIDGET TEMPLATES
Find this code in your template </head> (you can search for this code by pressing CTRL + F on your keyboard)
Now copy and past the below code in red just above </head>
<!–Start Related Posts Script From http://www.theinfow.com–>
<b:if cond=’data:blog.pageType == "item"’>
<style type=’text/css’>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
<b:if cond=’data:blog.pageType == "item"’>
<style type=’text/css’>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type=’text/javascript’>
var defaultnoimage="http://4.bp.blogspot.com/_rKG-ziTSNUQ/TQjMBwjYg5I/AAAAAAAACgc/BT3MbSXKv1g/s1600/No+Image.jpg";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src=’http://spiceupyourblogextras.googlecode.com/files/RelatedPoststhumb3.txt’ type=’text/javascript’/>
</b:if>
<!–End Related Post From http://www.theinfow.com–>
You can change the number of posts you want this code to appear. change code var maxresults=7
according to the number of posts you want the code to apeear afer every post.
Now find <div class=’post-footer’> in your template and paste the following code in red directly below/after <div class=’post-footer’>
<!– start related posts–>
<a href=’http://www.theinfow.com’><img alt=’The Info World’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><a href=’http://www.theinfow.com’><img alt=’The Info World’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<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>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><br/><a href=’www.theinfow.com’ target=’_blank’><font color=’#ccc’ size=’small’>The info world</font></a><div style=’clear:both’/>
</b:if>
<!– end related posts–>
<a href=’http://www.theinfow.com’><img alt=’The Info World’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><a href=’http://www.theinfow.com’><img alt=’The Info World’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<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>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><br/><a href=’www.theinfow.com’ target=’_blank’><font color=’#ccc’ size=’small’>The info world</font></a><div style=’clear:both’/>
</b:if>
<!– end related posts–>
That’t it. Save the template and enjoy your blog with related posts at the end of each of your post
Leave a Reply