BLOGSPOT: How to make related post with thumbnails

Related posts with thumbnails are the posts that display the thumbnails with summary text under every post selected in the same label.And when visitors visit your posts , they are shown under that post to relate to the same label.The step to make ralated posts with thumbnails:

1- Log in your account to Dashboard -> Edit HTML and check the "Expand Widget Templates" check box.

2- Find the code </head>.

3- Copy the code below to paste before </head>.

Please Select on Highlight All and then Click on Copy to Clipboard

<br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> <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><br /> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUKqL_CCl_JZF11GKGnUcH7r-_Q5TSnsi6K814-IZS_My01oBO2f0P0StScA_IxSHAHQdwHkF2Oh0iPlZPQHnvhz5RovEXD2rMNkCSJehbSn6_rf82Q0MmUrO8oh1J7iKPqF75QQe66qo/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script><br /> <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/> </b:if>

4- Find the code : <div class='post-footer-line post-footer-line-1'> or <p class='post-footer-line post-footer-line-1'>
5- Copy the code below to paste after <div class='post-footer-line post-footer-line-1'> or <p class='post-footer-line post-footer-line-1'>

Please Select on Highlight All and then Click on Copy to Clipboard

<br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='related-posts'><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> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script><br /> </div><div style='clear:both'/></b:if> <br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><br /> <a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a><br /> </b:if></b:if><br /> <br />

6- You can correct the maximum number of related posts being displayed by editing this code var maxresults=5; .You can change 5 to any number to display your related posts to suit your template width .
7- Do not forget to save your template.