Add Thumbnail related post widget in Blogger

Friends Now MBC going to presenting an Professional Thumbnail related post  for bloggers. Friends now a days many related posts codes are giving by many websites this time i am not interested write the website names. Fiends i have design a related post button for bloggers, its look is very professional design. The poular post background change automatically according to your blogger post footer back ground. Now start learn how to add this related post gadget in your Blog.

The related post i have already talk that the background color changes according to blogger post footer color. Now you many are not know what is related post friend related post means the post your are posted in blogger the post related terms are related posts, if you are uses one label in many posts then they are comes in all the posts there you are added the same label.

Adding Thumbnail related post widget in Blogger

1. First login to your blogger dashboard.


2. Go to Blogger design-Edit HTML-Expand Widget Templates


3. Download or backup your template.


4. Search for this by using (Ctrl + F)

</head>

5. paste the following code above it.

<!--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: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, &#8220;Times New Roman&#8221;, 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=&quot;http://3.bp.blogspot.com/-HDI1Fa0NGUE/Twm2H_nkW3I/AAAAAAAAAd0/JBtSoBkMjFM/s200/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related posts&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Now find the below code

<div class='post-footer-line post-footer-line-1'>

7. Now paste the following code in below it.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>
<!-- Related Posts with Thumbnail

Friend i have added some code that you can understand easily, if you are interested to changing the name Related Post with your choice then change the name Related Post. Then if you are intrested to cahnging the limit post shown in your blogger post page then change 7.

I have not added any of my credit because its not look good.

Save your template.

Visit your one blogger post page and enjoy with new look!!