Home » » Widget Related Post With Thumbnails

Widget Related Post With Thumbnails

Posted by Ran Dreamer on 12 May 2015

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.
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.

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design