Install related post widget with thumbnails for blogger

Hi guys, good morning... How do you do? I hope today is great day for all of you. Today i will share about related post, it's not fresh for senior blogger but i think for newbie alike me very useful to give more information for visitors. This blog i dedicated to blogger newbie and my students want to create blog.

OK guys no more talk, just go action. Follow my step by step tutorial.
1. Log in to blogger.com and from dashboard choose "Layout" tab --> "Edit HTML" than checked the "Expand Widget Templates" check box, don't forget to backup your template first(to prevent if your installation failure you can restore it again)

2. Search tag below

</head>

Paste this code above tag :

Look the picture.1

<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if>

3. Search tag below

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

If you can not find it then try finding this one

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

Still can not find it then try this one again, like my template not standard so i must search with another word and i found post-footer-line-3 with title line-3

<p class='post-footer-line' post-footer-line-3>

Paste this code after code above

Look the picture .2

<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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if>

4.You can adjust the maximum number of related posts being displayed by editing this line in the code below. For example you want to display 7 title of related posts

var maxresults=7;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

And finally the result like this

To change the colors and all you will have to modify the CSS
If you have troubles implementing this, just leave me a comment here and i will help you ASAP. If you like to give me any suggestions on how to improve this widget,then it would be really great.

Best regard,
Inspiration posting How to install related posts widgets with thumbnails view