Widget Related Post With Thumbnails

Related post or posts related course we already know with the functions and benefits. This widget widget as others do have a lot of versions, that were previously only include the title, the following widget is also equipped with thumbnails (image) that can enhance the appearance related post on your blog. This widget can also easily be set and adjust the amount of related articles that you want to display or change the font and background hover on links etc.

Read : Add 4 Column "Page Elements" Above Footer

The following widgets are similar also with related post widget provided by links within, well, if you do not want to use the widgets from third parties please try the following tutorial:

1. as usual, please log in first to your blogger account, On the dashboard, you select Template => edit HTML

2. Press control F and look for the code </ head>

3. Then place the following code above the code </ head>:

<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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if> 

4. Then find the following code:

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

or

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

or

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

or

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

5. Then place the following code after the code or under the code number 4 above:

<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://labston.blogspot.com' 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=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

You can change the above code again to adapt them to your blog.

6. Finish, please save the template and see the results in your blog.

Read Also : Modifications Display Statistics Blogger Widget Version 2