How To Add Related Posts Widget With Thumbnails to Blogger/Blogspot

Now here is a wonderful pol for displaying concomitant posts beneath apiece of your blog posts, along with thumbnails. The accompanying articles are chosen from other posts in that equal category/label/tag. With this edit more of your readers will rest on your place for person periods of moment when they see kin posts of powerfulness.

How To Add Related Posts Widget to Blogger/Blogspot

Go To Blogger Dashboard >> Template >>Edit HTML;
Check the "Expand widgets template" box;
Step 3. Search (CTRL + F) for this piece of code:

</head>

Copy and paste the below code just before/above </head>

<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://3.bp.blogspot.com/-PpjfsStySz0/
UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg
";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='https://docs.google.com/file/d/
0B7Q3JxFQN9Y2SlNOWS1BMUtRUGM/edit' type='text/javascript'/>
</b:if>

Note:
- to change the default picture, replace the URL in pink with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too

Now find the following code:

<div class='post-footer'>

And just above it, copy and paste the below code:

<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><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIHDsfAEzt5_JLdVcPkkPjKub-kQpXK7MH1q370ZwE5zfNgPFgpgjLaW2qhvJClLjt-gESHbGbyqBdYFyFRjToOpVikMr0fGVSS4F6pGm5ABFnF5VFweNOlVPAI19BHKmdrYto3tmPMKq/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note:

- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in blue.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 8:50 PM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Related Posts Widget With Thumbnails to Blogger/Blogspot. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2012/10/how-to-add-related-posts-widget-with.html" target="_blank">How To Add Related Posts Widget With Thumbnails to Blogger/Blogspot</a>